Add css-class based on productpages' top level taxonomy term

Question

So I have a website (created with drupal 7) where each product is linked to a taxonomyterms. This was done so that all products can easily be divided into several different categories.

So I have a taxonomy that looks somewhat like this:

Top level item 01

• Level 2 item 01
• Level 2 item 02
• Level 2 item 03

Top level item 02

• Level 2 item 04
• Level 2 item 05
• Level 2 item 06

Every 'top level' term (or categorie) has links that need to be in their own color. For Example: The product that is linked to the term 'Top level item 01' and all linked subitems need to have 'red' links. While the product that is linked to the term 'Top level item 02' and all linked subitems need to have 'blue' links.

I was thinking of adding a css class somewhere in my theme so that I could do something like:

.red a { color: #f00; }

But I can't seem to find how I should do that. Can aynone help me with that?

Answer 1

Try something like this in your theme's template.php file (put it into MY_THEME_preprocess_page(&$variables) function):

if(arg(0) == 'taxonomy' && arg(1) == 'term' && is_numeric(arg(2))) {
    $tid = arg(2);
    $term = taxonomy_term_load($tid);
    $parent = taxonomy_get_parents($term->tid);

    if(empty($parent)) {
      $variables['classes_array']['parent_cat_color'] = $term->name;
      // or $variables['classes_array']['parent_cat_color'] = 'parent_cat_color' .. it's up to you..
    }
  }

and open page.tpl.php and put $classes variable into your wrapper div..

Answer 2

Add the vid (=vocabulary id) to the classes in field.tpl.php. Then you will have unique classes for every vocabulary and their childitems.

the vid is available in the $items-array.