Using drupal_add_css to dynamically add inline CSS based on term reference

Question

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:

<?php
$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

Answer 1

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',
);

Answer 2

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') {
    $term=taxonomy_term_load($vars['node']->field_example_category['und'][0]['tid']);
    $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.