How to edit column/Widget width on the homepage?
 

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?

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.

Thanks Lynne,

I did give this a try, but most likely not in the appropriate manner :rolleyes:
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?

I actually have a 20/60/20 grid:

Layout Manger HTML:
Default Template HTML:

Works perfect on my site, thanks Lynne!

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.

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

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.

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

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

Create a Grid and the on the Grid Manager page select Flatten Grid next to the Grid. Then, select Edit.

I am pretty sure this is covered in the CMS documentation. Have you taken a look at it?

it is a post for oct 2011,sorry for post in it
but i can not find or i dont know where i must add code that Lynne said under
Layout Manger HTML:

When you flatten your grid and then click to edit it, you will add the code on that page.