3 Columns grid of 360px,300px,300px

[Demo16]

Hi guys I just bought the VB4 with the CMS. I'm starting adapting the CMS layout to our website but I think it has come limitations. I would like to decide myself the width of the columns in the grid section but it seems to be fixed to their default. Is this correct or am I missing something?

And another thing the grid 3 Column (50%, 25%, 25%) is not like that is like (25%, 25%, 50%). Have you found the same problems?

Alek

--------------- Added 1264521039 at 1264521039 ---------------

No help at all?

[Demo16]

No one else need this feature?

[DJRu]

Same here....

Can't figure how to manage column width using fixed values in pixels.

[Lynne]

You may want to play with the grids. You may create one, then flatten it, and then edit the html for it to however you want.

[Demo16]

Lynne tnx for the reply, I've already tried that but the html code is with div connected to css style. For example:

<div id="bd">
<div class="yui-g" style="width:360px;">
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>

in red what I've customized. But it doesn't work anyway.
The problem is that divs you can see when you flat the grid use a CSS class stored on a stylesheet, for this reason you must go and edit also the stylesheet It can be done but if there's an update of the board maybe you'll screw up everything. For this reason I am asking if there's an "official" way to do it.

[Lynne]

If there is an 'official' way, then you should ask over on vb.com. Otherwise, the only thing I know about is to change the grids.

[Demo16]

If there is an 'official' way, then you should ask over on vb.com. Otherwise, the only thing I know about is to change the grids.
but how? As you can see inside the grid the CSS tags won't work.

[Lynne]

I have not played much with changing the grids, so I really can't give you specifics. But, if I were to do it, I would take out the class in the flattened grid there and add my own.

[Demo16]

I have not played much with changing the grids, so I really can't give you specifics. But, if I were to do it, I would take out the class in the flattened grid there and add my own.

right I thought the same thing, but first I need to find the original class, to copy them and just add my customization. And there's really a mess on the CSS and xml files.

I'll try to start a class from scratch and let you know.

--------------- Added 1264619786 at 1264619786 ---------------

Ok problem solved there was a mistake in my code. So I'll post this for everyone.
Maybe you can stick the thread as SOLVED Lynne I don't know.

Let's say you have this default 33%-33%-33% default layout:


<div id="doc3">
<div id="bd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>


you just make like this:

<div id="doc3">
<div id="bd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1" style="width:100%">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2" style="width:300px">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3" style="width:300px">$column[3]</ul>
</div>
</div>
</div>
</div>


Hope this helps other people.

[Spiritvn]

You can rewrite the grid without the yui, add your own css :)

[petermclane]

You may want to play with the grids. You may create one, then flatten it, and then edit the html for it to however you want.

Curious Lynne, where the html is kept once you flatten. In other words, where does one go in order to edit it?

ty,
P

[Lynne]

Curious Lynne, where the html is kept once you flatten. In other words, where does one go in order to edit it?

ty,
P
You edit it right there under the Configure link. It actually creates a new grid template, but you edit it using the Configure button next to the grid name.

[inigo]

right I thought the same thing, but first I need to find the original class, to copy them and just add my customization. And there's really a mess on the CSS and xml files.

I'll try to start a class from scratch and let you know.

--------------- Added 1264619786 at 1264619786 ---------------

Ok problem solved there was a mistake in my code. So I'll post this for everyone.
Maybe you can stick the thread as SOLVED Lynne I don't know.

Let's say you have this default 33%-33%-33% default layout:


<div id="doc3">
<div id="bd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>


you just make like this:

<div id="doc3">
<div id="bd">
<div class="yui-gb">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration" id="widgetlist_column1" style="width:100%">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2" style="width:300px">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column3" style="width:300px">$column[3]</ul>
</div>
</div>
</div>
</div>


Hope this helps other people.

I would like to change the grid 2 columns (liquid/liquid) 60%/40% to another one (liquid/fixed) 100%/300px.

The problem is doing this code modification in the grid code, the right column fixes to 300 px, but below is another column of 40% that makes a blank space on the right (because that 40% is bigger than the 300 px of the widgets fixed), so i think i have to touch in other place to fix that other column below the one i have fixed with this mod,

Any ideas?

Thanks ;)

[ravencr]

Adding that code doesn't work for mine for some reason...I want a 20%, 60%, 20% setup, and I can't get it to work at all by flattening the grid and editing the html. Any other thoughts?

Chris

[midnz]

Download the default grids.xml to see how they're made. Make your new grid .xml and then upload it (Grid Manager > Download/Upload Grids).
It worked for me before I stopped bothering with the CMS and started using Logician's Webtemplates (https://vborg.vbsupport.ru/showthread.php?t=250202) instead. More information here. (https://vborg.vbsupport.ru/showthread.php?t=248667)

[Lynne]

Adding that code doesn't work for mine for some reason...I want a 20%, 80%, 20% setup, and I can't get it to work at all by flattening the grid and editing the html. Any other thoughts?

Chris
20,80,20? That doesn't add up.

If you want help, you need to post exactly what you have tried. We can't tell you where you went wrong when you haven't posted your code (please use code tags).

[ravencr]

Sorry, updated it. As soon as I change it, it converts everything to 1 column. I'll see if I can follow the last guy's post too.

[Lynne]

I actually helped a guy with the css for a 20, 60, 20 widget over on vbulletin.com, so you may want to try a search over there.

[ravencr]

Do you know what the title was by chance?

[Lynne]

No I don't. but it was a thread about grids.