1.Go to File → New → Liferay Plugin Project. 2.Enterthe Project name and Display name.
3.Choose whichever build type you prefer (Ant or Maven) and select the appropriate Plugins SDK and Liferay runtime.
4.Select Layout Template as your plugin type.
5.Click Finish.
after finishing the project it will have the following structure
projectName-layouttpl/
docroot/
META-INF/
WEB-INF/
liferay-layout-templates.xml
liferay-plugin-package.properties
projectName.png
projectName.tpl
projectName.wap.tpl
build.xml
[project-name].tpl: Generates the HTML structure of the template.
1.[project-name].wap.tpl: Variant template for mobile devices. WAP stands for wireless application protocol.
2.[project-name].png: Thumbnail representation of the template that you see in Liferay Portal from the Page Layout screen. You’ll have to create the thumbnail image, but you can use the default PNG for layout templates as a starting point.
3.liferay-layout-templates.xml: Specifies the name of the layout templates and the location of their TPL and PNG files.
4.liferay-plugin-package.properties: Describes the plugin project to Liferay’s hot deployer.
Default projectName.tpl is empty we have to create the layout using <div>'s
see the example code: 1-2-1 layout provided by the liferay:
<div class="columns-1-2-1" id="main-content" role="main">
#if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
<table class="portlet-layout">
<tr>
<td class="portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="aui-w50 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</td>
<td class="aui-w50 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
#else
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w50 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w50 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
</div>
</div>
#end
</div>
same as above we have to write the code:
important note:
--> The main div must contain the following attributes id="main-content" role="main".
--> $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
The processor.processColumn function takes two arguments.
The first is the CSS column ID and the second is a list of CSS classes.
You always need to pass "portlet-column-content" in the second argument. If the column is the first, last, or only column in a row, you also have to pass both "portlet-column-content" and portlet-column-content-[first|last|only] in the second argument, separated by a space.
1-2-1.wap.tpl for mobile:
<div class="columns-1-2-1" id="main-content" role="main">
#if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
<table class="portlet-layout">
<tr>
<td class="portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="aui-w50 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</td>
<td class="aui-w50 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</td>
</tr>
</table>
<table class="portlet-layout">
<tr>
<td class="portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
</td>
</tr>
</table>
#else
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w50 portlet-column portlet-column-first" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w50 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
</div>
</div>
#end
</div>
If we want to see all liferay provided Layouts, go to the following location in your workspace-->bundles-->tomcat-->webapps-->root-->layouttpl-->custom.