During Liferay Theme development, Themes are hot deployable plugins which can completely change the look and feel of the portal. Liferay developers can make themes to provide an interface that is unique to the website that the portal will provide. Themes make it possible to change the user interface so completely that it would be hard to tell that the website is running on Liferay. Liferay theme development provides a well-organized, modular structure to its themes which enables the liferay developers to be able to modify everything fast from the border around a portlet window to every object on the page, because all of the objects are easy to find. In addition, theme developers don’t have to customize every aspect of their themes: if the plugin SDK is used, themes become only a list of differences from the default theme. This allows themes to be smaller and less messy with irrelevant data that already exists in the default theme.
Inside the plugin SDK there is a themes folder where all new themes reside.
To create a new theme, you run the following command in this folder:
ant -Dtheme.name= -Dtheme.display.name=” ” create
For example:
ant -Dtheme.name=newtheme -Dtheme.display.name=”My New Theme” create
This command will create a blank theme in your themes folder.
Theme Concepts
Custom themes are based on differences between the custom code and the default Liferay theme, called Classic. You will observe that there is a _diffs folder inside your custom theme folder where you will place your theme code. You only requirecustomizing the parts of your theme that will vary from what is already displayed in the Classic theme. To do this, you mirror the directory structure of the Classic theme inside the _diffs folder, placing only the folders and files you need to customize there.
For example, to customize the Dock you need to copy just the dock.vm file from your Liferay installation (the Classic theme is in /webapps/ROOT/html/themes/classic) into your theme’s _diffs/templates folder. You can then open this file and customize it as you like. For example, you might change the welcome message to something else, like “Quick Links.
For custom styles, we suggest you to create a css folder and place a single file called custom.css. This is where you would put all of your new styles and overrides to the default Liferay styles. It is best to do it this way because of the order in which the .css files are loaded. Custom.css is loaded last, and so anything inside this file will be guaranteed to override any styles that are in any of the other style sheets.
Anatomy of a Theme
The folders in themes are designed so that they can navigate and understand easily. Currently, this is what the new directory structure looks like:
/THEME_NAME/ /css/ base.css custom.css main.css navigation.css forms.css portlet.css deprecated.css tabs.css layout.css /images/ (many directories) /javascript/ javascript.js /templates/ dock.vm navigation.vm portal_normal.vm portal_popup.vm portlet.vm /WEB-INF /META-INF
You can copy any of these files from the default custom theme to your _diffs folder so as to customize that portion of the theme.
JavaScript
Liferay now contains the jQuery JavaScript library, and liferay portal developers can include any plugins that jQuery supports. The $ variable, however, is not supported. Inside of the javascript.js file, you will find three different function calls, like following:
jQuery(document).ready( function() { //Custom javascript goes here } ); Liferay.Portlet.ready( function(portletId, jQueryObj) { //Custom javascript goes here } ); jQuery(document).last( function() { //Custom javascript goes here } );
jQuery(document).ready(fn);Liferay.Portlet.ready(fn);jQuery(document).last(fn);
Besides theme-wide JavaScript there is also support for page specific JavaScript. The Page Settings form provides three separate JavaScript pieces that you can insert anywhere in your theme. Use the following to include the code from these settings:
$layout.getTypeSettingsProperties().getProperty(“javascript-1”) $layout.getTypeSettingsProperties().getProperty(“javascript-2”) $layout.getTypeSettingsProperties().getProperty(“javascript-3”)
The content of the JavaScript settings fields are stored in the database as Java Properties which means that each field can only have one line of text. For multi-line scripts, the newlines should be escaped using \, just as in a normal .properties file.
Settings
Each theme can define a set of settings to make it configurable.
The settings are defined in the liferay-look-and-feel.xml using the following syntax:
Instead of creating two different themes, we are going to create only one and use a setting to choose which header we want.
While developing the theme we get to the header. In the portal_normal.vm template we write:
if ($theme.getSetting(“header-type”) == “detailed”) { #parse(“$full_templates_path/header_detailed.vm”) } else { #parse(“$full_templates_path/header_brief.vm”) }
Then when we write the liferay-look-and-feel.xml, we write two different entries that refer to thesame theme but have a different value for the header-type setting:
/html/themes/beauty ${root-path}/templates ${root-path}/images vm blue ${images-path}/color_schemes/${css-class} … /html/themes/beauty ${root-path}/templates ${root-path}/images vm blue ${images-path}/color_schemes/${css-class} …
Color Schemes
Color schemes are specified using a CSS class name, with which you can not only change colors, but also choose different background images, different border colors, etc.
In your liferay-look-and-feel.xml (located in WEB-INF), you would specify the class names asfollowing:
/my_theme ${root-path}/templates ${root-path}/images vm blue ${images-path}/color_schemes/${cssclass} green
Inside your css folder, create a folder called color_schemes. Inside that folder, place a .css file for each of your color schemes. In the above case, we would either have just one called green.css or let the default styling handle the first color scheme, or you could have both blue.css and green.css.
Now, inside of your custom.css, you would place the following lines:
@import url(color_schemes/blue.css); @import url(color_schemes/green.css);
You can identify the styling for the CSS by using prefixes. In blue.css you would prefix all of your css styles like this:
.blue a {color: #06C;} .blue h1 (border-bottom: 1px solid #06C}
nd in green.css you would prefix all of your CSS styles like this:
.green a {color: #06C;} .green h1 (border-bottom: 1px solid #06C}
Portal predefined settings
The portal defines some settings that allow the theme to determine certain behaviors. So far there are only two predefined settings but this number may grow in the future.
portlet-setup-show-borders-default
If set to false, the portal will turn off borders by default for all the portlets. The default is true.
This default behavior can be overridden for individual portlets using:
liferay-portlet.xmlPortlet CSS popup settingbullet-style-options
The value must be a comma separated list of valid bullet styles to be used. The default is an empty list. The navigation portlet will not show any option in the portlet configuration screen.
The bullet styles referred to in the setting are defined in any of the CSS files of the theme following this pattern:
.nav-menu-style-{BULLET_STYLE_OPTION} { … CSS selectors … }
Here is an example of the HTML code that you would need to style through the CSS code. In this case the bullet style option is cool:
Using your CSS skills and, if desired, some unremarkableJavascriptis possible to implement anytype of menu.
