We have been wondering why our css and js changes failed to take effects after we have deployed our customized theme to the portal. We did a quick search and realize that we need to disable the caching in Liferay (of course another alternative is to start and stop your Liferay).

Key in the following properties in portal-ext.properties (${liferay folder}) and restart your liferay:
theme.css.fast.load=false
theme.images.fast.load=false
javascript.fast.load=true
javascript.log.enabled=false
layout.template.cache.enabled=false
browser.launcher.url=
combo.check.timestamp=true
freemarker.engine.cache.storage=soft:1
freemarker.engine.modification.check.interval=0
openoffice.cache.enabled=false
velocity.engine.resource.manager.cache.enabled=false
com.liferay.portal.servlet.filters.cache.CacheFilter=false
com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=true

Above properties can also be located at ${liferay folder}${tomcat folder}webappsROOTWEB-INFclassesportal-developer.properties.

Like Alimozzaman in his blog, we tried to search for the official theme variables for Liferay 6.1 and the closest thing we can find is a documentation which we believe its for Liferay 4.3. We managed to locate the init.ftl at ${liferay}${tomcat}webappsROOThtmlthemesclassictemplates.

We tried to sort the variable according to the variable type and its importance. Do feel free to comment, if we make a mistake or help us to fill in the description for some of the variables, thanks 🙂

Theme Specific Variables

1. $theme_display / $themeDisplay
   The theme display object (com.liferay.portal.theme.ThemeDisplay)
   Javadoc: ${liferay 6.1 javadoc}/javadocs/com/liferay/portal/theme/ThemeDisplay.html
2. $portlet_display / $portletDisplay
   The portlet display object (com.liferay.portal.theme.PortletDisplay)
   Javadoc: ${liferay 6.1 javadoc}/javadocs/com/liferay/portal/theme/PortletDisplay.html
3. $css_class
   The css class specified for the “color scheme” in the liferay-look-and-feel.xml, together with other css conditions like:
   <#if liferay_toggle_controls = “visible”>
   <#assign css_class = css_class + ” controls-visible” />
   <#else>
   <#assign css_class = css_class + ” controls-hidden” />
   </#if>
4. $theme_settings
   Theme’s settings
5. $theme_timestamp
   Theme’s latest deployment timestamp (expressed in long)
6. $css_folder
   Relative path to the css directory
7. $images_folder
   Relative path to the images directory
8. $javascript_folder
   Relative path to the javascript directory
9. $templates_folder
   Relative path to the templates directory
10. $full_css_path
11. $full_templates_path
12. $css_main_file
    Relative path to the theme’s main css file (main.css)
13. $js_main_file
    Relative path to the theme’s main javascript file (main.js)

Company Specific Variables

1. $company_id
   Company’s id
2. $company_name
   Company’s name (defined at Control Panel > Portal > Portal Setting, Name field)
3. $company_logo
   Relative path to the company’s logo (defined at Control Panel > Portal > Display Setting, Logo field)
4. $company_logo_height
   The height of the company’s logo (pixel)
5. $company_logo_width
   The width of the company’s logo (pixel)
6. $company_url
   Company’s home url (defined at Control Panel > Portal > Portal Setting, Home URL field)

Liferay Classic Theme Specific Variables

1. $liferay_toggle_controls
2. $page_group
3. $liferay_dockbar_pinned

References:

1. Liferay Wiki – Access Objects from Velocity
2. Liferay 6 Theme Variables by Alimozzaman
3. Liferay Official Theme Variables Documentation (which we believed its for Liferay 4.3)

As agreed with Piotr Filipowicz, the easiest way to include JSP in your Liferay theme is to create a “jsp” folder in your ${plugins_sdk}/themes/${customized theme folder}/docroot/_diff directory and deposit all of your customized jsp in the jsp folder.

To include the jsp in the vm template (for example portal_normal.vm), simply call the following code:
$theme.include($themeServletContext, “/jsp/test.jsp”)

Note:
You might need to include “portal-impl.jar” under your theme directory (${theme folder}/WEB-INF/lib) if you need to call classes from the following packages:

