Foros de discusión

Creating Custom Layout

pawan chauhan, modificado hace 11 años.

Creating Custom Layout

Junior Member Mensajes: 75 Fecha de incorporación: 8/10/12 Mensajes recientes
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

<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, modificado hace 11 años.

RE: Creating Custom Layout

Junior Member Mensajes: 54 Fecha de incorporación: 16/07/12 Mensajes recientes
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.