Widget Width

[andreamarucci]

Just a simple question on how to modify the widget width to make it wider. I would like to widen the left "Sections" widget and also the right one so that all the widget I put in will be wider.

Any suggestion on how to do that?

Thanks

--------------- Added 1263243576 at 1263243576 ---------------

Oh men it's possible that noone has had the same problem or am I so dull not to be able to find it?

[Spiritvn]

Hi,

You can modify its width by CSS, edit your templates -> vbcms.css

find .block

then add width: ...px;

But it's just the widget width, not the column width, i'm also finding how to edit the column width :(

[andreamarucci]

Thanks. I'll wait for your find. It seems ridicolous to me that such an important thing is absolutely undocumented...

[Lynne]

I think the widths are hardcoded (use firebug to find the class and then do a Search in Tempates for them and you'll see the 170px is hardcoded).

[andreamarucci]

Ok, maybe I'm completely unable to understand the logic behind this css but, please, can someone tell me where to modify the values to widen the left and right column? I've tried to change some values obtaining just a mess but I'm not proficient in css so maybe I'm looking in the wrong direction...

The template is vbcms_grid_1

<style type="text/css">
#gridl3_container {
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
}

#gridl3_midshift {
float: left;
width: 200%;
position: relative;
left: 170px;
}

#gridl3_rightshift {
float: left;
width: 100%;
position: relative;
left: 50%;
margin-left: -340px;
}

#gridl3_midmask {
float: right;
width: 50%;
position: relative;
right: 100%;
}

#gridl3_midcol {
margin-left: 340px;
width: 100%;
overflow: hidden;
}

#gridl3_leftcol {
float: left;
width: 170px;
position: relative;
margin-left: -50%;
left: 170px;
overflow: hidden;
}

#gridl3_rightcol {
float: left;
width: 170px;
position: relative;
left: 0px;
overflow: hidden;
}

#gridl3_content {
margin-right: 340px;
}
</style>

<div id="gridl3_container">
<div id="gridl3_midshift">
<div id="gridl3_rightshift">
<div id="gridl3_midmask">
<div id="gridl3_midcol">
<div id="gridl3_content">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
<div id="gridl3_leftcol">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div id="gridl3_rightcol">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>

[andreamarucci]

Found a solution. Here's the code...

grid manager -> Default Template HTML

<style type="text/css">
#gridl3_container {
position: relative;
clear: both;
float: left;
width: 100%;
overflow: hidden;
}

#gridl3_midshift {
float: left;
width: 200%;
position: relative;
left: 170px;
}

#gridl3_rightshift {
float: left;
width: 100%;
position: relative;
left: 50%;
margin-left: -340px;
}

#gridl3_midmask {
float: right;
width: 50%;
position: relative;
right: 100%;
}

#gridl3_midcol {
margin-left: 370px;
width: 100%;
overflow: hidden;
}

#gridl3_leftcol {
float: left;
width: 200px;
position: relative;
margin-left: -50%;
left: 170px;
overflow: hidden;
}

#gridl3_rightcol {
float: left;
width: 250px;
position: relative;
left: -70px;
overflow: hidden;
}

#gridl3_content {
margin-right: 440px;
}
</style>

<div id="gridl3_container">
<div id="gridl3_midshift">
<div id="gridl3_rightshift">
<div id="gridl3_midmask">
<div id="gridl3_midcol">
<div id="gridl3_content">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
<div id="gridl3_leftcol">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div id="gridl3_rightcol">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>