Side Box Header Help

[imperialis]

Before I decided to use zen I bought a template which is not compatable with zen but I have all the images I need to use to customise zen so this brings me to
I want to change the side box headers image categories etc the box image is different but so the words stay there categories etc
I do have the 3 images for the side headers so that when I add sub categories thay will expand to fit the new writing
If someone could help me with this I would very much appreciate it.
(in never used css terms too please)
Kind Regards
Emma

[kobra]

Usually images are tiled(repeated) for these headers, they can be a staticly sized image if necessary.

You might look at the classic stylesheet for how this is applied and search for tile_bak.gif in that file

[gjh42]

By "3 images" do you mean left, center and right? If so, you can decide how wide the sideboxes are supposed to be, and make one composite image to use in the heading. The sideboxes do not change in width unless you specifically change a setting. If a category name is longer, it will just have to wrap.

If you are talking about top, middle and bottom images for the whole sidebox, you can apply those as background-images for the #categoriesHeading, #categories and #categoriesContent divs. Then the top and bottom images will cover the rough ends of the middle image.

A bit more detail about your plans, and a link to your site, will help us help you.

[imperialis]

By 3 images I mean the top middle and bottom images of a box.
My site is www.imperialgiftsnwares.com.au

[gjh42]

OK, then my second suggestion is what you need to do. Do you want this for all sideboxes, or just for categories?

If for all sideboxes, and the same images in each, you can apply the bg images to

.leftBoxHeading, .rightBoxHeading {

.leftBoxContainer, .rightBoxContainer {

.sideBoxContent {

[imperialis]

Yes I would like it for all the headers
How do I apply it? I'm so new at this

[imperialis]

and what width should the images be so they match the ones that are already there?

[gjh42]

You currently have no images on your sideboxes; the colors are background-color: and border: properties.
The default sidebox width is 150px. You can set this to whatever you want in admin, and then make your images to match.
You can do something like this in your stylesheet:

.leftBoxHeading, .rightBoxHeading {
    background: url(../images/yourtopbg.gif) no-repeat;
    border: none;
    }

.leftBoxContainer, .rightBoxContainer {
    background: url(../images/yourmiddlebg.gif) repeat-y;/*or no-repeat if you have a single image to go full length*/
    border: none;/*or whatever you want for the whole box border*/
    }

.sideBoxContent {
    background: url(../images/yourbottombg.gif) no-repeat bottom center;
    border: none;
    }

Save the bg images in /includes/templates/your_template/images/.

[imperialis]

Thanks Glenn
I will see how I go
Kind Regards
Emma

[imperialis]

I don't know what I have done but it's not working
this is what I have in my css

/*sideboxes*/.columnLeft {}.leftBoxHeading, .rightBoxHeading { background: url(../images/top.jpg) no-repeat; border: none; }.leftBoxHeading, .centerBoxHeading { margin: 0em; background: url(http://www.imperialgiftsnwares.com.a...homepage15.jpg) #669966; padding: 0.5em 0.2em; }.leftBoxContainer, .rightBoxContainer { background: url(../images/middle.jpg) repeat-y; border: none; }.sideBoxContent { background: url(../images/bottom.jpg) no-repeat bottom center; border: none; }h3.rightBoxHeading, h3.rightBoxHeading a { font-size: 1.1em; color: #FFFF00; }.rightBoxHeading { margin: 0em; background: #669966; padding: 0.2em 0em; }h3.leftBoxHeading a:hover { color: #FFFF33; text-decoration: none; } h3.rightBoxHeading a:hover { color: #FF0000; text-decoration: none; }.rightBoxContent { background-color: #ffffff; margin-bottom: 1em; }