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...ith-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]

Originally Posted by Lynne

Doing a search on 3 column layouts with a fluid center, I get this - http://murphygoestowork.blogspot.com...ith-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]

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

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.

[Lynne]

Yes, you would insert it into both areas.