Left Column Background Color All the Way to Footer

[PrestaNoob852]

I am using Prestashop 1.5.2 and I am trying to get the background color of the left column to go all the way down to the footer (I am using a template with only a left and center column). When I have a lot of items or text in the center column, the left column ends at the last module. When this happens I end up with a gap that is white between the bottom of the last module and the top of the footer (see photo example). How can I get this left column to have a background-color:#330099; that reaches all the way down to the footer?

 

Here is my current global.css code for the columns:

 

#columns {background-color: #FFF;z-index:1}
 #left_column {background-image:url(../img/leftbarBack.jpg); background-size:100% 100%;}
 #center_column {}
#footer {}

[PrestaNoob852]

No one has figured out how to do this yet? I found several links to people who want the same thing, but never an answer to actually how to do it. I tried wrapping the entire thing in a new div container that started in the header.tpl and ended in the footer.tpl, but no dice. There has to be a way??

[Carolina Custom Designs]

Here is my current global.css code for the columns:

 

#columns {background-color: #FFF;z-index:1}
 #left_column {background-image:url(../img/leftbarBack.jpg); background-size:100% 100%;}
 #center_column {}
#footer {}

 

Try

 

#columns {background-color: #FFF;z-index:1}
 #left_column {background-color:#330099; background-size:100% 100%;}
 #center_column {}
#footer {}

 

This should remove the image and give you the color bg you want.

 

Marty Shue

[PrestaNoob852]

All that does is change the image to a solid color. That doesn't allow the color to go all the way down to the footer. #left_colum is a div that is only as tall as the content it contains. But when my #center_column div has 20 items on it, the height of that column is quite a bit taller than the left column. What I'm looking to do is have that #330099 color go in the entire left column, and not have anything to do with the content contained in #left_column.

[Carolina Custom Designs]

Can you post a link to the store? It will be easier for someone to help you this way. It is difficult to work from an image.

 

Marty Shue

[PrestaNoob852]

http://ecbiz129.inmotionhosting.com/~celest19/store/index.php

 

It's on a temporary address right now while I finish it, but that link will get you there. It's a custom theme that I'm creating, however, it's just based on the same template files as the default theme. So if the code works on the default, it will work on this mine.

[Carolina Custom Designs]

Thanks for the link.

 

Basically, an easy way of doing this is to change the #columns bg to the blue you want then just change #center_column to white. This gives the illusion that the left column is blue. You will have to adjust the margin/padding to get the desired spacing.

 

Here is what I ended up with http://prestashop.ca...blue-column.png

 

Hope that helps get you started.

 

Marty Shue

Edited December 4, 2012 by Carolina Custom Designs (see edit history)

[PrestaNoob852]

Yeah, that was my last resort "hack" method. The problem is that this causes the reverse when I have short content in the center, and I get a lot of blue screen instead of white down to the footer of the center column. Like on some of my policy pages where there is only a couple of sentences. I guess I could stick in an invisible 1 pixel gif that I stretch the remaining length, or a bunch of line breaks. But that's really a sloppy fix.

 

Where did you adjust the padding/margin to get the blue to only be as wide as the image in the left column? The places I was trying just pushed the center column over causing it to wrap instead of making the blue less wide.

Edited December 5, 2012 by PrestaNoob852 (see edit history)

[PrestaNoob852]

Oo Oo Oo!!! I figured it out!!!

 

OK so here is how I did it. First here is my new global.css:

/* ***********************************************************
 struture
************************************************************** */
#page {}
#header {z-index:10}
#columns {background-color:#330099;}
 #inner_columns {overflow:hidden;} /*additional div that makes it all work*/
 #left_column {background-image:url(../img/leftbarBack.jpg); background-size:100% 100%;}
 #center_column {background-color:#FFF; margin-bottom:-1000px; padding-bottom:1000px; margin-left:-25px; padding-left:25px;}
 #right_column {}
#footer {}

 

I had to add another id for a new container div that holds the columns. Also note that I ended up making my background of all the columns blue (see #columns 'background-color:#330099) and then making the center column white (#FFF) which is what Carolina Custom Designs was mentioning. The reason for this is because I wanted to put a background image into the left column. If you didn't have a background image used in any of the columns, then you could just make the left column have the info that is shown in #center_column and give it a color to match your site or footer color. The margin at a negative value and then padding at a positive value is used to fake the browser into displaying the columns like we want them to and not cut off any content.

 

Next, you have to add the new div to header.tpl (down at the bottom of the code you will see):

<div id="columns" class="grid_9 alpha omega clearfix">
  <div id="inner_columns"> /* HERE IS OUR NEW DIV START */
<!-- Left -->
<div id="left_column" class="column grid_2 alpha">
 {$HOOK_LEFT_COLUMN}
</div>
<!-- Center -->
<div id="center_column" class=" grid_7 omega">
{/if}

 

Now we have to go to the footer.tpl to close the div (around the bottom middle of the code this time):

<!-- Right -->
{*<div id="right_column" class="column grid_2 omega">
 {$HOOK_RIGHT_COLUMN}
</div>*}
  </div> /* THIS IS THE NEW DIV END - DON'T FORGET IT! */
  </div>
<!-- Footer -->

 

Now just save to the site and you should now see your dynamically changing column colors go all the way down to the footer no matter how big or small your content! :D

[totallighting.sk]

Great, working...

[Carolina Custom Designs]

Great, working...

 

Glad you were able to get it working for you too.

 

Marty Shue