How to create your own Liferay theme

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:

One thought on “How to create your own Liferay theme”

Leave a Reply

Your email address will not be published. Required fields are marked *