layout allowing 2 widgits horizontally?

[sneezyyzeens]

Is there an easy way to do this (2 widgits side-by-side) using the VB4 grid/layout system?



I don't want to use a 2 column grid (unless there's a way to do grids inside of grids?), because after those 2 widgits I want just the normal articles listed vertically below.

Right now I'm planning on using a single php widget that will fake the look of two separate ones, but this seems like an option that would be common enough that maybe someone else has come up with an easy way to do it?

Thanks for any help

[Lynne]

Flatten the grid and then modify it to do what you want.

[sneezyyzeens]

I finally had some time to figure this out, and thought I'd share in case there is someone as lost with this stuff as I am.

I figured out what "flatten the grid" meant.

Add a new grid, name it whatever you want, and pick whichever of the options is closest to what you are actually wanting. When your new grid is listed, the default action is "edit" which only gives you the options that are available when you create a grid. Instead, change the dropdown to "flatten grid"

You will then be presented with a YUI CSS template. I'm sure vBulletin gives you the information about this somewhere, but after some google searching, I found that YUI is a Yahoo standardized library which includes these template codes. The YUI information can be found at http://developer.yahoo.com/yui/

In particular, I found a basic YUI grid builder here: http://developer.yahoo.com/yui/grids/builder/ and, possibly more importantly, a cheat sheet that lets you know what things like "class=yui-b", "class="yui-t5", etc mean: http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

My original post just asked about the "main" part of my layout. I actually wanted a nav section to the left (25%), main (75%) and a 240pix sidebar to the right. Inside the main part I wanted the option of 2 widget above the primary content:



Each of those blocks can be stuffed with whatever widgets you want to throw in there. It's a 100% width, 2 column(25/75) layout with 240 px sidebar, with a nested grid of one row of 2 blocks with a lower 1 column row that will have my articles.

Here's the grid code I used to achieve that layout.

<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">
<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 class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</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>

[daveaite]

Thanks for the info mate, I learned a bit here.

--------------- Added [DATE]1289199768[/DATE] at [TIME]1289199768[/TIME] ---------------

The builder is actually quite powerful. Better than the vbulletin grid builder.

[TheLastSuperman]

Originally Posted by sneezyyzeens

I finally had some time to figure this out, and thought I'd share in case there is someone as lost with this stuff as I am.

I figured out what "flatten the grid" meant.

Add a new grid, name it whatever you want, and pick whichever of the options is closest to what you are actually wanting. When your new grid is listed, the default action is "edit" which only gives you the options that are available when you create a grid. Instead, change the dropdown to "flatten grid"

You will then be presented with a YUI CSS template. I'm sure vBulletin gives you the information about this somewhere, but after some google searching, I found that YUI is a Yahoo standardized library which includes these template codes. The YUI information can be found at http://developer.yahoo.com/yui/

In particular, I found a basic YUI grid builder here: http://developer.yahoo.com/yui/grids/builder/ and, possibly more importantly, a cheat sheet that lets you know what things like "class=yui-b", "class="yui-t5", etc mean: http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

My original post just asked about the "main" part of my layout. I actually wanted a nav section to the left (25%), main (75%) and a 240pix sidebar to the right. Inside the main part I wanted the option of 2 widget above the primary content:



Each of those blocks can be stuffed with whatever widgets you want to throw in there. It's a 100% width, 2 column(25/75) layout with 240 px sidebar, with a nested grid of one row of 2 blocks with a lower 1 column row that will have my articles.

Here's the grid code I used to achieve that layout.

<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">
<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 class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</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 should post this up as an article .

https://vborg.vbsupport.ru/forumdisplay.php?f=184

[gokhansancar]

Can you explain this little bit more detailed
i am trying to do something like that but i can't
can you help me please


--------------- Added [DATE]1289264016[/DATE] at [TIME]1289264016[/TIME] ---------------

ok i figured out and came up something like that

PHP Code:

<div id="doc3" class="yui-t7">
<div id="bd" role="main">
    <div class="yui-g">
    <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">
        <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 class="yui-g">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
    </div>

    </div> 


if u like it you can use it