A theme specifies styles of all major global portlets and content, so it controls the way the portal will look. In general, a theme uses CSS, images, JavaScript, and Velocity (or FreeMarker) templates to control the whole look and feel of the pages generated by the portal. Therefore, when creating customized themes, we need to consider these four groups as well. The theme is made up of a folder _diffs with four subfolders css, images, javascript, and templates; and a folder WEB-INF with the properties file liferay-plugin-package.properties and, optionally, XML file liferay-look-and-feel.xml.
- As shown in the following figure, when you deploy a theme, it will copy all files from the folder
${app.server.portal.dir}/html/themes/_unstyled/to the folder$PLUGINS_SDK_HOME/themes/${theme-name}/docroot/first. In fact this will happen during build time, instead of deploy time. - All files from the folder
${app.server.portal.dir}/html/themes/_styled/are copied to the folder$PLUGINS_SDK_HOME/themes/${theme-name}/docroot/, too. - Later, it will copy all files from the folder
$PLUGINS_SDK_HOME/themes/${theme-name}/docroot/_diffs/to the folder$PLUGINS_SDK_HOME/themes/${theme-name}/docroot/. It means that you will override existing files with new files and changed files under the folder$PLUGINS_SDK_HOME/themes/${theme-name}/docroot. Here the${theme-name}refer to a real theme project name.
Then, you will see four folders such as css, images, javascript, and templates under the folder $PLUGINS_SDK_HOME/themes/${theme-name}/docroot. And each folder will contain all merged files and subfolders from /_unstyled, /_styled, and /_diffs.
The best practice of building customized theme is to put only the differences of customized theme into the folder ${theme-name}/docroot/_diffs. Here ${theme-name} refers to any theme project name such as, for example, book-street-theme. Using the best practice, we need to put customized CSS, images, JavaScript and templates in the folder /_diffs only.
In the folder /_diffs/css, create a CSS file custom.css. We should place all of CSS that is different from the other files. By placing custom CSS in this file, and not touching the other files, we can be assured that the upgrading of their theme later on will be much smoother. In the folder /_diffs/images, put all customized images with subfolders. For example, create two images: screenshot.png and thumbnail.png, to record what a page with current theme looks like. And furthermore, create a subfolder searchbar, and put all search-related images in this folder /searchbar.
In the folder /_diffs/javascript, create a JavaScript file javascript.js. Liferay portal includes the YUI Library. Thus in the theme, we can include any plugins that YUI supports. In the folder /_diffs/templates, create customized template files (for Velocity, it is *.vm files; for FreeMarker, it is *.ftl files), such as dock.vm, init_custom.vm, navigation.vm, portal_normal.vm, portal_pop_up.vm, and portlet.vm. Note that you can use JSP files in template files under the folder templates. However, you won't have access to the velocity variables if JSP files were in use.
Layout Templates are ways of choosing how portlets will be arranged on a page. Layout templates are usually a grid-like structure, and most often, are created with HTML tables. They make up the body of page, the large area where portlets are dragged and dropped to create pages. In a word, a layout template describes how various columns and rows are arranged to display the portlets. In brief, layout template controls the visual structure of pages in the portal.
As shown in following figure, the Plugins SDK provides an environment for developers to build layout templates, similar to that of portlets and webs. It uses the Ant target Deploy or Maven to form WAR file and copy it to the Auto Deploy directory first. Then the portal will detect if there are any WAR files in the auto hot-deploy folder, and automatically extract the WAR files into an application server deployment folder.
Note that both WEB and WAP got supported in layout templates. A layout template plugin should include at least two files: a file called .tpl for WEB and a file .wap.tpl for WAP. The WEB version specifies the arrangement of portlets in a page in web browsers; while the WAP version specifies the arrangement of portlets in a page of WAP devices.