New themes Blog entry (4/4) - 1975 London theme

General Blogs October 13, 2016 By Marcos Castro Staff

Hi everyone!

 

In our final entry of the series, we are happy to introduce a theme that you can use to create your own subscription site. Welcome to 1975 London!.

 

 

"A music site as example"

 

The new 1975 London theme includes an awesome site template with news and an album player to sit back and relax while listening to small fragments of your favourite songs.

 

This theme includes some new exciting features such as:

 

  • Different ways to show the content preview: you can choose from two different cards and two layouts to show album previews display and combine it with different text positions to get modern and awesome layouts.

 

 

  • Two layouts to show album previews.

 

 

  • Modern layout to display news

  • Easy way to put your header over your content through a setting.

 

Soon in the marketplace

 

The 1975 London theme will soon be published in the marketplace.

 

New themes Blog entry (3/4) - Porygon theme

General Blogs September 1, 2016 By Marcos Castro Staff

Hi everyone!

 

Today, in a not-so-unexpected turn of events, we proudly present you Porygon.

 

 

"Start your own digital magazine"


The new Porygon theme has been designed to get you started with your own digital magazine. Porygon is a modern and visually attractive theme that will bring new life to your already amazing contents.


This theme includes some new thrilling features such as:

 

  • Different ways to show the content preview: you can choose from a variety of cards, lists and carousel setups to mold your layout.

 

 

  • Matching support for blogs and contents. You can use both blog entries or structured contents independently and they will all blend together in your site.

  • 16 article examples with big photos and realistic contents.

  • A Portlet Decorator that you can use to showcase a specific content or application.

  • A subtle and minimalistic search integration.

 

Soon in the marketplace

 

The Porygon has been published in the marketplace.

https://web.liferay.com/marketplace/-/mp/application/81920471

New themes suite (2/4) - Westeros Bank theme

General Blogs August 16, 2016 By Marcos Castro Staff

Hi everyone!

 

A week ago we started the new serie of blog entries about our new themes for Liferay 7. Today, we gladly present you our second theme: Westeros Bank:

 

 

"A bank case"


The Westeros Bank theme has been developed to showcase a realistic banking project. Sites like this are usually very complex. With this in mind, we have tried to build the simplest common mechanisms to provide a solid foundation for you to get started and apply your own patterns and final touches.


This theme includes some cool features such as:


  • Four different type of structured content to create a cool layout

  • Four navigation placeholders for a finely grained navigation experience and customization

 

 

  • The device visibility of those navigation placeholders can be configured from Theme settings

 

Westeros Bank theme has been already published in the marketplace:

https://web.liferay.com/web/guest/marketplace/-/mp/application/78803695

 

New themes suite (1/4) - Fjord theme

General Blogs August 5, 2016 By Marcos Castro Staff

Hi everyone!

 

For a long time themes have been one of the most required features in Liferay, and as we announced during last year, Liferay 7 will be a game changer.


This will be the first out of four different blog entries in which we plan to present our vision for the theming layer moving forward.

 

 

"Real cases"

To begin with, we have developed a set of themes focused on solving real Liferay theme use cases. The main goal is to provide a minimum viable implementation of a real site.

 

We’ve taken inspiration in real Product, Banking and Digital Magazine Sites to distill a useful and inspirational set of themes that can get you started!

 

"Minimal overhead"

With simplicity in mind, we have built awesome themes that add only the necessary overhead. This means that we are enforcing standard pieces all over the sites, minimizing the needs for custom developments.

 

Creating a site based on these themes should give you the enough traction to get started but still staying out of your way, letting you apply your own patterns.  


 

Fjord theme 

"Product APP" has been recently renamed to "Fjord"

In today's case we will take a look to new Fjord theme, a theme conceptualized to create an engaging site to showcase and promote a product.

 

As some of the images can hint, this theme includes some cool features such as:

 

  • Six different structure and templates to easily create attractive content for your site

  • Configurable social media links

  • Configurable Fulll Screen Navigation

 

The Fjord theme has been already published in the marketplace:

https://web.liferay.com/web/guest/marketplace/-/mp/application/78803431

Bootstrap 3 in Liferay 6.2, yes! that's possible

Technical Blogs May 23, 2016 By Marcos Castro Staff

Hey guys, today I am going to speak about a concurrent topic, how to replace Bootstrap 2.3.2 CSS in Liferay 6.2 for new Bootstrap 3.x, I have received a lot of questions about it, and I helped all I was able, but I think this post and GitHub repository with a theme example can help more than some emails.

 

Before all else, I would like to say that the solution which I provide today is a personal work (not official) and only one of many ways to achieve it but for me it is the easier way because we only change the theme.

 

