Foren
Creating Custom Layout
pawan chauhan, geändert vor 11 Jahren.
Creating Custom Layout
Junior Member Beiträge: 75 Beitrittsdatum: 08.10.12 Neueste Beiträge
Hi all,
I was trying to create a new layout for my page.
Thanks to the excellent documentation of liferay and few posts i could make the layout and deploy it.
but now i am facing a strange problem.
I initially created the MyCustomLayout.tpl as
which was working fine for a 4 column kind of layout .
but now for the second layer of portlets i wanted a 30 40 30 kind of layout so i modified the .tpl file as
I redeployed the layout.
but no changes were to be seen.
even the second row follows the same 4 column kind of structure.
what am i doing wrong.
please advise.
Thanks in advance
Regards,
Pawan Chauhan
I was trying to create a new layout for my page.
Thanks to the excellent documentation of liferay and few posts i could make the layout and deploy it.
but now i am facing a strange problem.
I initially created the MyCustomLayout.tpl as
<div id="main-content" role="main">
<div class="portlet-layout">
<div class="aui-w25 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1")
</div>
<div class="aui-w25 portlet-column" id="column-2">
$processor.processColumn("column-2")
</div>
<div class="aui-w25 portlet-column" id="column-3">
$processor.processColumn("column-3")
</div>
<div class="aui-w25 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4")
</div>
</div>
</div>
which was working fine for a 4 column kind of layout .
but now for the second layer of portlets i wanted a 30 40 30 kind of layout so i modified the .tpl file as
<div id="main-content" role="main">
<div class="portlet-layout">
<div class="aui-w25 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w25 portlet-column" id="column-2">
$processor.processColumn("column-2","portlet-column-content")
</div>
<div class="aui-w25 portlet-column" id="column-3">
$processor.processColumn("column-3","portlet-column-content")
</div>
<div class="aui-w25 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4","portlet-column-content portlet-column-content-last")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w30 portlet-column portlet-column-first" id="column-5">
$processor.processColumn("column-5","portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w40 portlet-column" id="column-6">
$processor.processColumn("column-6","portlet-column-content")
</div>
<div class="aui-w30 portlet-column portlet-column-last" id="column-7">
$processor.processColumn("column-7","portlet-column-content portlet-column-content-last")
</div>
</div>
</div>
I redeployed the layout.
but no changes were to be seen.
even the second row follows the same 4 column kind of structure.
what am i doing wrong.
please advise.
Thanks in advance
Regards,
Pawan Chauhan
Vaibhav Mittal, geändert vor 11 Jahren.
RE: Creating Custom Layout
Junior Member Beiträge: 54 Beitrittsdatum: 16.07.12 Neueste Beiträge
I guess you need to add class in your top div tag. E.g. if your layoutname is abc then your class name should be abc-layout.
In your case it should be class="MyCustomLayout-layout"
Try with <div class="MyCustomLayout-layout" id="main-content" role="main">. This may work in your case.
In your case it should be class="MyCustomLayout-layout"
Try with <div class="MyCustomLayout-layout" id="main-content" role="main">. This may work in your case.