The portal comes with several themes to demonstrate different ways the look and feel can be customized.
Multiple skins can defined in ./portal-web/docroot/WEB-INF/liferay-look-and-feel.xml.
<look-and-feel>
<compatibility>
<version>3.6.0</version>
<version>3.5.0</version>
</compatibility>
<theme id="classic" name="Classic">
<root-path>/html/themes/classic</root-path>
<templates-path>/html/themes/classic/templates</templates-path>
<images-path>/html/themes/classic/images</images-path>
<template-extension>jsp</template-extension>
<settings>
<setting key="hello" value="world" />
<setting key="hi" value="mom" />
</settings>
<color-scheme id="01" name="Blue">
<![CDATA[
body-bg=#FFFFFF
layout-bg=#FFFFFF
layout-text=#000000
layout-tab-bg=#E0E0E0
layout-tab-text=#000000
layout-tab-selected-bg=#6699CC
layout-tab-selected-text=#4A517D
portlet-title-bg=#6699CC
portlet-title-text=#4A517D
portlet-menu-bg=#B6CBEB
portlet-menu-text=#000000
portlet-bg=#FFFFFF
portlet-font=#000000
portlet-font-dim=#C4C4C4
portlet-msg-status=#000000
portlet-msg-info=#000000
portlet-msg-error=#FF0000
portlet-msg-alert=#FF0000
portlet-msg-success=#007F00
portlet-section-header=#596171
portlet-section-header-bg=#AFBEDA
portlet-section-subheader=#405278
portlet-section-subheader-bg=#91AEE8
portlet-section-body=#3F3F3F
portlet-section-body-bg=#EAF2FF
portlet-section-body-hover=#FFFFFF
portlet-section-body-hover-bg=#5274AE
portlet-section-alternate=#3F3F3F
portlet-section-alternate-bg=#DBE1ED
portlet-section-alternate-hover=#FFFFFF
portlet-section-alternate-hover-bg=#5274AE
portlet-section-selected=#7AA0EC
portlet-section-selected-bg=#FAFCFE
portlet-section-selected-hover=#00329A
portlet-section-selected-hover-bg=#C0D2F7
]]>
</color-scheme>
</theme>
</look-and-feel>The compatibility tag defines the version(s) the theme is compatible with. The portal will not load a theme if the theme's version does not match its own.
Under the theme tag, you can give the theme an ID and display name. The ID need only be unique within that particular XML file, meaning another theme can have the same ID in an XML file located elsewhere (ie. in another WAR). The paths should also be set to the respective locations. You can use the optional settings to create parameters that are accessible from the code.
The color-scheme tag defines the colors for various elements within a theme. (Ex. body-bg defines the body background color, portlet-font defines the font color for the portlets, etc.) In the example code, the Classic theme contains a color-scheme called Blue, which has an ID of 01. Multiple color schemes can be defined for a theme, but the ID need only be unique within the current theme.
After modifying the file, run ant build-color-scheme from ./portal-web/ to generate the appropriate images files for each color-scheme. For example, the Blue color scheme images will be generated into ./portal-web/docroot/html/themes/classic/color_schemes/01/.
Images will be generated for the Classic theme only and not for any other themes.
All the theme files are located in their own separate directory under ./portal-web/docroot/html/themes/. For the included Classic theme, the color-scheme specific files are under "color_schemes," general images used by the theme are under "images," and the template source code is under "templates."
All of code for the portal elements affect by the theme are in the respective theme directory under ./templates/. Below is a list of files along with a short description of their function.
| init.jsp | Initializes variables and properties needed for the theme |
| portal_init.jsp | Initializes variables and properties used by portal_normal.jsp & portal_pop_up.jsp. Includes init.jsp |
| css.jsp | Contains CSS style definitions for your entire theme |
| portal_normal.jsp | Controls the layout of portal templates for normal pages |
| portal_pop_up.jsp | Controls the layout of portal templates for pop-ups |
| top.jsp | Draws the top of the portal |
| bottom.jsp | Draws the bottom of the portal |
| navigation.jsp | Draws the navigation bar of the portal |
| portlet_top.jsp | Draws the top of each portlet |
| portlet_bottom.jsp | Draws the bottom of each portlet |
| inner_top.jsp | Draws the top of a tabbed box that's nested inside a portlet |
| inner_bottom.jsp | Draws the bottom of a tabbed box that's nested inside a portlet. |
| javascript.jsp | Contains JavaScript declarations |
File names will have a .vm extension if Velocity is used, in which case the template-extension tag would indicate VM instead of JSP.
Custom theme files can reside outside the portal's theme directory. For more information on deploying external themes, see Community Themes.