Changing color of Categories and Sub-Categories

[jettrue]

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?

[Sweet ZouZou]

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.

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

[gjh42]

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!

[Sweet ZouZou]

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

[gjh42]

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;
}

[Sweet ZouZou]

Perfect! Thx again Glenn

[burgundy]

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

[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.

[burgundy]

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

[gjh42]

Edit your /includes/templates/your_template/sideboxes/tpl_categories.php. Find this near the top:

// 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';
      } 

and add to your stylesheet:

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

in two places to get

// 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

// 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.