Using buttons/images in left hand sideboxes

[mommydesigns]

I have a customer who likes her current design but I'm not sure it's do-able in Zen. Right now, she has .jpg images in the left hand navigation panel for all of her main categories and pages (ie. Conact Us, About Us, etc).

Is this do-able in Zen or can we only use the Text from the Category names we create?

Thank you!

Jennie

[kobra]

Yes this attainable.

Check the image for the sidebox headings that you have for the width in pixels.

Insure that you set the box and column width to match in your admin.

There are at least two types or ways to do this.
One is using a styled sidebox header image(over the default rectangle with a solid color) and this would use the normal method for the box description.

Another is to have a complete image with the description as part of the image. I will assume that this is what you have.

Collect the default box titles and the image that you want to replace for these.

In your english.php file open it in a text editor. find the titles that you need to change. For illustration the categories is represented:

Find:

define('BOX_HEADING_CATEGORIES', 'Categories');

The red highlighted text would be replaced with:

define('BOX_HEADING_CATEGORIES', 'your_graphic.jpg');

You also need to alter the sidebox file for each that you want to change: find includes/modules/sideboxes/categories.php file and open this in your text editor. Find this entry:

$title = BOX_HEADING_CATEGORIES;

and change it to:

$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES, HEADER_ALT_TEXT);

Repeat for each that you will alter and save them to your override folder for your template in includes/modules/sideboxes/your_template/categories.php

Place the images files in: includes/templates/your_template/images/
folder.

[mommydesigns]

Thank you so much! Just getting all the buttons together to start doing this. I'll post an update when I get it done. :)

[Berserker]

Kuroi,

How do i get rid of the default rectange used for the sidebox header? When I upload an image with curvy edges, it still inside this rectange thing. How do i get rid of it?

Thank you

[Berserker]

Sorry...I mean Kobra :)

[kuroi]

Now you've offended us both! Good job we're buddies.

I seem to remember that you decided to stick with the Classsic Template and id so then between the two stylesheets there are at least four places where either background images or background colors are set for the sidebox headings - all of which could result in a colored or decrative rectangle sitting behind your heading images.

Very quickly, there's one here (already commented out)

/*.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}*/

another here (also commented out)

.leftboxheading, .rightboxheading, .centerboxheading, .singleboxheading {
/*background-color: #abbbd3;*/
font-size: 10px;
font-weight: bold;
color: #ffffff;
padding: 3px;
height: 20px;
padding-left: 5px;
}

and two here (which are probably the ones still doing the damage)

TR.leftboxheading, TR.rightboxheading, TR.centerboxheading, TR.singleboxheading {
background: #abbbd3;
background-image: url(../images/tile_back.jpg);
}