Yes, I've written the word "replace". This solution remove Bootstrap 2.3.2. and add Bootstrap 3.x (4 in the near future). It is not a way to put Bootstrap 3 on top of Bootstrap 2.3.2, I can not recommend that solution for many reasons, for example: it would duplicate the CSS weight, there would be a lot of class conflicts, or it would be very difficult to define browsers compatibility in your project.


Of course, we can not replace all Bootstrap 2.3.2 classes references along Liferay portal only when you theme is applied, but they are not many classes to rescue, so we will extend those old classes from new Bootstrap 3.x equal clases, like an example: span6 will work as col-md-6.

it can sound hard but no worries, let's see step by step (or go directly to GitHub repository with an example):

 

We are going to create a new _styled theme based on Boostrap 3.x, so first of all, you will need create a new theme using new SDK based on gulp or normal SDK.

Did you know where Bootstrap 2.3.2 CSS files are located in your theme? No worries, they are in “css/aui” directory, so let's work into this directory.

 

1º Create new aui.css file in “css” directory, then we must delete Bootstrap 2.3.2 references in this aui.css, in this way Bootstrap 2.3.2 will be removed from our theme (files will be there, but they won't be loaded).

 

 

 

2º Now we are are going to add the new Bootstrap, so let's go to copy "Bootstrap 3.x sass-version" files into a new directory inside “aui” called "bs3" and reference it in aui.css.

We can use differents ways to get Bootstrap 3.x sass-version, download directly from Bootstrap-sass GitHub repository, using Bower, npm, gem or compass, as you prefer.

 

 

 

3º Well, we have interchanged Bootstrap versions, but all old classes which have been deleted/renamed in Bootstrap 3.x do not look well so they should be created as an extension of the equal classes in Bootstrap 3.x, for this we will use my CSS file named "_bs2_extender.scss" which will do all basic extensions.

Some examples about what this file does:

 

 

 

4º Some Liferay CSS components do not look so well as they should because they were based on Bootstrap 2.3.2, so to fix it we will add a file called “_bs_liferay_fixes.scss” which contains some adjustments.

 

 

 

Now we can deploy the theme and we should see something like this:

 

 

 

It’s done! you have a new Bootstrap 3.x_styled-theme with which you will be able to use as a base to build your Bootstrap 3.x Liferay 6.2 themes.


In “_bs2_extender.scss” file I have extended the classes I consider the minimum to work well in Liferay 6.2, but feel free removing or adding, even collaborating in GitHub repository of this theme.

I recommend to use this theme when we want to use Bootstrap 3.x upgrades like its grid or responsive facilities. If we are still writing Bootstrap 2.3.2 markup, It wouldn’t make much sense, so be smart about what Bootstrap version do you want to use.

 

Thanks guys! More info about what I’m working on, Liferay themes or Liferay general world on my twitter @marcoscava

From Atomic design to your Liferay project

General Blogs January 1, 2016 By Marcos Castro Staff

I would like to start saying that this entry is focused on designers and front-ends but I think that it would be useful for all people who wants to know what is the real advantage to applying Atomic design.

Part of this entry is about Liferay themes, so I have to say that for me there are three approaches to turn visual designs in a Liferay theme:

  1. Close to bootstrap system: like a bootstrap extension, for example: Lexicon has been built under this approach.
  2. Freestyle over custom.css: the most common way, “do not look back” your style and your tecniche over Liferay, example: my free themes.
  3. Applying Atomic design principles.

All of them are perfectly valid and I have tried to use all of them but today and in this blog entry I’m going to talk about advantages of Atomic design, from its design principles to how I usually apply it to Liferay front-end/themes.

 

I’m going to continue with a simple sentence: “Atomic design is not a new thing”:

Designers have been working on this way for a long time but we have used other names, probably the most common would be “system design". But yes this concept has been getting importance so can be a bridge between designers and technical people, from the abstract to the concrete. Atomic design language is simple, we will speak and work along these five groups:

 

There is a lot of information about Atomic design but here a little resume about how those groups are conceptualized:

  • Atoms: Color palette, Font sizes, Labels, Inputs, Buttons, etc..
  • Molecules: Built by atoms, for example: an advance search block which contains four atoms one label, input type text, input type select and a button.
  • Organism: Based on union of molecules, to create little components with some complexity, like a header based on a logo, a navigation and a search block.
  • Templates: Here it starts a concrete language, as you can imagine we can use Organisms to create all templates as the project needs.
  • Pages: And at last, template content is replaced with real content to give an accurate design of what a user will see.

 

Why should front-end people find out advantages on this approach?

These days at much projects front-end people are assuming the responsibility to translate design language to technical language, and yes, that works many times!. But languages are created to communicate and bring people so let language does its work and get some rest for front-end happy people.

As you can see in Atomic design groups image we start in abstract terms (atoms, molecules and organisms) and we finish with so concrete terms like templates or pages. Atomic design language is simple and concise.

 

Project reality and Atomic design

It does not matter how many care we spend in our projects, most of the time we will need to change little design things, but how much impact will it have in design, front-end or developing? By using the same language we will be able to change one little thing (an atom) which will change all design in all templates and all pages. I know I know it sounds too good, like a fantasy but it can work with little approach changes:

 

Approach changes for Visual Designers and UX Designers:

We need extensible tools, tools which allow us to create reusable symbols. Most common tools to work on this concept are Illustrator or Sketch which allow you to create atoms of type text, color, and groups.

I know that this explanation is very short to transmit so big change so I have created a sketch file which can explain better the concept. The file is only an example and a beginning of how it can work, I didn't want to intrude in how you are working.

Download sketch file:

 

This file has six artboards, the first one is a file's explication, the rest are one artboard for each atomic group, atoms, molecules, organism, templates and pages, there are builded three atoms, two molecules, two organism and one template. To build them I have only needed this symbols and styles:

 

Now, we can change an atom like color to change all molecules, organisms and templates:

The sketch file is totally free and feel free to use it like a base to create more complex projects.

 

Where is the improvement for UX guys?

Normally UX designer works before a visual designer and then when visual design is finished they can review the results and make suggestions, the advantage in Atom design starts in atoms because UX guys can start their testing over an atom, for example: if we want to validate buttons touchables sizes (over UX recommendations), we will be able as soon as we have button atom ready!

 

Approach changes for Front-ends and Developers:

Now I’m going to share how I have ordered css files in an Atomic design approach, but this is only my way, if you guys find out some better way It would be a pleasure to me to know it.

I have created a git repository with a Liferay theme where applies this approach and architecture, here:

https://github.com/marcoscv-work/atomic-design-theme

 

As you can see inside _diffs directory there is a new directory called “atomic”. custom.css will only load atomic main files inside atomic directory so we can go directly inside atomic directory:

_atomic.scss will load all atoms, molecules, organisms, templates and pages from respectively directories, and _atomic _variables.scss will load all variables which are divided by group:

 

Atomic design is totally independent from frameworks for technology, so you can work as you prefer, this theme is only an example about how to translate the language to files and directories structure.

I’m sure that following this approach we can improve the workflow, getting better the design design, the communication between teams and our front-end organizing.

 

More info about what I’m working on, Liferay themes or Liferay general world on my twitter @marcoscava

2015 themes

General Blogs December 27, 2015 By Marcos Castro Staff

Hey guys, before this year ends I wanted to share with you some impressions and feedback which many of you have given me about the three free themes I have shared this year.

First, I would like to give you thanks for all positive appreciations: 5/5 stars, comments, almost 5.000 downloads, keep them all these months between more viewed in Liferay marketplace or even some collaborations through github to improve them.

But the more impressive thing for me has been that a lot of sites are using them as a finish solution and in differents ways that I never imagined and well, this is the reason why I'm writing this entry:

 

Differents ways to use the same theme:

Advice: These three themes have site templates which you will see after their installation.

Manzanita theme:

Download on marketplace - Github

This theme was conceptualized to create simple brand websites with a simple navigation. It needs a small logo like an icon and has an advance color palette settings and it is totally responsive:

That was the first thought, but you guys are using it to create:

  • Complex websites like insurance portals and intranets, adding a simple left sitemap portlet to create different navigation levels.
  • Blog sites like medium: It uses structures/templates which allow to create blocks with 100% width images or text blocks with limited width.
  • And the most awesome way for me was that some of you guys have used it to create product shop pages reusing content grid to show products and its modal to open the integrations with ecommerce solution.

 

Madrid theme:

Download on marketplace - Github

This theme was a tribute to my hometown, and all included pictures and videos are taken by me and are totally free:

I thought on it like a presentation page, in fact the theme includes an auto generated submenu which allow you to navigate between portlets at the same page, but here some examples about how you all are using it:

  • Product sites, type of page with a long vertical scroll, changing the navigation portlet index to show circles in a page side.
  • Photographer sites, with portlet index navigation as separators between types of photography.

 

Traveler theme:

Download on marketplace - Github

Theme with pictures of some of my travels and it was conceptualized like a modern travel agency, this theme is very different from what we are used to because it will display all portlets in vertically, and you will be able to navigate along them using big arrows. It also includes a good example of main configurable navigation, you can change the navigation side or the main color palette:

This theme has been used in ways like:

  • Portfolio sites: showing visual designs, pictures or videos.
  • Tours sites: A little instruction with illustrations.
  • Presentations like powerpoint or keynote: I have used this way
  • And the most impressive for me, an eLearning site!: each page is a chapter which has a portlet with topics and you can move free between all topics, the last portlet contains the chapter exam.

 

At the moment this is all, if you are using some of these themes in other different and creative way please let me know to extend this list and to bring us more possibilities.

More info about what I’m working on, Liferay themes or Liferay general world on my twitter @marcoscava

Dockbar themes

Technical Blogs March 11, 2015 By Marcos Castro Staff

Welcome to my first post!

As a theme developer in Liferay I start this blog with the goal of sharing all type of useful content.

I want to speak about a little frequent problem with dockbar, sometimes the dockbar could disturb if our portal design collides with it. The first advice that I can give you is to show the dockbar only when the user really needs it, for this we only need to change the permissions and adapt them to your needs. We never should delete the dockbar because the administrator users would lose much of his advantages.
 
Thinking on this problem, I have worked on themes which change the aspect, position, colors and add 'responsive design improvements' of our dockbar. These basic themes work in Liferay 6.2 CE and EE.

 

The first theme is based on _styled and tries to get the style of 'Classic responsive dockbar' adding the posibility of customice colours, for this we only need to add dockbar_classic.css in our _styled theme, into main.css:

main.css, last line:

@import url(dockbar_classic.css);

 

We are going to work with dockbar split because changes will be more visible, to add the class dockbar-split in our Body, like Nate told us time ago:
https://www.liferay.com/es/web/nathan.cavanaugh/blog/-/blogs/the-nitty-gritty-theme-improvements-and-bootstrap-in-liferay-6-6

Or adding a theme variable:

Adding on liferay-look-and-feel.xml:

<setting configurable="true" key="dockbar-split" type="checkbox" value="true" />

and init_custom.vm or portal_normal.vm:

#set ($dockbar = $theme.getSetting("dockbar-split"))

#if ($dockbar == true)
   #set ($css_class = "${css_class} dockbar-split")
#end

If you want to modify the dockbar colours, you only need to open the dockbar_classic.css and modify the next lines:

Some examples:

 

Easy or not? ;)

