I'm trying to create a CSS class called .bg-unit-color which will change depending on the taxonomy reference chosen

I've set up a course category taxonomy and then set up a color field within it using jQuery Colorpicker module. I've got to the point where I can render the color in my node--example.tpl.php file with the following:

$term=taxonomy_term_load($node->field_example_category['und'][0]['tid']); $category_color=field_view_field('taxonomy_term',$term,'field_example_category_color'); echo render($category_color); ?>

I've also used the drupal_add_css function in my template.php file, so this works:

$new_color='black'; drupal_add_css(".bg-unit-color {background-color: $new_color;}", 'inline');

However I can't marry the two together to create what I'd like to do which is this:

drupal_add_css(".bg-unit-color {background-color: $category_color;}", 'inline');

Any help would be massively appreciated. Thanks in advance

  • Can you provide a little more context on what you tried in the last example? What happened when you tried to do what you really want? Including the entire hook you wrote (or at least all the code for this part and the hook name) in template.php would be helpful. – acrosman May 6 '16 at 20:54
  • If I include all of the following in my template file, I just get the white screen of death. $term=taxonomy_term_load($node->field_example_category['und'][0]['tid']); $category_color=field_view_field('taxonomy_term',$term,'field_example_category_color'); drupal_add_css(".bg-unit-color {background-color: $new_color;}", 'inline'); – Rick May 6 '16 at 21:43
  • Also, I'm using jQuery Color picker for the color field – Rick May 6 '16 at 21:48
  • Are you putting the code into a function or just directly into you template.php file? – acrosman May 8 '16 at 21:45
  • @acrosman I was putting it directly into the template.php file. I've since been told I should be putting it into a function like <?php function mytheme_preprocess_node(&$variables) { } so that's my next step. Although I haven't quite got there yet – Rick May 17 '16 at 14:30

If using render you should attach the css to that render array.

$term = taxonomy_term_load($node->field_example_category['und'][0]['tid']);
$category_color = field_view_field('taxonomy_term',$term,'field_example_category_color');
$name = $term->name;
$category_color['#attached']['css'][] = array(
  'data' => ".bg-unit-color {background-color: $name;}", 
  'type' => 'inline',
  • Thanks for your answer Mikey. I can't get this to work though. The problem seems to be that the following code $term = taxonomy_term_load($node->field_example_category['und'][0]['tid']); $category_color = field_view_field('taxonomy_term',$term,'field_example_category_color'); causes a white screen of death when I put this in my template.php file – Rick May 7 '16 at 6:39
  • @Rick I got that code directly from your question so I'm not sure what to tell you. – mikeytown2 May 7 '16 at 18:02
  • I think the issue was that I need to put the code in a function like <?php function mytheme_preprocess_node(&$variables) { } ...wasn't doing that before – Rick May 17 '16 at 14:31

To update the classes on a node based on a field value you can use template_preprocess_node(). I would put my CSS into a file, have the file attached to all pages via the theme, and then set a class on the node's wrapping div:

function mytheme_preprocess_node(&$vars) {
  if($vars['node']->type == 'my_content_type') {
    $category_color=field_view_field('taxonomy_term',$term, 'field_example_category_color');
    $vars['classes_array'][] = drupal_html_class($category_color);

A non-code solution would be to use the Field Formatter CSS Class module.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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