Add lateral columns with color in the main page

[MSS77]

Hi,

 

I would like to add two columns, one on each side of the main page.

I don't know if I have to do inside the #page or outside and how to do it ?

 

Is a margin ? a border ? a div ?

Which file I need to modify ? css, tpl ...

 

I attach a simple example where I would like the two red columns

 

Thanks

[vekia]

hello

 

in this case you should modify two template files:

1. header.tpl
   
2. footer.tpl
   

both are located in the /themes/yourtheme/ directory.

 

and also css styles file located in the same directory, but in the /css/ subdir.

 

in header.tpl before the left column definition add:

<div style="display:inline-block; width:50px; min-height:300px; background:red; float:left;">a</div>

 

 

in footer.tpl after right column definition add:

<div style="display:inline-block; width:50px; min-height:300px; background:red; float:right;">a</div>

 

 

 

 

then you will have to increase the width of the #page (in this case 2x50px =100px)

[MSS77]

Ok

 

I put in the header.tpl before header div tag:

 

<!-- Left Color --!>

<div id="leftColor"></div>

 

in footer.tpl between right and footer div tags:

 

 

<!-- Right Color --!>

<div id="rightColor"></div>

 

in globlal.css:

 

 

#leftColor {display:inline-block; width:20px; height:100%; background:red; float:left;}

#rightColor {position:absolute; top:0px; display:inline-block; width:20px; height:100%; background:red; float:right;}

 

I put position:absolute and top:0 in the right side so if not the column doesn't begins at the top.

 

Because I would like for theese columns the same height as the website, I put "height:100%" in html, body and page tags, but isn't working because only reaches 612px. Firebug show me my html only is 612px height. I attach an image

 

Any suggestions?

[MSS77]

I just realised that the problem is the columns stops at scrollbars. After scrollbars don't show the divs

I tried background-repeat:repeat but doesn't work.