vb.org Archive

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)

reteep 04-17-2011 10:37 AM

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!

Lynne 04-17-2011 04:05 PM

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>


reteep 04-17-2011 04:41 PM

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>


Lynne 04-17-2011 06:16 PM

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

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

reteep 04-18-2011 08:21 AM

1 Attachment(s)
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!

Lynne 04-18-2011 03:19 PM

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 04-18-2011 04:37 PM

1 Attachment(s)
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

Lynne 04-18-2011 05:13 PM

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

reteep 04-19-2011 07:17 AM

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!


All times are GMT. The time now is 09:18 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01165 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