How can we modify the layouts

[vikash kumar chaurasia, modifié il y a 14 années.]

Hi,

Can we modify the existing default Layout 2 columns (30/70) in the Liferay Portal so that it become 15/85 or 20/80.

My requirement is that the portlet at the left size (Search Portlet) should take lesser size as compared to the portlet at the right side (Result Portlet).

Please suggest. How can we modify the layouts?

[Nidhi Singh, modifié il y a 14 années.]

Hi,

You can modifing existing layout or create new layout also.

for creating layout, you have to use liferay plugin sdk environment.

Thanks
Nidhi Singh

[Somya K, modifié il y a 14 années.]

Hi,

I would suggest it will be better if you can create your new layout and style. so that you can use the liferay existing layout as well as your new layout to. because modifing in liferay layout style will affect the liferay layout too.

[Bavithra Rajendran, modifié il y a 14 années.]

Hi !

You can edit the default Layout 2 columns (30/70) or you can create your new layout. If you want your layout to be (20/80), add the following code in your layout .tpl file and deploy it.

<div class="columns-2" id="content-wrapper">
<table class="lfr-grid" id="layout-grid">
<tr>
<td class="lfr-column twenty" id="column-1" valign="top">
$processor.processColumn("column-1")
</td>
<td class="lfr-column eighty" id="column-2" valign="top">
$processor.processColumn("column-2")
</td>
</tr>
</table>
</div>

Thanks,
Bavithra Rajendran

[vikash kumar chaurasia, modifié il y a 14 années.]

Hi Bavithra,

Thanks for reply.

Will this work with the existing layout on the portal? I searched the portal folder for layout .tpl file, but could not get it? Please describe in detail.

Thanks

[Naven Pathange, modifié il y a 14 années.]

To create a layout design, we need to create 3 files as listed below. (E.g. creating “2 Column 20/80”).
- 2_column_2080.png
Png image file to show the image as thumbnail for selection of the layout.
- 2_column_2080.tpl
This is template design page.
- 2_column_2080.wap.tpl
This is template design for wap.

• The CSS file which is used for the layout creation is present the themes.
• The corresponding CSS file used for the layout design is “layout.css”. Following is the location of the CSS file, “ext/ext-web/docroot/html/themes/pcmp/css”.
• Once we create the layout we need to specify the Layout in “liferay-layout-templates.xml” file. Following is the location of the xml file, “ext \ext-web\docroot\WEB-INF\”.

Code for 2_column_2080.tpl

<div class="columns-2" id="content-wrapper">
<table class="lfr-grid" id="layout-grid">
<tr>
<td class="lfr-column 2column20" valign="top">
$processor.processColumn("column-1")
</td>
<td class="lfr-column 2column80" valign="top">
$processor.processColumn("column-2")
</td>
</tr>
</table>
</div>

code for css inside theme layout.css

.lfr-column.2column20{
width: 20%;
}

.lfr-column.2column80{
width: 80%;
}

[Bavithra Rajendran, modifié il y a 14 années.]

Hi !

Vikash kumar chaurasia

Will this work with the existing layout on the portal? I searched the portal folder for layout .tpl file, but could not get it?

Yes. It will work for existing layouts too. You can find the files under liferay-portal-[version]\tomcat-[version]\webapps\ROOT\layouttpl\custom. You can modify the tpl file for the required layout and restart the server.

Thanks,
Bavithra Rajendran

[Hussain Ahmed, modifié il y a 13 années.]

Hi,

If you are working on liferay6.0.5 layout then you should try something like below in the custom_layout.tpl file instead of specifying

<td class="lfr-column twenty" id="column-1" valign="top">

You should give,

<td class="aui-w20 portlet-column portlet-column-first" id="column-1">

Thanks,

Hussain Ahmed.