1. com.liferay.portal.model (Theme)
2. com.liferay.portal.theme (ThemeDisplay)
3. com.liferay.portal.util (WebKeys)

portal-impl.jar can be found at ${liferay folder}${tomcat folder}webappsROOTWEB-INFlib

References:
Tips & Tricks: include jsp into vm template by Piotr Filipowicz

Most projects required us to customize our own theme and skin, hence there is no surprise that the topic “How to create Liferay Theme” will remains as one of the hottest search topics among the Liferay developers.

Do the following steps to create Liferay theme:

1. Download and install Apache Ant in your environment and set the environment variables as follows (${ant_home}/manual/install.html):
   • JAVA_HOME = your Java environment
   • ANT_HOME = the directory you unzip Ant to
   • Append ${ANT_HOME}/bin (Unix) or %ANT_HOME%/bin (Windows) to your PATH
2. Download the latest Plugins SDK from Liferay (under Files for Developers). In our case, we have download Liferay Portal 6.1 GA 1.
3. Unzip the files to your desire location.
4. Create a file call “build.${username}.properties” in ${plugins_sdk} root folder. ${username} refers to the system’s user login name (or you can open an cmd prompt and key in %username% to get the value).
5. In this file, you can overwrite the values of any properties found in ${plugins_sdk}/build.properties. As suggested by Liferay wiki, the most common changed values for theme development will be:
   Note: Remember to escape “” with “\”
   • app.server.dir= ${liferay_home}\${tomcat_home}
   • app.server.deploy.dir= ${liferay_home}\${tomcat_home}\webapps
   • app.server.lib.global.dir=${liferay_home}\${tomcat_home}\libext
   • app.server.portal.dir=${liferay_home}\${tomcat_home}\webapps\ROOT
   • javac.compiler=modern
6. Open a cmd prompt and key in “create.bat ${new theme folder’s name} “${theme name}”” in ${plugins_sdk}/themes directory to create a base Liferay theme.
   
7. Once you have successfully create the base theme, you should be able to find “_diffs” in ${plugins_sdk}/docroot directory. _diffs folder is the place where you placed your customized code, for more information, please refer to Liferay Wiki – Anatomy of a Theme.
8. By default, Liferay SDK will copy “_styled” as its base theme. You can overwrite the base theme by modifying the “theme.parent” attribute found in ${plugins_sdk}/themes/${new theme}/build.xml. In this case, we have decided to take the Liferay Classic theme as its base.
   
9. To deploy the theme, access the customized theme folder via cmd prompt and type “ant deploy”. In our case, we access “hello-world-theme” directory.
   

References:

• Liferay Wiki – Plugins SDK
• Liferay Wiki – Anatomy of a Theme

Do the following steps to remove “/web/guest” from the URL (Liferay 6.1):

1. Login in as portal administrator.
2. Go to Control Panel > Site Setting.
   
3. Click on “Site URL“.
   
4. Key in your desired domain in the “Public Pages” field (you can leave the Private Pages blank).
   
5. Save your changes.
6. You should be able to access the portal via your new domain (liferay.vt.com:8080) and “/web/guest” has been remove from the URL.
   Note: Do not forget to include your domain in your host file and restart or clear your browser.

Warning: There seems to be an issue with the Site’s virtual hosts in Liferay Portal Community Edition 6.1.0 CE (Paton / Build 6100 / January 6, 2012). When our users tried to click on the portal’s links for the first time, they will be redirected back to the same page that they were in earlier.

Nick Lindberg (from Liferay forum) has summarized the problem for us:

When somebody loads our page for the first time, all the links are appended with:
;jsessionid=8D183E4EECA2028C1CF9C4D09E96DE2A
and what seems to happen is that when you click on it, it just redirects you back to the same page [our homepage] only those “jsessionid” strings are now gone and everything works as normal.

According to the forum, this issue will be resolved in the next release. We will verify this portion once the release is out.

2th Aug 2012 – Latest Update!
Liferay Portal 6.1 CE GA2 Release is out and LPS-25587 is one of the issues that is been fixed