CMS Grid help?

[Budget101]

I'm trying to make a grid with the following:

3 Columns 310px 100% 180px


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


But instead of the 310px code showing on the left hand side, it displays on the right. Anyone know how to fix that?

Herehttps://vborg.vbsupport.ru/external/2015/05/15.jpg

[Lynne]

Is there some additional code for this? The html you posted is not going to make any column 310px. So, you must have some CSS or something else doing that. Can we get the full code for this grid.

[Budget101]

Is there some additional code for this? The html you posted is not going to make any column 310px. So, you must have some CSS or something else doing that. Can we get the full code for this grid.

<div id="doc3" class="yui-tvb-r2">

is what makes it the 310px but it still doesn't justify to the left= I'm using the default css in vbcms.css for the grids

[Lynne]

Well, "first" as a class means it is first in the display (aligned left). And "yui-u" means that each of the blocks are 50%. And "yui-gc" means to take 2/3 width. So, I think you are using all the wrong classes. Also, there is nothing in your html to say that one column is 310px and the other is 100%. Both are called out as "<div class="yui-u yui-panel">", so they have the exact same class.

Try something like this:
<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 310px; float:left; margin-right: -320px;}
.col_2 { float:left; margin: 0 190px 0 320px;}
.col_3 {width: 180px; float: right; margin-left: -190px; }

</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>

[Budget101]

Well, "first" as a class means it is first in the display (aligned left). And "yui-u" means that each of the blocks are 50%. And "yui-gc" means to take 2/3 width. So, I think you are using all the wrong classes. Also, there is nothing in your html to say that one column is 310px and the other is 100%. Both are called out as "<div class="yui-u yui-panel">", so they have the exact same class.

Try something like this:
<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 310px; float:left; margin-right: -320px;}
.col_2 { float:left; margin: 0 190px 0 320px;}
.col_3 {width: 180px; float: right; margin-left: -190px; }

</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>

Thanks lynne, but that one returned a completely blank style when I tried it in the grid.

[Lynne]

Hmmmm, I did that exact one in my CMS and it worked fine. :/ Is there anything in your error_logs (if you don't know where they are, ask your host) when you get that blank page?

[Budget101]

Hmmmm, I did that exact one in my CMS and it worked fine. :/ Is there anything in your error_logs (if you don't know where they are, ask your host) when you get that blank page?



Maybe I'm doing it wrong? Here are the steps that I took,

AdminCP> vbCMS> Grid Manager> add new Grid> Paste your supplied code > Save

Then created a layout, which returned a single column, this time no blank page.


Also, if I add the styling to the additional.css instead of directly in the template, that's when it comes up blank (missing)
.two_columns {float: right;} .col_1 {width: 310px; float:left; margin-right: -320px;} .col_2 { float:left; margin: 0 190px 0 320px;} .col_3 {width: 180px; float: right; margin-left: -190px; }

[Lynne]

I would not add the CSS to the additional.css template - that shows up on every page and you don't need that.

You need to go to Grid Manager > create a grid > Flatten Grid > then Edit and paste that code into both boxes, not just one. Did you do that?

[Budget101]

I would not add the CSS to the additional.css template - that shows up on every page and you don't need that.

You need to go to Grid Manager > create a grid > Flatten Grid > then Edit and paste that code into both boxes, not just one. Did you do that?

Yes, that's precisely what I did (on the first try) but it what it creates a blank layout. (I didn't mean page, sorry about that, it creates a blank Layout.)

Screenshot:
http://www.screencast.com/t/zGbo5s9PgK

(also, the div tag is not missing in the top part of the screenshot, there just wasnt room to scroll to show the entire code)

Screenshot of the code in flattened grid:
http://www.screencast.com/t/fdbpeQNOKO

If I go and add the style elements to the additional.css it creates a single box (but no widgets)

[Lynne]

Are you trying this on a default style (that is what I did)?

[Budget101]

Are you trying this on a default style (that is what I did)?


Um.. Lynne, I'm confused. How precisely do you try this in the default Style? I'm in the adminCP> greate Grid> copied & pasted the code verbatim, save. Then create layout- once in the layout- there is No layout- it's blank.

I never get the option to go to a default style. It never creates a layout- the layout remains blank so there's no way to go to the style. Unless you mean going into the default style and editing the vbcms_grid template for that one..

Is that what you mean?

[Lynne]

My test site is running 4.2.2 - what version are you running?

If you want to PM me a link and admin login and the name of the grid/layout and a link to the section your want to apply it to, then I can take a look at it.