Changing Portal's look and feel with themes

Till now we have discussed the basic concepts of the portal and building blocks of Liferay Portal, which are important for portal design. Now, whenever any company wants a portal to be developed, the bare minimum requirement is that the portal should represent the company. This can be achieved by providing the company or organization specific look and feel. The company may have its own logo, its own colour scheme, and specific styling which it wants to be represented in its portal. Liferay Portal achieves this requirement by using themes.

Themes in Liferay can be created as hot deployable plugins and they can transform the look and feel of the entire portal. When you start the Liferay out-of-the-box server, it starts with the default look and feel. Liferay's Classic theme is responsible for this look and feel.

Liferay introduced the concept of theme in version 3.5. The motive behind theme was to provide developers a way to change the look and feel of the portal. The theme in Liferay is a CSS-based environment. We can change the following aspects of portal with the use of theme:

Liferay theme uses the following technologies:

Whenever we create a theme in Liferay, it will always be based on the differences of one master theme. The final theme will be a result of combination of the master theme and the differences.

It is possible to install a new theme from the Plugin Installer, which we have discussed earlier in the chapter. In most of the cases, Liferay theme developer develops a new theme based on the differences of the parent theme, which is also known as the base theme which consists of basic styling and placeholders for the theme. The theme is created in plugins-SDK, which is a development environment provided by Liferay. Once the theme is developed, any target can be used to deploy the theme on the application server. The theme gets converted into the .war file and the file goes into the deploy folder of the Liferay Portal server. Once the .war file is extracted by the Liferay, it becomes available and can be used to change the look and feel of the portal.

Since we are not covering any development aspect of Liferay in this book, we have created a theme and provided a .war file to you. The theme is called CIGNEX Neighbourhood theme. We will be creating CIGNEX Neighbourhood portlet in the further chapters of the book. We can change as many aspects of the theme as we want, but for the simplicity we have only changed the logo of the portal. Instead of displaying Liferay Company logo on the top-left corner of the page, it will display a logo of the CIGNEX Neighbourhood community. We can change the theme using the Manage Page option available in the Dockbar.