Foren
[SOLVED] is this possible in a layout template?
Sidney Gijzen, geändert vor 13 Jahren.
[SOLVED] is this possible in a layout template?
New Member Beiträge: 4 Beitrittsdatum: 04.03.11 Neueste Beiträge
Hello,
Liferay newbie here . I've been exploring and working with the Liferay for a week now. I received a few layout designs from our designer, and since I've been struggling for a day now, I was wondering if the layout below is possible. If so, could you provide with a few pointers on how to tackle this problem?
Thank you in advance!
Liferay newbie here . I've been exploring and working with the Liferay for a week now. I received a few layout designs from our designer, and since I've been struggling for a day now, I was wondering if the layout below is possible. If so, could you provide with a few pointers on how to tackle this problem?
-----------------------------------
| | |
| | |
| | |
| | |
| | |
----------------------| |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-----------------------------------
Thank you in advance!
Olaf Kock, geändert vor 13 Jahren.
RE: is this possible in a layout template?
Liferay Legend Beiträge: 6403 Beitrittsdatum: 23.09.08 Neueste Beiträge
The short answer is yes, you can. You have to come up with the HTML div-structure that can do this. AFAIK the graphical editor in Liferay-IDE and DeveloperStudio can't do that, but the underlying HTML is quite simple. You need to embed instructions like
$processor.processColumn("column-2", "portlet-column-content")
and maybe some classes. If you're working in Liferay IDE or DevStudio: Start with a template as close as possible to what you want and then continue to change this in the HTML source to mimic the structure that you need.
Sidney Gijzen, geändert vor 13 Jahren.
RE: is this possible in a layout template?
New Member Beiträge: 4 Beitrittsdatum: 04.03.11 Neueste Beiträge
Olaf,
Thank you for your reply. I was indeed a bit confused by the Liferay-IDE, since it constantly was assuming that the columns were next to eachother instead of "columns in columns".
Another thing I perhaps overlooked; how do you define rows in Liferay layouts? Since I assumed that
is only used for columns?
Thank you for your reply. I was indeed a bit confused by the Liferay-IDE, since it constantly was assuming that the columns were next to eachother instead of "columns in columns".
Another thing I perhaps overlooked; how do you define rows in Liferay layouts? Since I assumed that
$processor.processColumn("column-2", "portlet-column-content")
is only used for columns?
Maarten van Heiningen, geändert vor 13 Jahren.
RE: is this possible in a layout template?
Regular Member Beiträge: 174 Beitrittsdatum: 05.02.09 Neueste Beiträge
Hi Sidney,
You can easily do this by making a a layout like this:
You can easily do this by making a a layout like this:
<div class="columns-4" id="main-content" role="main">
<div class="portlet-layout">
<div class="aui-w70 portlet-column portlet-column-first" id="column-left">
<div class="aui-w100 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w30 portlet-column portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content")
</div>
<div class="aui-w70 portlet-column portlet-column-first" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content")
</div>
</div>
<div class="aui-w30 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>
Sidney Gijzen, geändert vor 13 Jahren.
RE: is this possible in a layout template?
New Member Beiträge: 4 Beitrittsdatum: 04.03.11 Neueste Beiträge
Hello Maarten,
Thank you for your suggestion!
You pushed me into the right direction, but unfortunately it doesn't do what I was aiming for. It results in the following picture
Right now, I modified it into this
It adds in the second row, but it still tries to push columns in between the uppers two ones (like in the sketch).
Am I going into the right direction, when using a second portlet-layout in order to achieve the second row of 30/70 columns?
Thank you for your suggestion!
You pushed me into the right direction, but unfortunately it doesn't do what I was aiming for. It results in the following picture
---------------------------------------
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
---------------------------------------
Right now, I modified it into this
<div class="ace_layout_3" id="main-content" role="main">
<div class="portlet-layout">
<div class="aui-w70 portlet-column portlet-column-first" id="column-left">
<div class="aui-w100 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>
<div class="portlet-layout">
<div class="aui-w100 portlet-column portlet-column" id="column-left-inside">
<div class="aui-w30 portlet-column portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content")
</div>
<div class="aui-w70 portlet-column portlet-column-first" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content")
</div>
</div>
</div>
</div>
<div class="aui-w30 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>
It adds in the second row, but it still tries to push columns in between the uppers two ones (like in the sketch).
Am I going into the right direction, when using a second portlet-layout in order to achieve the second row of 30/70 columns?
Maarten van Heiningen, geändert vor 13 Jahren.
RE: is this possible in a layout template?
Regular Member Beiträge: 174 Beitrittsdatum: 05.02.09 Neueste Beiträge
Hi Sidney
You can set the correct width's using css in your theme.
It should be fine then.
Positioning the three columns column-1, column-2 and column-3 by using display: inline-block and maybe a float: left in combination with position relative should work for you.
Maarten
You can set the correct width's using css in your theme.
It should be fine then.
Positioning the three columns column-1, column-2 and column-3 by using display: inline-block and maybe a float: left in combination with position relative should work for you.
Maarten
Sidney Gijzen, geändert vor 13 Jahren.
RE: is this possible in a layout template?
New Member Beiträge: 4 Beitrittsdatum: 04.03.11 Neueste Beiträge
@Olaf: Thanks for the explanation!
@Maarten: Aha! OK, I will fiddle with the CSS. Thanks!
EDIT: I got the template working. Thanks again to Olaf and Maarten!
Maarten's layout example with his CSS clues worked perfectly!
@Maarten: Aha! OK, I will fiddle with the CSS. Thanks!
EDIT: I got the template working. Thanks again to Olaf and Maarten!
Maarten's layout example with his CSS clues worked perfectly!
Oleksandr Kiricheiko, geändert vor 13 Jahren.
RE: is this possible in a layout template?
New Member Beitrag: 1 Beitrittsdatum: 29.03.11 Neueste Beiträge
Can you, please, explain what exactly did you do to make and use your layout?
Write, please, the final code for your layout. It would be very useful for me.
Thanks
Write, please, the final code for your layout. It would be very useful for me.
Thanks
pham tung, geändert vor 11 Jahren.
RE: is this possible in a layout template?
New Member Beiträge: 2 Beitrittsdatum: 18.01.13 Neueste Beiträge
Can you, please, explain what exactly did you do to make and use your layout?
Write, please, the final code for your layout. It would be very useful for me.
Thanks
Write, please, the final code for your layout. It would be very useful for me.
Thanks
Olaf Kock, geändert vor 13 Jahren.
RE: is this possible in a layout template?
Liferay Legend Beiträge: 6403 Beitrittsdatum: 23.09.08 Neueste BeiträgeSidney Gijzen:
I assumed that$processor.processColumn("column-2", "portlet-column-content")
is only used for columns?
"processColumn" is rather a misnomer for processing a "cell" or consecutive area of stacked portlets.