Customizing Category Sidebox

[twiddletails]

I'd like to change the Category Sidebox formatting, i.e. change the fonts, colors, separator widgets and so forth.

Will I find all this in the stylesheet.css file?
If not, where?

[gjh42]

You will find a lot of it already in your stylesheet. What is not there yet can be added. The /classic/ template has some selectors included that are not in the /template_default/ stylesheet.

There are a number of settings in admin > Configuration > Layout Settings that you may want to change.

You should get Firefox and its Web Developer extension to find out what classes & ids apply to what elements of your site. The Information > Display Element Information button is your friend, as is the CSS > Edit CSS button.

A simple View Source in your browser will also be helpful in finding what tags are available.
If you want further customization, Categories Dressing will give you a lot of options.

[melena]

Hi there!
I've been reading the readme page for the cat dressing but i'm a bit confused about how to prep the buttons images to use in this mod. I'm trying to substitute the text links with custom made buttons. they all have same background+category name in custom font.
1) how shall i name my images? with the category name or with the Cpath #?
2) should i create different buttons for hover, and visited links? so the visitors will have a visual response to their actions too? how shall i name them?
Since I have submenus I will also create buttons for them (different background colors) same question about name.
Thanks!

[gjh42]

"The image names should be in the form catimg3.gif or catimg21_57.gif, with the numbers matching the cPath for the category, and located in the /includes/templates/your_template/images/ directory."

If you want a hover effect, you will need to use the background-image form of the mod instead.

"The background image names should be in the form catbg3.gif or catbg21_57.gif, with the numbers matching the cPath for the category, and located in the /includes/templates/your_template/images/ directory."
Name the files like catbg25.gif and catbg25hover.gif.

[melena]

Thanks so much for the clarification!
Are these changes going to change the categories links in the category tab menu?
If not how do I customize the cat tab menu?

[gjh42]

No, the Categories Dressing code does not apply to the cat-tabs menu. The code for the two locations is different enough that it will be a job to get it transplanted.

[melena]

Hi Glenn,
i did follow all the instructions but now I have some big square boxes for images and my buttons do not display correctly.
Can you please tell me what did i do wrong?
my site is at:
http://siteground227.com/~capoeir2/
Thank you so much!

[gjh42]

I'm not sure what is wrong - you appear to have done things correctly in the stylesheet.
Adding this to your stylesheet corrects the height issue, though I can't test the bg image position in Web Developer.

a.category-top img, a.category-subs img, a.category-products img {
    height: 30px;
    }

[melena]

Yes, that helped. It has improved , but the images still are not displaying properly. It's like the buttons links behind are the right size, but the images don't align correctly vertically within each button.

[gjh42]

What are the pixel dimensions of the actual image files? Could there be some blank space around the image?