I have a custom view mode created with ds module, this view mode lists node articles, each article displays like this :

  • title
  • description
  • url
  • term reference field
  • some other fields...

I want to add some style condionally depending on the term reference field For example: the first article has the term reference with the value "1", I change the backgroud of the this article to "red" the second article has the term reference with value "2", I change the backgroud to "green" ...


this is an image how look like the manage display of some fields : enter image description here

My interest is with the Flag field: It's a taxonomy field reference having (title, color (hexadecimal value), description...) This flag field as you see has the formatter 'editable' (done with editablefieds module), so editors can edit the value of this field.

Now I want to add another field next to Flag witch is the color field of the current Flag taxonomy term, and render for example a simple div with some width and height and with the backgroun-color, this color field

Hope it's more clear than the old post :)

Thanks in advance.


2 Answers 2


This is pretty similar to How to provide template for particular view mode? where as you can add custom php code to add further variables used in that viewmode or add simple if/ else/ in_array to the used template (this is not limited to a custom template - you can always override the default node.tpl.php in your theme.

UPDATE: add only a css class depending on the term reference field.

// can also be THEME_
function MYMODULE_preprocess_node(&$vars) {
  if ($vars['view_mode'] == 'myviewmode') {
    if(isset($vars['node']) && isset($vars['node']->field_my_term_reference)) {
      // class to add a general has-term-reference-class
      $vars['classes'][] = 'has-term-reference';
      // add a specific term-reference-class
      foreach($vars['node']->field_my_term_reference as $tid) {
        // class based on term id
        $vars['classes'][] = 'term-id-' . $tid;
        // class based on term name
        $term = taxonomy_term_load($tid);
        $vars['classes'][] = 'term-name-' . $term->name;
  • thanks, but I wouldn't override the hole template, I want just to add some styling depending on the value of the term reference field? Mar 14, 2014 at 7:30
  • added code to add a css class based on the term reference field, feel free to comment out/ remove the classes you don't need. But this example should get you going. Mar 14, 2014 at 12:44
  • thanks for your update, it's very clear, but I have a problem here, the term reference field is already called, and now I want to call it another time, to get another field (sorry I didn't montioned this at the begining, I will make an edit for my question) Mar 14, 2014 at 15:15
  • I don't use editable fields, but the solution will be quiet similar, check the $node - dpm($node) using devel module to see the structure of that editable field, pass these variables to your template. if you dont want to use a class you will probably have to add another template for this specific viewmode to output the content of the editable field as background:*** Mar 14, 2014 at 15:55
  • 1
    there's default node.tpl.php in your theme folder or in modules/node/node.tpl.php that is used, you can copy the contents to a new file in your theme folder called node--mycustomviewmode.tpl.php and apply the hook suggestions mentioned here: drupal.stackexchange.com/questions/27025/… Mar 14, 2014 at 16:39

I would probably do this with javascript myself. However, if you want to do it with views alone, you can do this:

Duplicate all of your display fields so there are two of each.

Go into one set of these fields and add your custom CSS tags. Write the CSS in your theme for this tag that does what you want for one condition.

Go into the second set of fields and do the same thing but use new CSS tags with the CSS written for another condition.

Then, in each field of each set, set a condition on the display of these fields based on your reference field value. The fields will only show if the condition is satisfied. This doesn't scale well. If you plan to scale this for more than say, 3 conditions. Comment back and I can come up with another solution for N conditions. (The solution will not be as simple.)

  • How you can do this with javascript ? Mar 14, 2014 at 7:25
  • Add the term reference to the view, use CSS to hide the display of this field. Use javascript to switch the CSS after the page loads based on the value of the term reference field. If you want an example, you would have to show me the HTML for the page in question. Mar 14, 2014 at 14:11
  • Sorry I forget to tell you that I already call the term reference field in my view mode, and I want to be called twice to gather another field from the term and display it.. I'll upate the question to be more clear, thanks! Mar 14, 2014 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.