Help With Grid

[pwhitehead]

Hello... I kinda get how to make a custom grid. Going to yahoo's coding and working with their UI on building a grid doesnt help because it wont work with vb's framework. I see lots of class titles and references which I have no idea what they mean. Is there a list or a guide explaining what terms mean what?

<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 250px;}
.col_3 {width: 240px; float: right; margin-left: -250px; }
</style>
<div id="doc3" class="yui-tvb-l3">
<div class="two_columns">
<div class="col_2">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="col_3">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div class="col_1">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>

Good example is in the quotes. How am i suppose to know what the different id's are like "widgetlist?" Yes its pretty obvious what it is, but there are other id's and classes that are hard to figure out. Any help would greatly be appreciated. If i were to make a box that i can put 3 smaller boxes inside of it and a larger box below that so my main news can go there, how would this be implemented? What are the class and different ID's that need to be used? Making the grid isnt the hard part, its knowing the classes and ID's to put.

[Lynne]

widget_list is just a CSS class - it styles the grid. So is list_no_decoration. Try removing it and see what happens. ids are just *unique* identifiers (make sure they are unique!).

[pwhitehead]

Are there tutorials specifically for building grids for vbulletin? Um.. I'm really confused.. Like under the header if i wanted a main container, with 3 small containers side by side. Under that a main container just for the news. How would this be done? And im just coming up with this out of plain randomness... I'm trying to grasp the concept of building my own. Are regular css classes used that you would ordinarily see in Dreamweaver, like sidebar, so on and so forth?

[Lynne]

I have seen no tutorials. It's all just CSS really. You don't need to use the yahoo guis, you can just write your own CSS for the divs.

[pwhitehead]

Can you break a basic grid down and explain to me the different parts of it and what they mean?

<div id="doc3" class="yui-tvb-l3">
<div class="two_columns">
<div class="col_2">
<ul id="widgetlist_column2">$column[2]</ul>
</div>
<div class="col_3">
<ul id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div class="col_1">
<ul id="widgetlist_column1">$column[1]</ul>
</div>
</div>

what do the widgetlists_column1 lines mean, with the string $collumn[1]. there is really no tutorials around the vb forums explaining and breaking this all down.

[Lynne]

As I already said the widgetlists_column1 is the unique id. In this case, they have it correspond to the column number. So, if you have a $column[4], use the id widgetlists_column4.

In the modifications forum is a mod thread that has a whole bunch of downloadable grids. You may want to take a look at those as they may help you understand it a bit more.

[tbworld]

Thanks Lynne for the information

[pwhitehead]

are the column strings a vbulletin string so that forum identifies it? other than that, its just a bunch of div boxes inside of div boxes? So each div u make u have to identify it with a $column[#]? There should really be tutorials on this, or more explained in the vb manual.

[Lynne]

Every column you have where you want to add a module/widget must be identified as $column[x] or you will not see them when you try to use the Layout Manager to add modules/widgets.

[pwhitehead]

still cant believe there's no tutorials out there explaining how a grid is coded. its nice to get grids made by others, but you cant understand unless you understand the coding. is there any grids out there thats commented and explained how it was made? can you make a tutorial lynne?