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 don’t 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