Right column in Quick.Cms v4.x

emanuellb

2012-05-06 17:30

Hello,
How can insert a right column in "Quick.Cms v4.x"?

Thanks!

» Quick.Cms v4.x

treewood (OpenSolution)

2012-05-07 07:39

emanuellb - edit templates/default/container.tpl and in: <div id="body"> add one more column for example:
<div id="column-right">some content</div>

after in templates/default/style.css add some styles #column-right{float:right;...}. you've to change width of #column and #content in styles to.

you have great example of 3 columns in skin brightside:
http://opensolution.org/download,en,18.html?sDir=Quick.Cms/skins#brightside_v4.0

emanuellb

2012-05-07 11:53

Thanks for the tip. I will try I come with news.

microdigital

2012-05-08 20:52

I've made the right column for bright-flower skin (you have to put the folder within bright-flower_v4.0.zip archive into templates folder). The solution is taken from the manual.

In templates/default/container.tpl make following change:

<!-- END BODY --><!-- BEGIN FOOT -->
<div id="options"><div class="print"><a href="javascript:window.print();">$lang['print']</a></div><div

class="back"><a href="javascript:history.back();">&laquo; $lang['back']</a></div></div>
</div>
</div>
</div>
<div id="foot"><!-- footer starts here -->

with:

<!-- END BODY --><!-- BEGIN FOOT -->
<div id="options"><div class="print"><a href="javascript:window.print();">$lang['print']</a></div><div

class="back"><a href="javascript:history.back();">&laquo; $lang['back']</a></div></div>
</div>
<!-- start content of right column (column2 in css) -->
<div id="column2">
HTML code
</div>
<!-- stop content of right column (column2 in css) -->
</div>
</div>
<div id="foot"><!-- footer starts here -->

In templates/bright-flower/style.css make following changes:

/* ADDITIONAL COLUMN */
#column2{display:none;float:right;width:100px;}

with:

/* ADDITIONAL COLUMN */
#column2{float:right;width:160px;background:#fff;}

AND

/* RIGHT COLUMN STYLES */
#content{float:left;width:690px;padding:10px 0 5px;text-align:center;}
* html #content{width:660px;}

with:

/* RIGHT COLUMN STYLES */
#content{float:left;width:530px;padding:10px 0 5px;text-align:center;}
* html #content{width:500px;}

You can see 3rd column here: http://www.stomatologie-bucuresti.info/test/ (I have a banner as HTML code)

http://www.stomatologie-bucuresti.info/