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?

[ozzy47]

Perhaps this will help.
http://www.vbulletin.com/vbcms/content.php/562-Using-CMS-Grids-Layout

[pwhitehead]

This tutorial i understand. This does not explain the coding that goes into it.

[ozzy47]

I would suggest then, downloading a grid then, and study the code. There is no tutorial on how to code, you have to learn it. :)

[pwhitehead]

Ok.. How is one suppose to study the code if we dont know what each line of code is?

<div id="doc3">
<div id="bd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1" style="width:100%">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2" style="width:300px">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3" style="width:300px">$column[3]</ul>
</div>
</div>
</div>
</div>

what is a yui-gb class? what is yui-u first yui-panel referenced to?

[ozzy47]

Those are classes that call to the css

[pwhitehead]

are they classes that are made up by the creator or are they classes that identify a certain thing to each cell? This is what needs to be explained dude..

--------------- Added 1384695900 at 1384695900 ---------------

are the classes specifically used to make the grid, or is it a class the coder makes up?

[ozzy47]

You really need to learn to code with html, css

http://www.codecademy.com/tracks/web

http://www.w3schools.com/

[pwhitehead]

i understand how to code html and css. what i wana know is, can any class be used in those spots or does it have to be yui-gb as the class, the same with yui-u yui-panel? Can any classes be used in these spots. That and where is the reference in the manuals about the $column strings that have to be used? Everything else is explained in the manuals except this.

--------------- Added 1384697531 at 1384697531 ---------------

well? your just gonna give up on me? is it all just basic css and html and you use an id $ for the columns? this needs to be explained man.

[Lynne]

All the yui stuff is from here - http://developer.yahoo.com/yui/grids/

[pwhitehead]

but are the yui names needed for the classes? or can i use my own class names for each one of the tables? you guys keep beating around the bush and turn away from explaining.

[tbworld]

but are the yui names needed for the classes? or can i use my own class names for each one of the tables? you guys keep beating around the bush and turn away from explaining.

First, "be nice", no one here has to answer your questions, most/all of us volunteer are time to help others in this community, think of us as enthusiasts. This is "not" vbulletin support.

Second, @Lynne answered your question -- in my opinion -- correctly, and referred you to the YUI manual.

Third, sometimes we do not know the answer, because we haven't worked on that section of the code ourselves. So we then try to steer you in the right direction, like supporting documents.

You will get the most help here when we can clearly understand your programming goal and we can follow along in your project, otherwise we have no real vested interest in what you are doing. References to your code should be provided for convenience. If it's vbulletin code, you cannot post it, but you can refer to a file/line# where we can follow along.

I hope this will help you in understanding the community here. It is all good. :)

[Lynne]

I already told you to just use plain old CSS if you want. The yui stuff is already defined and so it's easy to use. But, if you don't want to use it, just write your own. They are classes - CSS. So, you can write it or rewrite it however you want. If you don't understand what CSS is, then you need to read up on understand Cascading Style Sheets.

[pwhitehead]

With all due respect, I'm not beating up on anybody. It's a shame there is no references in the vbulletin manual or tutorials around on how to build a grid and how to code them as normal CSS. The only tutorial out there is how to flatten a grid and add custom code. Every time I've posted a question or have see questions posted by other members they are always left with a link with no explanation as if no one wants to help. I'm not asking for you guys to code my site, but better answers or more explanation is more useful. It's easy for someone to just post a link referencing to learn html or CSS then actually giving help so the person doesn't have to make the same threads and asking the same question over and over again. No flaming or trying to be rude here, just looking for help.

[Lynne]

Basically, if you don't want to use any of the grids supplied in the Grid Manager, then you need to create a new grid and flatten it. Once it's flattened, you need to use CSS to create your own grid. If you want to use the yui classes, then those are available, but I've always just figured it's easier to just use your own CSS to make it look how you want.