[CMS] How to place 2 widgets side by side under primary content?

[buttknocker]

Right now I have the primary content part of my my front page constructed with 2 content columns and only 2 content ("top stories") per page. See the screenshot for example.



How would I go about placing 2 widgets side by side under the primary content? In the layout manager I can add widgets under the primary content, or even above the primary content if I wanted to, but no matter how I add them the widgets are still top to bottom. I want them side by side, one under each "top story" as seen in my screenshot. Could someone please tell me what I need to do to accomplish this? Am I on the right track thinking that a new grid layout needs to be in place for this to happen? And if so how do I make that grid? The grid manager limits you to pre-defined grid styles when creating a new one.

[Lynne]

I think you are right that you will need a new grid. I've never done it, but you can contruct one and then 'flatten' it so you can then edit the html to make it how you want.

[Edwin Brown]

First, let me be very clear. I have not done what you want to do. So make sure you have backups, and do this with NEW grids. You should be able to create an unpublished section to test with, or better yet do this on a test local installation.

I would make a layout with enough areas, like a three column grid with a sidebar or secondary footer. Then flatten the grid. You can now edit the css directly. The UI editor won't show the correct locations, so placing the widgets might give you a headache, but as long as you keep the regions straight you should be able to do it.

[buttknocker]

I'll give what yall are saying a try. Thanks!

[buttknocker]

I think you are right that you will need a new grid. I've never done it, but you can contruct one and then 'flatten' it so you can then edit the html to make it how you want.

That did end up working. Thanks!

I would make a layout with enough areas, like a three column grid with a sidebar or secondary footer. Then flatten the grid. You can now edit the css directly. The UI editor won't show the correct locations, so placing the widgets might give you a headache, but as long as you keep the regions straight you should be able to do it.

I didn't have to do it exactly like that and I had no troubles of placing the widgets on the layout.

The way I did it was to flatten the grid like they said. Then just edit the html of the grid. I knew I wanted the widgets side by side so figured a table would be the easiest.

This is my Layout Manager UI HTML & Default Template HTML;

It's is also the same thing that I had to manually change the entire contents of my vbcms_grid_11 template to.
(grid number matches your grid id in grid manager);

I wasn't sure what to name the new columns so I just called them 4 and 5, in succession like the others, and just changed it in both places.

<div id="doc3" class="yui-tvb-l1">
	<div id="bd">
		<div id="yui-main">
			<div class="yui-b">
				<div class="yui-gc">
					<div class="yui-u first yui-panel">
						<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>

<td valign="top" width="100%">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</td>
</tr>
</table>

						<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<ul class="list_no_decoration" id="widgetlist_column4">$column[4]</ul>
</td>

<td valign="top" width="50%">
<ul class="list_no_decoration" id="widgetlist_column5">$column[5]</ul>
</td>

</tr>
</table>
					</div>
					<div class="yui-u yui-panel">
						<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="yui-b yui-sidebar">
			<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
		</div>
	</div>
</div>

After that code is in place it will make your layout manager look like so:


And your final product should look similar to this based on your html edits:

[Lynne]

Pretty cool!

[PET]

This is nice. Thanks for the "grid".

Does anyone knows it how to make it with divs?

[libe]

where do i put this code i'm useng cms v4

That did end up working. Thanks!



I didn't have to do it exactly like that and I had no troubles of placing the widgets on the layout.

The way I did it was to flatten the grid like they said. Then just edit the html of the grid. I knew I wanted the widgets side by side so figured a table would be the easiest.

This is my Layout Manager UI HTML & Default Template HTML;

It's is also the same thing that I had to manually change the entire contents of my vbcms_grid_11 template to.
(grid number matches your grid id in grid manager);

I wasn't sure what to name the new columns so I just called them 4 and 5, in succession like the others, and just changed it in both places.

<div id="doc3" class="yui-tvb-l1">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first yui-panel">
<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>

<td valign="top" width="100%">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</td>
</tr>
</table>

<table border="0" cellpadding="6" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<ul class="list_no_decoration" id="widgetlist_column4">$column[4]</ul>
</td>

<td valign="top" width="50%">
<ul class="list_no_decoration" id="widgetlist_column5">$column[5]</ul>
</td>

</tr>
</table>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>

After that code is in place it will make your layout manager look like so:


And your final product should look similar to this based on your html edits:

[Lynne]

where do i put this code i'm useng cms v4

That is grid code.

[libe]

what do you maen?

That is grid code.

[Lynne]

I mean you create a new grid in the Grid Manager and put the code in there.

[obmob]

Guess it is not straigh, couldn't add it and ended up wth a blank page in the frontpage