Changing color of Categories and Sub-Categories

Glenn,

Thanks so much for the code, but I can't get it to work properly and I can't figure out what I'm doing wrong. The first code didn't work at all, it wiped out all my boxes all together. The second code worked, but it only changed the color for the sub-category title, not the listings below it. And all the listings have the same color despite being assigned different ones. (if you check the website and click on "Themed Favours", you'll what I mean.)

I must have missed something?

Denise

I'll take a look at this when I get back to my home computer with the right tools, and test it on my local site. (I forget if I tested it before or not...)

Just came across this old thread and want to note that I have tested the code in post 20, second version, and it does correctly generate class names of .category-subs1, .category-products1, .category-subs2, .category-products2, etc. reflecting subcat level.

There are a couple of other classes that could affect these elements, so you want to make sure you know what you are doing in styling them.

Just reviving an old thread... Ive been searching through the forums to find a way to 'bold' the currently selected element in the category sidebox list.

I can style top level menu items and subs (thanks to this thread) - but Im wondering if we can style the prod category that is currently active?

Thanks,

Scott.

Add to your stylesheet```
.category-subs-parent, .category-subs-selected {
font-weight: bold;
}

Aah Greg, yet again you come to my aid.

Thank you!

-Scott.

Glenn your patience is truly endless! Let me abuse of it: I was wondering it there was an easy way (CSS modification) to change the color of the links in the side columns (One and Two I believe they're called) independently from those of the central column?

My website should be accessible here: http://87.210.162.199/catalog/ (it might takes a few attempt)

thanks

Carlo

I seem to have found it, just adding:

.centerColumn a {

}
will affect only the links in the center columns, being able to change the properties of every other link with the
a: link ..... ul li a {
}
statement

Yep, and you can affect just the left or right column with
#navColumnOne a {}
or
#navColumnTwo a {}

And one more to go, this has been quite a ##########: the "categories" list of links (which is not an "ul li a", by the way) is quite tight! Adding padding or margin to the

A.category-top, A.category-top:visited {
text-decoration: none;
padding: 1em;
}
Only add padding to the LEFT of the links, not BETWEEN each link, the space remain the same, ditto for "margin".
It could have something to do with the <br /> at the end of each line? As per the source code:

<!--// bof: categories //--> <div class="leftBoxContainer" id="categories" style="width: 150px"> <h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3> <div id="categoriesContent" class="sideBoxContent"> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=69">Intense</a><br /> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=70">Mild</a><br /> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=71">Light</a><br /> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=75">Balsamico ABTM</a><br /> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=74">Books</a><br /> <a class="category-top" href="/catalog/index.php?main_page=index&cPath=73">Bundles</a><br /> <hr id="catBoxDivider" /> <a class="category-links" href="/catalog/index.php?main_page=products_new">New Products ...</a><br /> </div></div> <!--// eof: categories //-->

Thanks again in advance! :D

Carlo

P.S. Any idea why the CSS won't load in IE7?

If the CSS is not loading in IE7, that is a problem with your computer/browser.

Since the links are inline elements, with <br /> to ensure they stay on separate lines, they will not respond to padding properties. You can use line-height:, but that will also space out any long names that wrap to two lines. To get total control over categories sidebox styling, try Categories Dressing (which also converts the categories and subcats to a properly nested set of <ul> lists).

Thanks Glenn for you answer. However, Categories Dressing (as I'm not, nor I plan to, using any subcategories) seemed a bit like shooting mosquitos with a cannon, I just patched the tpl_ to produce statically (your usage of an ad-hoc class is quite ingenious) the ul li that I needed. That's life :D
Unfortunately the glitch in IE7 was referred to me and I have no way to check it, I'm trying to browse online, it seems that IE7 has problem with long CSS. We'll report if I'll know more.

If you will not have subcategories, coding a straight <ul> into tpl_categories.php is fine.

I don't have IE7 (my computer is too old to install it), but I know that IE6 was unable to handle more than two classnames applied to an element - that is part of the history of the Categories Dressing classname structure. They could have been a bit simpler if IE handled classes better.

Hi guys

I am a newie to Zencart and learning my way through....
I have three questions, sorry if they have already been answeared.

1. How to change the colour of categories text....
   I tired to fine the tpl_categories.php. file but could only find categories.php and when i added the line a.category-top { color: #001122; } everything but the top header disapeared when i uploaded.

2. Is there a ways to keep the categories all open?.... I would like it so it appears category, and products listed underneith without having to click on the category button to make it open up. I think it would be easier for people to find what they want, or see something else they may like. (And maybe bold the categories?)

3. Is there a way to take away the automated total adding up in the shopping cart on the right side panel?.... I would like to keep the cart there but not the total price, because I am thinking it may stop people from buying as much on the run.

Any help would be sooooo thank full
Thanks All
Gian

a.category-top { color: #001122; } is a styling rule, and does not go in any php file but in the stylesheet (/includes/templates/your_template/css/stylesheet.css).

What you want is known as "expanded categories". There are several mods that do this in one way or another, but if you want the products to appear in the sidebox with the categories, look at Expanded Category List in Free Addons. If you will only ever have a few dozen products total, this may work well for you. Bolding the categories is a matter of adding an appropriate style rule.

Any display modification is possible; this one would probably be easy with a "display: none;" style on the correct element. A link to see your site will let us give the right answer.

This is an extremely simple question, and I have looked for the answer, which is what brought me to this thread.

After installing Categories Dressing, I simply want to change back the text color of cats (no sub cats in my site yet) to the stock green color (and bold green for current selection) from before installing Cat Dressing.

The main stylesheet of course is still set to show green (see below) and I cannot find an equivalent selector in the Dressing stylesheet. It's as though the text color is ignoring the main stylesheet green setting, but using the the site-wide default (blue and red).

Any help is appreciated.

vintage-adventures.com

I think maybe I know what to do .. create stylesheet entries in the Dressing stylesheet for these classes:

li class="cat-top"
a class="cat-selected-text"
etc.

using the values I want, from the classic Zen Cart template stylesheet which uses these classes:

a class="category-top"
a class="category-subs-parent"
etc.

Am I on the right track to get category text back to green and bold green for the top level?

here is the code I now have on the bottom of the Dressing stylesheet to make the text green again w/ bold on active and number of items not bold. I also changed the border color of the box and you can easily use an image program such as GIMP to change the bullet images into a different color. Next I want to find a way of making the bulleted list items use a hanging indent .. not sure why they don't automatically do that like most bulleted lists.

#categories li.cat-top a {
color: #008000;
}

#categories li a.cat-selected-text {
font-weight: bold;
}

span.catCount {
color: #000000;
font-weight: normal;
}

The Cat Dressing list items use standard list-item styling, except applied to the <a> elements inside them; do you have the admin indents turned off? (Layout Settings > Categories separator between subcategories).

I don't recall that ordinary <ul> lists have hanging indents, but you could try a negative text-indent on the display: list-item; styling.

thank you for your message, Glenn.

https://www.vintage-adventures.com

yes, I did end up using negative text indent. Take a look. Turns out, when an image is used to lead in the bullet, the standard hanging indent feature of ULs is lost. Here is an excellent resource for list issues. http://www.alistapart.com/articles/taminglists.

so, what I did, was took out the stock Zen separators, and then applied positive padding and negative text indent to the top cat UL container inside of the overall UL container that could contain multiple top cat groupings. You really allowed for a lot of customization when you built this mod.

Leaving all bullet elements flush left, and using some color, I've got somewhat of a 'sliding' bullet menu now. The only downside I noticed is a difference in the number of pixels that FF uses between the bullet image and the first letter of text, which causes a slight difference in the amount of negative text-indent that would be needed for precision left-side flushness IE8 vs. FF. I tried to find a cross-browser solution to get the same left-side flush for both browsers, such as using 'outer' on the bullet and then pushing it all back in with margin or padding, but nothing else worked quite right, because I wanted the hyperlink area to go wall-to-wall inside the list, so what I've got is, I think, as close as I'm going to get.