By default,
Classic Themes is installed as an initial template for Liferay Portal. This initial template can be further replicated and modified to produce new themes for the portal.
This tutorial requires you to use Windows Explorer to browse the files and folders. For easy referencing, we will use the
ROOT folder as the starting folder, which is physically located at
liferay-portal-6.1.0-ce-ga1-1\tomcat-7.0.23\webapps\ROOT. (notice that it is spelled in capital letters).
1) Using Windows explorer, locate
ROOT\html\themes in the folder of a running Liferay Portal.
Notice the folders:
1) _unstyled
2) _styled
3) classic
3.1) Liferay Portal packages files in _unstyled directory for a basic skeleton theme and files in _styled directory for basic styling for the skeleton theme.
3.2) The Classic Theme defines most of the elements on the page. By studying its files and folder structures, beginners would be able to understand how a theme is developed.
CASCADING STYLE SHEET
4) Cascading Style Sheet defines the appearance of the elements of the page.
4.1) Open
ROOT\html\themes\classic\main.css in notepad, you will see the following texts:
4.2) Main.css is a CSS file that imports other stylesheets into a page. It keeps list of files in sequential order. Each files contains styling description of the page elements. If the element description exists in more than one file, the succeeding stylesheet file overrides the preceding stylesheet file, e.g custom.css overrides everything on top of it in the list.
4.2.1) The role of the CSS files are as follows:
- base.css - has the basic styling that applies to the entire portal.
- application.css - styling related elements used in applications (tabs, pickers, ...)
- layout.css - has styling related to layouts.
- dockbar.css - has styling related to the dock bar.
- navigation.css - styles the navigation.
- portlet.css - style the portlet.
- form.css - has styling related to forms.
- extras.css - has styling related to additional elements such as borders and dialogs.
- custom.css - where custom and overriding css should go
5) You can trace stylesheet code using Chrome's Code Inspector.
5.1) Run Chrome and browse the Liferay Portal Front Page.
5.2) Right-Click on any empty area on the page and choose menu item Inspect Element.
5.3) Chrome splits the window into two parts; the top part is the web page and the bottom part is the Code Inspector panel.
5.4) Notice the login link on top right of the page. We will inspect this element.
5.5) Trace the stylesheet code for the Sign In element.
5.5.1) Scroll down the html codes in the code inspector. While the mouse pointer hovers the codes, corresponding elements on the page will be highlighted. Keep scrolling until you notice the Sign In element is highlighted.
5.5.2) The html code defining the Sign In element is actually:
<a href="/c/portal/login?p_l_id=10963" id="sign-in" rel="nofollow">Sign In</a>
5.5.3) Click on the code segment (as shown below). The matching stylesheet is displayed in the adjacent panel under the section
Matched CSS Rules. These codes are stored in the file custom.css.
5.5.4) Click on the file name custom.css (as shown in orange rectangle). The file is opened in the
Sources tab.
6) Chrome allows you to change the CSS code and subsequently render the changes in the browser window. The changes is just temporary unless you save the stylesheet file.
6.1) Highlight the text
50% as shown in the screenshot.
At the moment the Sign In element is displayed as follows:
6.2) Change the value to 0%, and you will notice the key logo moves up.
6.3) Change the value to 150%, and you will notice the key logo moves down
6.4) You can even change the logo to something else by modifying the
background: url element.
e.g change the file name to lock.png .
6.5) By doing this, a beginner would be able to understand how the stylesheet codes affect the page elements display and gradually learn to modify the code by observing the changes via Chrome Code Inspector facility.
6.6) Modifying the codes directly is actually a
'hacking' approach. While it is easy to be carried out, this is not recommended by Liferay creator. A recommended approach is to create a Theme Plugin and deploy it in a proper way. This ensures the theme to be supported by future Liferay versions.
IMAGES
7) Using Windows Explorer, go to
ROOT\html\themes\classic\images.
7.1) All of the files and folders contains images that are used for the portal as icons, backgrounds, labels etc.
7.2) You may not need to change all of them. Select the one you feel necessary only.
JAVASCRIPT
8) Using Windows Explorer, go to
ROOT\html\themes\classic\js.
8.1) Open main.js. In a quick glance, the codes suggest that some dynamic actions will be performed based on the parameter values when a page or portlet is loaded.
8.2) Using JavaScript at dynamic effect to the portal page. Advanced user may use this to enhance the portal.
TEMPLATES
9) Using Windows Explorer, go to
ROOT\html\themes\classic\templates.
9.1) *.vm is a
Velocity file. Velocity is a popular template engine for Java web applications.
All Liferay themes make use of this Velocity template engine. A template engine is software that is designed to process web templates (in this case files with a vm extension) to produce output web documents. These web documents are mostly HTML or XML files, but it can also be complete different things like CSS or JS files.
Using a template engine also separates business logic from presentation, which gives the maintainability of your source code a boost. This is also known as the MVC software architecture. In the controller section of your web application you can set variables which you can use to display or do other things in the view section of your web application.
- init.vm - This file load the variables used by other templates.
- init_custom.vm - This file is used to override or store new variables.
- navigation.vm - this file contains the navigation HTML
- portal_normal.vm - this file is the main "index" file that contains the base HTML
- portal_popup.vm - this file contains the box around all portlets.
