CMS: 3 Blocks side by side?

[reteep]

I just saw the 3 blocks layout here on http://www.mmo-champion.com/content/.

Recent Blue Posts - Recent Forum Posts - Medium Rectangle Banner

Does anyone know how they created that? I tried moving 3 blocks in the CMS Layout Manager to show up in one line, but it doesn't work. It can just be set underneath each other.

Is it some specific mod or hand coded?

Thanks!

[Lynne]

Looks like they created a grid with a Secondary Header and the bottom is 1 column at 100%. Then flatten the grid. Then edit to put three divs, each 33%, into the Secondary Header.

Should end up with something like:
<div id="doc3">
<div id="hd" class="yui-gb">
<div class="yui-u first">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
<div id="bd">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
</div>

[reteep]

Hi Lynne,

thanks a lot for the direction! Following the code you posted is just generating one column. I now created a 33/33/33 grid to use it as a model and I'm almost there, but I can't figure out why this grid is showing the 3 blocks in the sidebar instead of the main site column. Could you give me a hint?

Grid was created as
1 Column with Header + 300px Sidebar.

Layout

<div id="doc3" class="yui-tvb-r4">
<div id="hd">
<div class="yui-b">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>


Template

<div id="doc3" class="yui-tvb-r4">
<div id="hd">
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

[Lynne]

You need to use yui-gb in the template, not yui-g.

http://developer.yahoo.com/yui/examples/grids/grids-gb.html

[reteep]

Thanks for the reference, that helped a lot.

I'm actually done, it looks just like it should in the Grid and Layout Manager.

The only problem left now is, when I put it live on the site, it doesn't look like in the Layout Manager. Every Widget is taking up the full width and shows up underneath each other, instead of being in one line. I used "Latest Articles", "Latests Posts" and a custom one.

I attached the grid, maybe you got an idea?


<div id="doc3">
<div id="hd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>


PS: Please let me know if I can donate somehow, appreciate your help!

[Lynne]

Can we get a link?

I used the grid I posted in post 2 and it worked fine. I tried yours, and the only problem I have is with your sidebar which is showing under the article on my section.

[reteep]

You're right, the Sidebar doesn't work yet. I attached an image on how my current Layout looks like. So I got the 3 Widgets on the top.

However, on the site they are underneath each other. This (http://www.mynintendo.de) is the main site, I just mirrored it and put a testsite here with the active layout: http://pre.mynintendo.de/content.php?r=1-news

[Lynne]

You have "yui-bg" instead of "yui-gb" That will break things. :)

[reteep]

You have "yui-bg" instead of "yui-gb" That will break things. :)

.. ahhh, the small things.. Thanks a lot! It works! After I adapted the widgets it can go live.

Thanks a lot for your help Lynne!