dockbar-classic-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-classic-theme

 

Now we are going to get our dockbar and give it a new aspect and funcionallity, it will look like this animation:

 

 

I called this theme “dockbar vertical”.

We will follow the same way that we've made at the previus example, adding the css file dockbar_vertical.css into a custom.css (_styled theme based):

@import url(dockbar_vertical.css);

 

And a little script into main.js, to create new icon to open dockbar and detect click over this icon:

if (portletDockbar) {
  var BODY = A.getBody();
  BODY.append('<div class="icon-toggle-dockbar vertical-dockbar-close"><i class="icon-cog"></i></div>');
  BODY.append('<div class="layer-mobile visible-phone vertical-dockbar-close"></div>');
  var toggleDockbar = A.one('.icon-toggle-dockbar');
  var toggleDockbarClose = A.all('.vertical-dockbar-close');
  var toggleDockbarIcon = A.one('.icon-toggle-dockbar .icon-cog');

  if (toggleDockbar) {
    toggleDockbarClose.on(
    'click',
      function() {
        portletDockbar.toggleClass('over');
        toggleDockbar.toggleClass('over');
        toggleDockbarIcon.toggleClass('icon-remove');
        toggleDockbarIcon.toggleClass('icon-cog');
        BODY.toggleClass('lfr-has-dockbar-vertical');
      }
    );
  }
};

 

Obviously we have two new images to create the user background animation:

To customice this animation you can changue the images directly or change the css animation opening the file dockbar_vertical.css at lines 678 to 685, you could delete or remplace for example by a static background:

&>a {
  background: url(@theme_image_path@/dockbar_vertical/back-user.png) no-repeat left top
}

dockbar-vertical-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-vertical-theme

 

The third theme which I called “bubbles dockbar” works similar to the two previous dockbars, adding the dockbar-bubbles.css into your main.css.
You can see it in this animation:

We could customize the colours and icons sizes:

 

dockbar-bubbles-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-bubbles-theme

 

These themes are going to be updated on my github:
https://github.com/marcoscv-work/experimental-liferay-themes/
If you prefer take a quick look you can download the wars here:
 

Get more live info in my twitter account: @marcoscava

Please, let me know your feedback to keep improving! ;)

Showing 8 results.
Items 20
of 1