Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 09 Nov 2013, 17:42
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
Help With Grid

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.
Reply With Quote
  #2  
Old 09 Nov 2013, 19:32
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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!).
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #3  
Old 09 Nov 2013, 19:44
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
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?
Reply With Quote
  #4  
Old 09 Nov 2013, 19:47
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #5  
Old 09 Nov 2013, 19:54
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
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.
Reply With Quote
  #6  
Old 10 Nov 2013, 00:43
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #7  
Old 10 Nov 2013, 01:38
tbworld tbworld is offline
 
Join Date: Oct 2008
Thanks Lynne for the information
Reply With Quote
  #8  
Old 11 Nov 2013, 01:42
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
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.
Reply With Quote
  #9  
Old 11 Nov 2013, 17:24
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #10  
Old 17 Nov 2013, 13:18
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
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?
Reply With Quote
  #11  
Old 17 Nov 2013, 13:22
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Aug 2009
Real name: Chris
Perhaps this will help.
http://www.vbulletin.com/vbcms/conte...S-Grids-Layout
__________________
You can get access to my 180 mods for vB 3.6 - 4.x at The Admin Zone as well as the professional support you are used to. New vBulletin Spider Definitions, vBulletin Spiders List Hits 1000 Spiders! ​ OzzModz down. Site has had a data breach, checking how the intrusion happened. Change your PW if you use the same one on my site and others.
Reply With Quote
  #12  
Old 17 Nov 2013, 13:30
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
This tutorial i understand. This does not explain the coding that goes into it.
Reply With Quote
  #13  
Old 17 Nov 2013, 13:32
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Aug 2009
Real name: Chris
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.
__________________
You can get access to my 180 mods for vB 3.6 - 4.x at The Admin Zone as well as the professional support you are used to. New vBulletin Spider Definitions, vBulletin Spiders List Hits 1000 Spiders! ​ OzzModz down. Site has had a data breach, checking how the intrusion happened. Change your PW if you use the same one on my site and others.
Reply With Quote
  #14  
Old 17 Nov 2013, 13:36
pwhitehead pwhitehead is offline
 
Join Date: Mar 2010
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?
Reply With Quote
  #15  
Old 17 Nov 2013, 13:38
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Aug 2009
Real name: Chris
Those are classes that call to the css
__________________
You can get access to my 180 mods for vB 3.6 - 4.x at The Admin Zone as well as the professional support you are used to. New vBulletin Spider Definitions, vBulletin Spiders List Hits 1000 Spiders! ​ OzzModz down. Site has had a data breach, checking how the intrusion happened. Change your PW if you use the same one on my site and others.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 01:51.

Layout Options | Width: Wide Color: