About custom grids

[K4GAP]

Why is it such a pain to come up with a custom grid? I am simply trying to come up with a 240px, 100%, 240px grid and have tried all the suggestions. The problem is I'm not familiar enough with css to alter a flattened grid.

In searching the forums both here and on vbulletin.com I have noticed there are a bunch of posts about members wanting to know how to customize grids. The most suggested method is to create a 25%, 75%, 240 grid and then flatten it so that the html can be altered to achieve the desired affect. Been there, done that! My problem is after flattening the grid, I don't know enough to alter it.

I would much rather learn to do it myself but so far I'm not making any headway. So, I'm resorting to asking someone to make such a layout (240px, 100%, 240px) for me and then by examining the code I can see how it was done.

Is this to much to ask?

Thanks for any help I can get.

[Lynne]

Doing a search on 3 column layouts with a fluid center, I get this - http://murphygoestowork.blogspot.com/2008/02/three-column-css-layout-with-fluid.html

Which when typed out for a grid, is something like this:
<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>

[K4GAP]

Doing a search on 3 column layouts with a fluid center, I get this - http://murphygoestowork.blogspot.com/2008/02/three-column-css-layout-with-fluid.html

Which when typed out for a grid, is something like this:
<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>

How would I implement that into .....

<?xml version="1.0" encoding="UTF-8"?>

<grids>
<grid name="Two Columns + Sidebar (25%, 75%, 240px)" auxheader="0" auxfooter="1" addcolumn="1" addcolumnsnap="1" addcolumnsize="3" columns="8"><![CDATA[<div id="doc3" class="yui-tvb-r3">
<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-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div id="ft">
<div class="yui-u yui-footer">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
]]></grid>
</grids>

[Lynne]

Create a grid, flatten it, insert that code instead.

[K4GAP]

Thank you, worked perfectly.

[Moncha]

Lynn, did exactly what you said and I stll get no 240px, 100%, 240px grid. It disappears on refresh.

I'm using 4.1.11... Why is it so hard to great static side columns?

[Lynne]

Disappears? What do you mean? Can we get a link?

[Moncha]

Sorry, copy and paste inserted a whitespace before the last "}" in the css. I did finally get it to work using this;

<style type="text/css">
.two_columns {float: left;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 255px;}
.col_3 {width: 240px; float: right; margin-left: -250px;}
</style>

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

[Crotan]

Sorry, copy and paste inserted a whitespace before the last "}" in the css. I did finally get it to work using this;

<style type="text/css">
.two_columns {float: left;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 255px;}
.col_3 {width: 240px; float: right; margin-left: -250px;}
</style>

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


I wasn't able to get this working. When you flatten the newly created grid do you erase everything in both Layout Manager UI HTML, and Default Template HTML, and use the above instead? Because doing so, when then creating a subsequent layout, I don't get three columns to place widgets into. :confused:

[Lynne]

Yes, you would insert it into both areas.

[Crotan]

Hmm, well I'm not sure what I'm doing wrong. I create the grid, flatten, overwrite with code used by Moncha. Create a layout, place widgets into it.

But any page created using that layout will look like it has no layout at all. Despite clearly having widgets and the primary content boxed clearly shown. :confused:

Any idea where I went wrong?

[Lynne]

Can you try it with a totally default stye and see if it shows then?

Create a new style with no parent:

Styles & Templates > Style Manager > Add New Style
Parent Style: No Parent Style
Title: Default vBulletin
Allow User Selection: Yes
Save

Select that style and go to the section.

[Crotan]

Can you try it with a totally default stye and see if it shows then?

Create a new style with no parent:

Styles & Templates > Style Manager > Add New Style
Parent Style: No Parent Style
Title: Default vBulletin
Allow User Selection: Yes
Save

Select that style and go to the section.

Ok that's interesting, maybe it was a cache issue? however, what I'm seeing is three fixed columns, where the center is not fluid to the page.

[Lynne]

Can we get a link to see the issue using the default style?

[Crotan]

Can we get a link to see the issue using the default style?

Yes, I can provide that. I'm finding that the middle "fluid" column is fluid in the way it will minimize to the smallest item contained in the column.

I'm trying to have a middle fluid column that will maximize it's space between the two outer fixed columns.

Please see http://flotgaming.net/forums/content.php/78-Social-Networking?styleid=70

I've attached a screenshot of what the page will look like maximized on my 1080 wide screen. The middle column is only fluid to an extent.

[Lynne]

Try adding "width: 100%;" to .two_columns

[Crotan]

Try adding "width: 100%;" to .two_columns

No go on that. Tentatively at least, I'll see what it makes the actual page look like in a few. In the layout view, it will force the center column all the way over the right column, and force it under.

Check out the screenshot

[Crotan]

I'm very curious what others are using for this, since I've yet to get it to work. The closest I've gotten so far is

<style type="text/css">
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
background:#ffd8b7; /* Left column background colour */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
background:#fff; /* Centre column background colour */
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
background:#ff9; /* Right column background colour */
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#col1 {
width:100%;
overflow:hidden;
}
#col2 {
float:left;
width:170px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#col3 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
}
</style>

<div id="colmask">
<div id="colmid">
<div id="colright">
<div id="col1wrap">
<div id="col1pad">
<div id="col1">
<!-- Column 1 start -->
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
<!-- Column 1 end -->
</div>
</div>
</div>
<div id="col2">
<!-- Column 2 start -->
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
<!-- Column 2 end -->
</div>
<div id="col3">
<!-- Column 3 start -->
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>

Which will present me with what I want in the layout manager, a fixed fluid fixed layout! However useless because I can only place widgets into one column!. :mad:

[Crotan]

ok done and done! This shit is nuts, why wasn't this included in the default grids is beyond me, but let me tell you it better be in vbulletin 5!

just needed to add the <div id="doc3"> tags

Working code for me. No idea how those other guys got what has been posted prior working
<style type="text/css">
#colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
#colmid {
float:left;
width:200%;
position:relative;
left:200px;
}
#colright {
float:left;
width:100%;
position:relative;
left:50%;
margin-left:-400px;
}
#col1wrap {
float:right;
width:50%;
position:relative;
right:100%;
}
#col1pad {
margin:0 15px 0 415px;
overflow:hidden;
}
#col1 {
width:100%;
overflow:hidden;
}
#col2 {
float:left;
width:170px;
position:relative;
margin-left:-50%;
left:215px;
overflow:hidden;
}
#col3 {
float:left;
width:170px;
position:relative;
left:15px;
overflow:hidden;
}
</style>

<div id="doc3">
<div id="colmask">
<div id="colmid">
<div id="colright">
<div id="col1wrap">
<div id="col1pad">
<div id="col1">
<!-- Column 1 start -->
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
<!-- Column 1 end -->
</div>
</div>
</div>
<div id="col2">
<!-- Column 2 start -->
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
<!-- Column 2 end -->
</div>
<div id="col3">
<!-- Column 3 start -->
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
</div>

[ar15dcm]

I followed the direction explicitly. See the attached for see how the left column and center area stretch. Neither Crotan or Lynns code are working for me.

Thanks,

[kylek]

I hate bumping up old posts but still cant get Lynns or Crotans code to work. Just need simple directions for a 240 px sidebar - 100 % - 240 px sidebar.

[Lynne]

I'd suggest you start your own thread about this and post up what your grid code looks like and then a link to your section using it so we may see what the problem is.