Changing color of Categories and Sub-Categories

Greetings, I would like to change the color of my MAIN categories, the color of my sub-categories, and the color of my sub-sub-categories...

View the attached image for an example of what I want.
Thanks for the help!

[IMG]http://img184.imageshack.us/img184/6111/help2zq0.th.jpg[/IMG]

Top categories can be styled by calling on

a.category-top { color: #001122; }

and subcategories can be styled with

a.category-subs, a.category-products { color: #001122; }.

There is not a facility built in to distinguish sub-subcats, but you could code it in tpl_categories.php.

gjh42:

Top categories can be styled by calling on

a.category-top { color: #001122; }

and subcategories can be styled with

a.category-subs, a.category-products { color: #001122; }.

There is not a facility built in to distinguish sub-subcats, but you could code it in tpl_categories.php.

I love you. Thanks for the swift responses!! :clap:

I have been fighting this for weeks. I am pretty good at CSS and untangling other people's but I am stumped as to how to change the color of my categories at the top of my website. I have tried everything. Here is the coding from the stylesheet:
A.category-top, A.category-top:visited {
color: black;
text-decoration: none;
font-size: 15px;
}

I tried to change it to black. No dice. It is still grey (too light a grey might I add). What am I doing wrong? Should I change the A to a? :frusty:or what. Gahhh!

Here is my website: http://www.possets.com I am trying to change the categories at the top : Classics, Naturals, Seasonals, etc.

fabienne:

I have been fighting this for weeks. I am pretty good at CSS and untangling other people's but I am stumped as to how to change the color of my categories at the top of my website. I have tried everything. Here is the coding from the stylesheet:
A.category-top, A.category-top:visited {
color: black;
text-decoration: none;
font-size: 15px;
}

I tried to change it to black. No dice. It is still grey (too light a grey might I add). What am I doing wrong? Should I change the A to a? :frusty:or what. Gahhh!

Here is my website: http://www.possets.com I am trying to change the categories at the top : Classics, Naturals, Seasonals, etc.

In your stylesheet2:

#navCatTabs ul li a {
color:#9a9a9a; <- this one is controlling the color
}

HTH,
Shirley

deep breath Ok. I did do that and it changed my page quite a bit. So, I think I should ask the first question, why are there two stylesheets, stylesheet.css and stylesheet2.css? Is it just so your site can come with options, hook up one or the other? My site calls out both sheets, but when I modified stylesheet2 some of the text got much smaller, the background went black (I was trying to change the category text to black). So....

I thought that stylesheet was controlling the categories.

I will admit that I had tried to get rid of stylesheet2 about a month ago and did manage to get off all of the duplicate elements but got scared to eliminate it entirely. Somehow it seems to be overriding stylesheet in some elements. What does stylesheet2 control? I am a bit unfamiliar with the parts of Zen Cart being controlled here and thing it wisest to ask the experts. Thanks.

I am a bit confused here.

I am bumping this because I am still curious about the question of stylesheet vs. stylesheet2. Why are there two, can they be combined? Also, I have not quite gotten to the bottom of my original question and thought I would ask again. Thanks for any help you can give on this.

fabienne:

I am bumping this because I am still curious about the question of stylesheet vs. stylesheet2. Why are there two, can they be combined? Also, I have not quite gotten to the bottom of my original question and thought I would ask again. Thanks for any help you can give on this.

Having a stylesheet.css and stylesheet2.css is not default zen cart behavior. Someone working with your site put the stylesheet2.css up there. Perhaps stylesheet2.css is just a copy of the original stylesheet? If so, just delete it from the server. anything named stylesheetXXXXX.css that is on the server in the css/ folder will be auto loaded with zen cart. If you have two up there, and they are duplicates, then changes in ONE will not show up, because the original is still there. That may be the source of your frustrations.

Well, the foul fiend who put up the Zen Cart and the extra stylesheet2 was...me! Honest, that's the way it came. They were not exactly the same and that is why I was a bit loathe to just can stylesheet2, scared of what will happen if I did.

Of course, after much dithering, I just went in and renamed the stylesheet2 to see what would happen and be able to quickly put it back in if it all blew up. All my changed appeared and my site looks much much better and more readable. So, I will just leave things that way for a while and see if I need anything from stylesheet2. If not I will can it.

Thanks so much for giving me the push I needed. I was afraid you would say that stylesheet2 contained all the most valuable information of all and etc.

The question remains as to where the stylesheet2 came from. There is no such thing in standard Zen Cart; someone (was it you in early experiments?) added it. Any changes there can just as well be put in stylesheet.css if they are actually needed.

gjh42:

The question remains as to where the stylesheet2 came from. There is no such thing in standard Zen Cart; someone (was it you in early experiments?) added it. Any changes there can just as well be put in stylesheet.css if they are actually needed.

Perhaps there's a template out there that has two stylesheet files on accident? What template are you using fabienne?

I am trying to set the top category color different than and the subs and products. I have tried several variations of the code below with no luck. I can set the navColumnOne color, but then the top category, subs and products are all the same color.

https://www.sweetzouzou.com

a:link, #navEZPagesTOC ul li a:link, #navTOC ul li a:link, #navMain ul li a:link, #navSupp ul li a:link, #navCatTabs ul li a:link {
color: #f00;
text-decoration: none;
}
a:visited, #navEZPagesTOC ul li a:visited, #navTOC ul li a:visited, #navMain ul li a:visited, #navSupp ul li a:visited, #navCatTabs ul li a:visited {
color: #f00;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #000;
text-decoration: none;
}
a:active, #navEZPagesTOC ul li a:active, #navTOC ul li a:active, #navMain ul li a:active, #navSupp ul li a:active, #navCatTabs ul li a:active{
color: #000;
text-decoration: none;
}

