HELP! - Sidebox Header Background Color

[expresso]

I'm killing myself here - this ought to be easy.

I've been up and down my stylesheet, but I can't get the sidebox headers to have a background color.

I've tried modifying .leftBoxHeading, but no results.

Is there a trick here?

[stevesh]

The stock Zencart 'classic' template uses images as sidebox headers. Search your stylesheet for 'tile_back.gif'. Remove that, then change the background-color.

Don't forget to do all this in your CUSTOM template - version 1.4 is near.

[expresso]

OK...great idea, but...it's harder than that.

First to clarify - the tile_back.jpg is in the classic stylesheet - good guggestion, but...

I'm using the 'BareBones' template - so it doesn't include the tile_back.jpg.

And...I don't want to make the center column use this header color - only the sideboxes.

More suggestions?....

[ribbonsbaskets0]

Ive been having i think maybe a similar problem, http://www.zen-cart.com/forum/showthread.php?t=112964

At one point I was trying to find tile_back.jpg to remove it and see if that removed the grey lines I have. I realized quickly this likely isnt what I needed. I think - but am not sure, that the images folder in the defult template is somehow also used. not sure but if you delete this file out of that folder that might do it. Hope this helps.

[stevesh]

It looks like the background-color statement in .leftBoxHeading is commented out in that template - have you removed the /* and */?

[limelites]

I'm having an almost identical problem here.

I'm using the following code in my main stylesheet.css:

.rightBoxHeading, .leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;

However, the button background just simply will not load! Where am I going wrong??

I've also tried:

.rightBoxHeading, .leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;

NOTHING!?!??!

I've tried many, many permutations and syntax but just can't get the background image to work.

Please, does anyone know what I'm doing wrong??

[CharInLasVegas]

I'm having an almost identical problem here.

I'm using the following code in my main stylesheet.css:

.rightBoxHeading, .leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background:transparent url(../images/button-bg.gif) repeat-x;

However, the button background just simply will not load! Where am I going wrong??

I've also tried:

.rightBoxHeading, .leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;
}

h3.rightBoxHeading, h3.leftBoxHeading {
background-image url(../images/button-bg.gif) repeat-x;

NOTHING!?!??!

I've tried many, many permutations and syntax but just can't get the background image to work.

Please, does anyone know what I'm doing wrong??

try
background-image: url('../images/button-bg.gif');

That's the way I have it in my stylesheet.

[gjh42]

The quotes aren't needed (they don't hurt), but the colon is a necessity:

background-image: url(../images/button-bg.gif);

Background-image can only handle the image name, not the repeat. Either move the repeat to its own line

background-repeat: repeat-x;

or use the shorthand

background: url(../images/button-bg.gif) repeat-x;


and you don't want to style the same elements twice:

.rightBoxHeading, .leftBoxHeading {
...

h3.rightBoxHeading, h3.leftBoxHeading {

Just the second set will do the job right.