vb.org Archive - CMS: 3 Blocks side by side?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - CMS: 3 Blocks side by side? (https://vborg.vbsupport.ru/showthread.php?t=262133)

CMS: 3 Blocks side by side?

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!

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:

HTML Code:

<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>

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

Code:

<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

Code:

<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>

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

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

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?

Code:

<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!

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.

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 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

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

Quote:

Originally Posted by Lynne (Post 2186028)

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!

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (1)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01115 seconds Memory Usage 1,755KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_code_printable (1)bbcode_html_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: