Adding a right hand column to Executive Theme

[sean_jackson]

I'm trying to add a (floating?) right hand column in Executive theme (8.5.2)and hopefully lodge a banner in it. I've increased the relevant CSS values (Page body right column/Page Main Content/Page Header and so on) to 1000px, added a 40px margin seperating the left nav from the innerlayout (nothing too taxing!) thus creating the room for it - but I'm unsure of the next move. Has anyone achieved this with Executive that wants to share they're approach, or possibly a similar setup? I believe I need to create a float right style and an outer div - but am struggling with limited (but growing!) CSS experience.

I've searched and found Jonty's helpful response in regard to adding a right hand column to Contemporary theme(http://community.actinic.com/showthread.php?t=36372) and an inconclusive thread about adding a right hand best sellers list etc. I'd be grateful for any pointers as I'm no doubt boxing above my weight on this one! Sean

[peblaco]

I don't think you'd want to increase the body right column to 1000px - because this will become your main/middle column.

[Bruce King]

Sean,

If you look in the Actinic Stylesheet for '.page_body' you should see it within the following

/* page body fomatting elements -------------------------------------------------------- */
.page_body {
padding: 10px 0px 0px 0px;
}

.page_body_content {
width: 762px;
text-align: left;
}

.page_body_content_left_column {
float: left;
width: 170px;
}

.page_body_content_right_column {
float: right;
width: 552px;
}
/* end page body fomatting elements ----------------------------------------------------- */

Replace the above code with the following (a copy and paste should suffice)

/* page body fomatting elements -------------------------------------------------------- */
.page_body {
padding: 10px 0px 0px 0px;
}

.page_body_content {
width: 1000px;
text-align: left;
}

.page_body_content_left_column {
float: left;
width: 170px;
}

.page_body_content_middle_column {
padding: 0px 0px 0px 20px;
float: left;
width: 552px;
}

.page_body_content_right_column {
float: right;
width: 170px;
}
/* end page body fomatting elements ----------------------------------------------------- */

Now in the overall layout look for '<!-- end body content right column -->' ( you might want to change these tags both start and end to 'middle'. Right after this in a new line paste

<!-- body content right column -->
<div class="page_body_content_right_column">


</div>
<!-- end body content right column -->

That should do it for you. You will however have to tweak it to get the look and feel you desire.

Kind regards,

[sean_jackson]

Nearly There I think

[QUOTE=peblaco;234598] I don't think you'd want to increase the body right column to 1000px - because this will become your main/middle column. QUOTE]

My mistake Peblaco, thanks for that. I shall probably try the container method if my current attempt doesn't resolve. Many thanks for that

Bruce:

That (virtually) did the trick, Firefox = great, IE = needs a fix. Anyway, thanks a lot. My next issue is now getting the content of the right column not to wrap hard left under the left and middle column now - as you can see here if using IE: http://www.verycheapwebsites.co.uk/ I understand this is probably a 'clear' issue - though I have tried adding clears to the css properties of the left and middle in the CSS with poor results - would I be right in thinking that a 'clear' should included within/or before my right hand columns coding?

Everything is fine in Firefox as you can see in this screenshot:
http://www.verycheapwebsites.co.uk/firefox_view.html

I shall keep digging ti'l I understand what issue is - please feel free to correct me if i'm missing an obvious thing here.

Cheers Bruce.

Big thanks. Sean

[Bruce King]

Try this for the right hand column ...

.page_body_content_right_column {
padding: 0px 0px 0px 20px;
float: right;
width: 170px;
}

Cheers,

[sean_jackson]

That does place it to the upper right (but well outside the intended 3 column group span) in Firefox and bottom right in IE: http://www.verycheapwebsites.co.uk/float_right.html I did this on my first attempt - so I changed to float left to (hopefully) keep it top left to the middle column (as it currently does in FF), so possibly I need to work with a container as Peblaco said to get this to behave? - or maybe the answer does lie with a 'clear' placed somewhere? cheers Bruce

[peblaco]

You could try:

1. Putting a new wrapper around the left and middle columns floated left and fixed width
2. Make sure the right column is immediately after the new left/middle wrapper, fixed width and within the "page_body_content container"

Note: Edit to point 2.

[sean_jackson]

[*]Make sure the right column is immediately after the new left/middle wrapper, fixed width and within the "page_body_content container"[/LIST]


Note: Edit to point 2.

this was what was lacking Peblaco - thank you .I moved my 'woot' up a div or two (not exactly sure which div paramaters came into play - my inexperience showing!) and all is fine in the preview window (IE). I need to do further browser testing but that was much apreciated. Thanks also Bruce - also v much apreciated.

For anyone interested I'll leave a screenshot showing where I've lodged some working right hand column code (just a 'woot'). Thats me sorted for a while.

http://www.verycheapwebsites.co.uk/sorted.html

Big thanks again. regards. Sean

[Bruce King]

FF3 Checked and looks swell ....

I should have tried it before suggesting but, did that on the fly.. Glad its working for you now.