#navColumnOne .category-top a:link {
color: #FFD700;
text-decoration: none;
}
#navColumnOne .category-top a:visited {
color: #FFD700;
text-decoration: none;
}
#navColumnOne .category-top a:hover {
color: #fff;
text-decoration: none;
}
#navColumnOne .category-top a:active {
color: #fff;
text-decoration: none;
}

Thx Sweet

If you are wanting to modify the categories sidebox colors, none of the code you have posted will work.

For starters,
#navColumnOne .category-top a:link {
is not valid, because it applies to links inside an element with class category-top.
The links themselves have class category-top, so you would write them like this:
#navColumnOne a.category-top:link {

Better than specifying #navColumnOne, use this to specify the categories sidebox wherever it is:

#categories a.category-top {color: #112233;}
#categories a.category-subs {color: #223344;}
#categories a.category-products {color: #334455;}
(You don't need to repeat "text-decoration: none;" because it is inherited from the original a:link {} declaration; and you actually shouldn't need the #categories in your case.)

I realize you only have navColumnOne, but it is good practice to use meaningful code wherever possible, and "categories" means more in this case than "navColumnOne".

#navCatTabs applies to the header categories-tabs menu, which you are not using.

By the way, I like your approach to presenting only exactly what is needed to use your site, without distracting gewgaws. I understand the work it took to look so simple. Nice design!

Thx Glenn. I am getting close to posting the site up for review in a week or 2 and I am glad to get your opinion. I know you have seen a thousand+ websites in process so the props are greatly appriciated!

I was able to get the color changed for the a.category-top and a.category-products but the a:link, a:visited, a:hover and a:active are giving me fits. The below css does not change the link color or decoration. Nothing happens when mouse over.

a.category-top {
color:#FFD700;
}
a.category-top a:visited {
color:#FFD700;
}
a.category-top a:hover {
color: #fff;
}
a.category-top a:active {
color: #fff;
}

a.category-products {
color: #fff;
}
a.category-products a:visited {
color: #fff;
}
a.category-products a:hover {
color:#fff;
text-decoration: underline;
}
a.category-products a:active {
color:#fff;
}

Thx, Sweet

Remove the second "a" and tighten the :visited etc. up to the products:

a.category-products {
color: #fff;
}
a.category-products:visited {
color: #fff;
}
a.category-products:hover {
color:#fff;
text-decoration: underline;
}
a.category-products:active {
color:#fff;
}

Perfect! Thx again Glenn

gjh42:

Top categories can be styled by calling on

a.category-top { color: #001122; }

and subcategories can be styled with

a.category-subs, a.category-products { color: #001122; }.

There is not a facility built in to distinguish sub-subcats, but you could code it in tpl_categories.php.

Could a kind hearted soul tell this completely clueless soul how I can code this? I'd really appreciate it! I've changed the color on my sub-categories successfully, but I have one sub-category that has a sub-category and it's hard to distinguish, so I'd like to have it a different color. Thanks

Denise

That won't be hard, but I can't do it right now.
Post a link to your site and I'll take a look at it when I have time.

gjh42:

That won't be hard, but I can't do it right now.
Post a link to your site and I'll take a look at it when I have time.

Thanks Glenn, I greatly appreciate that!

Site is http://www.satinweddingcompany.com

Denise

Edit your /includes/templates/your_template/sideboxes/tpl_categories.php. Find this near the top:```php
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}

 . (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': ''

in two  places to get```php
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs' . (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': '';//class .category-subs2 for sub-subcat
        break;
      default:
        $new_style = 'category-products' . (substr_count($box_categories_array[$i]['path'],'_') = 2)? '2': '';//class .category-products2 for sub-subcat
      }
```and add

a.category-subs2, a.category-products2 {color: #336699;}

This will strictly make new classes for second-level subcats, no more, no less.
A simpler mod that will distinctly identify all levels of subcats is to add

 . substr_count($box_categories_array[$i]['path'],'_')

to get```php
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;
      case ($box_categories_array[$i]['has_sub_cat']):
        $new_style = 'category-subs' . substr_count($box_categories_array[$i]['path'],'_');//class .category-subsx for subcat level x
        break;
      default:
        $new_style = 'category-products' . substr_count($box_categories_array[$i]['path'],'_');//class .category-productsx for subcat level x
      }
```and replace the 

a.category-subs, a.category-products {}

in your stylesheet with

a.category-subs1, a.category-products1 {color: #7733ff;}

a.category-subs2, a.category-products2 {color: #336699;}

etc.