By Gerben Zaagsma on

I would like the achieve the following and wonder if it could be done:

I am building a portal where each entry is tagged with terms from 5 vocabularies. Would it be possible to give each of these vocabularies (when displayed in a node page) a different background color?

Example: I have a node which is tagged with the term 'France' (from vocabulary countries), the term 'French' (vocab languages), and the topic 'history' (vocab information)

I would like these terms to have a different background color based on their vocabulary.

Gerben

⋅ Categories: Drupal 6.x

Comments

WorldFallz’s picture

WorldFallz commented

Yes this can be done, probably a couple of different ways. The first thing that pops into my mind is to edit the page.tpl.php file, use taxonomy_node_get_terms to get the terms for the node, do a switch case for each term you wish to set the bg color for, then append a class to the body tag based on the term, and style with css in your theme's style.css file.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

Gerben Zaagsma’s picture

Gerben Zaagsma commented

Thank you very much for the answer, sorry for late reaction.

I have never gone beyond CSS editing so this is a bit new for me, lloks like I need a crahs course in PHP :-)
Have been looking for information in various places and wonder if you get help a bit. To be clear about one thing: I want to change the background color per vocabulary and not per term.

"The first thing that pops into my mind is to edit the page.tpl.php file, use taxonomy_node_get_terms to get the terms for the node, do a switch case for each term you wish to set the bg color for"

If I understand correctly I need to call the function in the page.tpl.php file and add the correct switch statements there? How do I call the function? And could you maybe give one example of such a statement (already found manuals on the php.net site but learning here).

"then append a class to the body tag based on the term"

This is somewhat unclear to me.

"and style with css in your theme's style.css file."

Ok, that's clear.

sorry for the questions, I am a fast learner once I begin to understand but this is really new..

Thanks a lot,
Gerben

WorldFallz’s picture

WorldFallz commented

I want to change the background color per vocabulary and not per term.

Maybe i misunderstood-- which background color do you wish to change? the term itself or the node? If the node, which background color will you use in the case where there are multiple vocabularies present on the node?

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

Gerben Zaagsma’s picture

Gerben Zaagsma commented

Sorry for the confusion, I mean the term itself.

So if I have one node with term "France" and another with term "Germany", both belonging to the vocabulary countries, then both terms need to have the same background color. It is also possible that one node has multiple terms from vocabulary countries but I imagine that should not be problematic.

This is for a site where each entry/node will have tags from 5 vocabs and we'd like to visually distinguish them.

Meanwhile started reading those PHP manuals..

Thanks,
Gerben

Gerben Zaagsma’s picture

Gerben Zaagsma commented

After some reading up on this I figure I need to call the function like this in the page.tpl.php file:

function taxonomy_node_get_terms($node, $key = 'tid')

switch ($country) {
case "Germany":
    echo "country is Germany";
    break;
case "France":
    echo "country is France";
    break;
case "Belgium":
    echo "country is Belgium";
}

My problem is where in the page.tpl.php I should put this code.
And how to link this with a class to the style sheet.

Again sorry for possibly being confusing. I spent some hours on reading and experimenting and feel I get some pieces of the puzzle but how to make everyhting fit together...

Best,
Gerben

Gerben Zaagsma’s picture

Gerben Zaagsma commented

I found another way of achieving the same thing with CSS. It is not perfect but works quite well.

I found out that with CSSEdit for the Mac it is possible to create a CSS style for a specific element, in this case a taxonomy term, which looks like this:

div.node-inner div.taxonomy ul.links.inline li.taxonomy_term_1 {
background-color: #B0C4DE;
}

I simply copy this line and change term number: all terms related to a country get same color (for example, numbers 1-20 for countries, 21-40 for languages). For convenience, I group them according to vocabulary in my style sheet. It means that you have to repeat a line for each term but it still works quite fast and does not require the php hack (though that still interests me but at the moment I lack the skill to implement it correctly).

Best,
Gerben

WorldFallz’s picture

WorldFallz commented

cssedit may provide a convenient user interface for creating that selector, but its just a standard css selector. I didn't realize you already had classes you could hook onto for your terms. All i was recommending to do with the php was to create those classes (which is seems you don't really need since they exist already)-- you would still have to do the actual styling with css. And if you want different styles for each term there really isn't way to do it without a separate line for each element/color (unless you want to do some hacky inline styles with php).

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

Gerben Zaagsma’s picture

Gerben Zaagsma commented

I actually didn't have classes until I realised yesterday I could make them with CSSEditor. This was more or less coincidence as I was working on other design issues. I first spent half a day on your php advice. To be clear, thanks for that help! The problem was simply that I am a beginner in PHP and could not get it to work therefore.