Professional Documents
Culture Documents
Some themes that are more graphically intensive also have a top,
bottom, and left and right sides.
Identify the major components
Identify the major components
Identify the major components
Portlets
Step 2: Identify the portlet areas
css_cached.vm:
ext\themes\example.war\html\themes\example\templates\css_cached.vm
.portlet-header-bar-middle
.portlet-header-bar-right
.portlet-header-bar-left
.portlet-corner-ul
.portlet-corner-ur
.portlet-corner-br
.portlet-corner-bl
.portlet-border-top
.portlet-border-left
.portlet-border-right
.portlet-border-bottom
Banner
To build the banner you need to edit:
css_cached.vm:
ext\themes\example.war\html\themes\example\templates\css_cached.vm
.layout-banner-left
.layout-banner-middle
.layout-banner-right
Usually only the middle is required, but if the theme needs to stretch along the
x axis you will need left and right as well.
Top, Bottom, Left, Right
Top and Bottom Decorations
css_cached.vm:
ext\themes\example.war\html\themes\example\templates\css_cached.vm
#layout-top-decoration
#layout-corner-ul
#layout-corner-ur
#layout-bottom-decoration
#layout-corner-bl
#layout-corner-br
#layout-box-left
#layout-box-right
Files to modify:
ext\themes\example.war\html\themes\example\templates\
css_cached.vm (css)
portal_normal.vm (layout)
ext\themes\example.war\WEB-INF
liferay-look-and-feel.xml ($colorScheme)
Content and Layout
Why new layouts?
Variety is good
Not all sites are the same
Sometimes the defaults just dont work for
your needs
How do we do it?
Layouttpl (Layout Template)
4.0.0 makes this process so much easier!
Prepare the layouts folder
In the EXT directory navigate to the layouttpl folder
<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 4.0.0//EN"
"http://www.liferay.com/dtd/liferay-layout-templates_4_0_0.dtd">
<layout-templates>
<custom>
<layout-template id="training" name="training">
<template-path>/html/layouttpl/custom/training.tpl</template-path>
</layout-template>
</custom>
</layout-templates>
What did that do?
Layout-templates is our root element, it tells Liferay that
we are defining new layouts
<?xml version="1.0"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application
2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>sample</display-name>
<listener>
<listener-
class>com.liferay.portal.kernel.servlet.LayoutTemplateContextListener</listener
-class>
</listener>
</web-app>
Preparing the tpl file
In ext\layouttpl\sample.war\html,
create a layouttpl folder:
Inside layouttpl,
create a custom folder:
Inside custom,
create the file training.tpl
ext\layouttpl\sample.war\html\layouttpl\custom\training.tpl
2-3 column layout code
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="45%">$processor.processColumn("column-1")</td>
<td width="10%"> </td>
<td valign="top" width="45%">$processor.processColumn("column-2")</td>
</tr>
</table>
Login: test@liferay.com
Password: test