sidebox headers - how to alter height?

[shags38]

Hi - I have tried a few threads looking for this but no luck.

How can I increase the height of the sidebox headers, e.g. the "categories" header so that I can use larger font size to make that sidebox stand out - I have tried many variations in CSS Stylesheet with no luck.

Also want to be able to change the font style to upper case for sidebox headers - where can I do that?

cheers,
Mike

[stevesh]

1. Assuming the padding remains the same, simply increasing the font size should increase the size of the header. If it doesn't on your site, this unclosed element is probably why:


.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #AFAFAF;
background-image:
padding: 1.5em 0.2em;
}


2. text-transform : uppercase; though it might make more sense to change the sidebox name to uppercase in english.php.

[shags38]

1. Assuming the padding remains the same, simply increasing the font size should increase the size of the header. If it doesn't on your site, this unclosed element is probably why:


.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #AFAFAF;
background-image:
padding: 1.5em 0.2em;
}


2. text-transform : uppercase; though it might make more sense to change the sidebox name to uppercase in english.php.

Many thanks Steve - works a treat. Question: in the case of a Background Color AND Background Image element which one takes precedence? If I wanted to replace the background color with an image in the case above do I delete the colour and insert the image? When inserting the image do I enter the whole url or truncate it as is shown in this example and is the truncation always two dots;
#navEZPagesTop {
background-color: #AFAFAF;
background-image: url(../images/border_tile_sideboxes_155.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

in this case above the background colour is taking precedence, is that always the case?

cheers and thanks again,
Mike

[stevesh]

In a stock Zencart installation using the Classic template, that rule looks like this:

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

and the image overrides the background color, so I don't know what's different about yours, unless the image in question isn't where you're telling Zencart it is. That path with the two dots is correct, assuming the image is in the 'images' folder under your custom template, and not in /includes/images.

[shags38]

In a stock Zencart installation using the Classic template, that rule looks like this:

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

and the image overrides the background color, so I don't know what's different about yours, unless the image in question isn't where you're telling Zencart it is. That path with the two dots is correct, assuming the image is in the 'images' folder under your custom template, and not in /includes/images.

Thanks again Steve - maybe the image is in the wrong place, I will check it.

In respect to altering the height of the header bar - by inserting * padding-bottom: 5px;padding-top: 5px; * into the font element it increases the padding top and bottom of the text so as to increase the height of the bar and centralize the text at the same time. Increasing font size works but text is to extreme of bar and looks a bit odd.

Just to clarify one point - if using an image can I insert the url as * url (../images/great-image.gif); * instead of having to enter the complete path as in http://www.mydomain/images/great-image.gif ??

cheers,
Mike

p.s. just wondered if you could offer assistance also to my other post regarding adding a center box into the Products pages - my current big hurdle - Thanks