Liferay Theme tutorial

Liferay Theme Tutorial

Liferay Theme Tutorial will give drive you into theme types, theme creation and _diffs folder in detail level. Liferay look and feel is managed through Theme plugin and multiple themes can be added to the portal at page level, site level.

Theme is responsible for:

1. Look and feel of the pages, sites with Headers and footer areas
2. Appearance of the portlets
3. Provides CSS, Javascript, Images resources to plugins Portlets, Hooks

There are 3 types of Liferay themes can be created can be found in (liferay_home/tomcat_folder/webapps/ROOT/html/themes)

1. Unstyled  –  Theme that would be developed from scratch and does not provide Liferay default css and AUI JS  for portlets. New will load css, js resources form liferay unstyled theme,.
2. Styled –   New theme will built on top of styled theme that provides required AUI CSS and JS elements
3. Classic – This is default Liferay theme and new theme will be built on top of classic theme level

Now we will jump into creation of Liferay theme

Step1: Click on File -> New ->Liferay Plugin Project

Step2: Select as styled as parent theme and velocity as theme framework. you can select jsp and freemaker also. Step3: Create custom theme resources in _diffs folders

1. you can find the _diffs folder and all custom code will goes here. create subfolders that are same with root level folder. Create css, js, templates, js folders.
2. Copy  the main.css file from root level into _diffs/css folder. main.css includes  all liferay css (aui.css,portlet.css) that merged into single main.css. main.css file would available to all liferay portlets
3. Create custom.css in _diffs/css folder and add entry into main if not there

4. @import url(base.css);
   @import url(application.css);
   @import url(layout.css);
   @import url(dockbar.css);
   @import url(navigation.css);
   @import url(portlet.css);
   @import url(extras.css);
   @import url(custom.css);

5. copy the .vm templates files also into _diffs/templates folder
6. Finally create images,js folders to hold images, js resources. The theme folder structure will look like below:

7. 

What are the templates and why it needed?

1. init_custom.vm-   init_custom.vm file is to create custom variables required for the current theme. Liferay provides  init.vm file that provides default variables can be access.
2. portal_normal.vm – Defines the look and feel of pages and templates
3. portlet.vm – defines portlet strcures
4. portal_pop_up.vm – defines the look and feel of  pop-ups when window state is pop_up.
5. navigation.vm –  but this optional and need to include in portal_normal_vm file through $theme.parse() command. it defines header navigation

When you create styled theme then liferay provides some default structure.

Now we will look into structure of  portal_normal.vm  that responsible to include Liferay CSS, JS etc. so  most of the developers will focus in designing this file.

1. #parse ($init) —  This is used to load the default liferay variables like $theme_display,$portletDisplay,$portletURLFactory, $portalUtil. you can find all implicit variables in /tomcat_home/webapps/html/theme/unstyled/templates/init.vm .   VelocityTemplateContextHelper.java (In Liferay6) and portal-impl/com/liferay/portal/velocity/VelocityVariables.java(in Liferay5 version) is used to set variables into Liferay
2. $theme.include($top_head_include)  –
   • This includes JSP file from location /tomcat_home/webapps/html/common/themes/top_head.jsp
   • top_head.jsp is  mean to load portal css, portlets css, portal js and portlets js files
3. $theme.include($body_top_include) – –
   • This includes JSP file from location : /tomcat_home/webapps/html/common/themes/body_top.jsp page
4. $theme.include($body_bottom_include) —
   • This includes JSP file from location : /tomcat_home/webapps/html/common/themes/body_bottom.jsp
5. $theme.include($bottom_include) –
   • This includes JSP file from location : /tomcat_home/webapps/html/common/themes/bottom_head.jsp 
6. Portlet section:  This is the section where you will drag the portlet into Liferay page.
   • <div id=”content”>
     <nav id=”breadcrumbs”>#breadcrumbs()</nav>#if ($selectable)
     $theme.include($content_include)
     #else
     $portletDisplay.recycle()$portletDisplay.setTitle($the_title)$theme.wrapPortlet(“portlet.vm”, $content_include)
     #end
     </div>

Here is complete JSP loading list in theme level:

#set ($body_bottom_include = “$dir_include/common/themes/body_bottom.jsp”)
#set ($body_top_include = “$dir_include/common/themes/body_top.jsp”)
#set ($bottom_include = “$dir_include/common/themes/bottom.jsp”)
#set ($bottom_ext_include = $bottom_include)
#set ($content_include = “$dir_include$tilesContent”)
#set ($top_head_include = “$dir_include/common/themes/top_head.jsp”)
#set ($top_messages_include = “$dir_include/common/themes/top_messages.jsp”)

This is all about theory and sample liferay theme code. In next tutorials, we will see more in detail level.

Click here to download the liferay theme Source (Liferay sample theme code)