How to edit column/Widget width on the homepage?

[Duncan Idaha]

Can someone help me (inexperienced at coding, experienced at VB 3) on this?

Currently, I use the 3 column (25,50,25) layout for the homepage, since I want two rows of Widgets, one on either side of the articles.

I would prefer the article wider, and the Widgets thinner. Something like 20%, 60%, 20%. Must I try to adjust the 3 column grid for that or try to edit the Widgets? And how can I do either one?

[Lynne]

You need to create a new grid that has the dimensions you want, then create a layout from that grid and then assign the new layout to your section.

[Duncan Idaha]

Thanks Lynne,

I did give this a try, but most likely not in the appropriate manner
There is the option to "flatten" a grid, which shows HTML coding and tells you that you are working directly in HTML instead of the wizard.

The layout manager UI HTML than shows:
<div id="doc3">
<div id="bd">
<div class="yui-g">
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-tvb-l50 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>

The default template HTML shows:

<div id="doc3">
<div id="bd">
<div class="yui-g">
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-tvb-l50 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>

Since I am not familiar with coding, I can hardly make head or tail from this. (Sorry, but folks like me do exist) However, it looked to me that the "l25" and l50" refer to the columns. So, took the gamble and changed those to "l20" and " l20" The result however was one broad column and one smaller one.

I have reverted it to original which brought back the original lay out (pfew..) Glanced at the other 3 column grids, but that was not much help. What I don't understand is that some 3 column grids only have one "instruction" and the above one refers to three widget lists, whilst one of them is intended for articles. How does this work and what am I doing wrong here?

[Lynne]

I actually have a 20/60/20 grid:

Layout Manger HTML:

<style type="text/css">
.yui-tvb-l1 .yui-b {width: 20%;}
.yui-tvb-l1 #yui-main .yui-b {
margin-left:20%;
padding-left: 10px;
}
</style>
<div id="doc3" class="yui-tvb-l1">
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b">
                <div class="yui-ge">
                    <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>

Default Template HTML:

<style type="text/css">
.yui-tvb-l1 .yui-b {width: 20%;}
.yui-tvb-l1 #yui-main .yui-b {
margin-left:20%;
padding-left: 10px;
}
</style>

<div id="doc3" class="yui-tvb-l1">
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b">
                <div class="yui-ge">
                    <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>

[Duncan Idaha]

Works perfect on my site, thanks Lynne!

[AcesGaming]

I'm trying to get this done on my website yet I'm not sure what I need to edit. Where do I find this template so I can paste this code in?

Thanks in advance.

[Lynne]

We are talking about the grids and stuff to enter into a flatten grid page.

[AcesGaming]

I need to have my homepage in a 20/60/20 fashion, how do I create a grid that allows me to have these measurements. When I go to try and create a new grid, I'm only allowed certain set options in the drop menu. The closest being 25/50/25.

[Lynne]

Create a grid close to what you want and flatten it. Then edit the grid and modify it how you want.

[AcesGaming]

I would be very thankful if you can advise on how to flatten and modify the grid coordinates.