About custom grids

[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.

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]

Originally Posted by 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.

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]

Originally Posted by Lynne

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...ing?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]

Originally Posted by Lynne

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!.

[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,