The Arcive of vBulletin Modifications Site.

Blade-uk · #1 11-14-2010, 11:09 PM

From finding different bits of information i managed to make a grid that you can see in action at www.eteknix.com

My code is:

Layout Manager UI HTML

Code:

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

Default Template HTML

Code:

<style type="text/css">
.yui-u {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style><div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

My site is using a 78% width and as you can see from my site (linked above) the side columns are a different width, so i need the first column reduced a bit and the last column expanded a bit.

Before i had the new layout (2 colums within the width of 1) which looks like this:

I was using this code:

Code:

<style type="text/css">
.yui-tvb-l25 {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style>

Any ideas on getting this to look right?

I will quite happily upload this grid once it's sorted for other people to use

Thanks,

Andy

sneezyyzeens · #2 11-14-2010, 11:25 PM

The .yui-t5 code is specifying a 240px sidebar (on the right), and the .yui-gf code is forcing the other columns to be 1/4, 3/4.

You can find a YUI code cheetsheet at http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
and a simple grid builder at http://developer.yahoo.com/yui/grids/builder/

Hope that helps

Blade-uk · #3 11-14-2010, 11:34 PM

Sadly that grid builder doesn't help as you can't tell it to use 2 columns (one each side)

I'm not using a sidebar at all, just columns.

Finding this really hard

Andy

gokhansancar · #4 11-15-2010, 12:05 AM

i was looking the same thing like you are looking for but i couldnt find it,
it would really help if somebody show us to do it without sidebar

Lynne · #5 11-15-2010, 02:07 AM

If you want the right and left columns the same width, why don't you make a grid with No Sidebar and then Columns set to 25/50/25? That makes the left and right columns 25% and then center one 50%? Is that how you want it?

Blade-uk · #6 11-15-2010, 06:58 AM

Quote:

Originally Posted by Lynne

If you want the right and left columns the same width, why don't you make a grid with No Sidebar and then Columns set to 25/50/25? That makes the left and right columns 25% and then center one 50%? Is that how you want it?

Kind of but then there is a 4th column to go within the 3rd column as you can see from the picture.

Andy

Lynne · #7 11-15-2010, 02:43 PM

So add it after you flatten it. Something like:

HTML Code:

<style type="text/css">
.top {width: 100% !important;}
.bottom {clear: both; width: 100% !important;}
</style>

<div id="doc3">
    <div id="bd">
        <div class="yui-g">
            <div class="yui-tvb-l25 first yui-panel">
                <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
            </div>
            <div class="yui-tvb-l50 first yui-panel">
                <div class="yui-g top">
                    <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
                </div>
                <div class="yui-g bottom">
                    <div class="yui-u first">
                        <ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
                    </div>
                    <div class="yui-u">
                        <ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
                    </div>
                </div>
            </div>
            <div class="yui-tvb-l25 first yui-panel">
                <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
            </div>
        </div>
    </div>
</div>

Blade-uk · #8 11-15-2010, 02:50 PM

That didn't work Lynne

Gave me a layout like this (see attachment)

Andy

Blade-uk · #9 11-15-2010, 02:52 PM

My layout works and looks like this:

Using this code:

Layout Manager UI HTML

Code:

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

Default Template HTML

Code:

<style type="text/css">
.yui-u {width: 18%;}
.yui-g {width: 60%;}
</style>
<div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

Only problem is that the side columns are different widths from what i can see when you look at www.eteknix.com

Andy

Lynne · #10 11-15-2010, 05:40 PM

Are you using 4.0.8? This is what it looks like for me:

I put that same code in both boxes for my grid.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06074 seconds Memory Usage 4,771KB Queries Executed 12 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (5)bbcode_code (1)bbcode_html (1)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/functions_amr.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start postbit_attachment pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages: