how to get css "background-color" value from content types

Question

I have a custom type, and I want to set background-color of it,when end user choose the color in add content page, example : set background-color : black , I want get this value from database, and set style in my theme. how to do this?

Answer 1

Drupal 7

What you can do is have a field or just for an example a simple textfield and you can use hook_node_view() or template_preprocess_node() to get the color value and use drupal_add_css(). An example would be like:

OPTION 1 - Module layer

/**
 * Implements hook_node_view().
 */  
function YOURMODULE_node_view($node, $view_mode) {

  // We check if the user is viewing the node/page in it's full view
  if ($view_mode == 'full' && $node->type == 'page') {

    $field = field_get_items('node', $node, 'field_background_color');

    // Check if the field has a value
    if ($field) {

      $color = field_view_value('node', $node, 'field_background_color', $field[0]);

      // We specify the type to inline and group so it would override any style.
      drupal_add_css("#main-wrapper { background: {$color['#markup']}; }", 
        array('type' => 'inline', 'group' => CSS_THEME)
      );
    }
  }
}

OPTION 2 - Theme layer

/**
 * Implements template_preprocess_node().
 */  
function YOURTHEME_preprocess_node(&$variables) {

  // We check if the user is viewing the node/page in it's full view
  if ($variables['view_mode'] == 'full' && $variables['type'] == 'article') {

    // Get the node object to be used later
    $node = node_load($variables['nid']);

    $field = field_get_items('node', $node, 'field_background_color');

    // Check if the field has a value
    if ($field) {

      $color = field_view_value('node', $node, 'field_background_color', $field[0]);

      // We specify the type to inline and group so it would override 
      drupal_add_css("#main-wrapper { background: {$color['#markup']}; }", 
        array('type' => 'inline', 'group' => CSS_THEME)
      );
    }
  }
}

Answer 2

As an addition to @Leoland Tan's answer I'd like to mind that probably all that needs to happen here is to add the value of the "Background Color" field as a CSS class to the node. And then do the styling inside your CSS files.

---

Drupal 7

Inside template_preprocess_node you first have to retrieve the corresponding field's value and then add it to the ['classes_array'] of the $variables to let that happen dynamically.

In the following sample I retrieve the value of a select list and then add it as CSS class.

/**
 * Implements template_preprocess_node().
 */
function MYTHEME_preprocess_node(&$variables) {

  $field_name = 'field_select_list';

  $node = $variables['elements']['#node'];
  $field = field_get_items('node', $node, $field_name);
  if (is_array($field)) {
    foreach ($field as $item) {
      $variables['classes_array'][] = $item['value'];
    }
  }
}

Presuming the select list field had foobar selected, this is what the node wrapper then looks like:

<div id="node-3" class="node node-article node-promoted foobar node-full clearfix" about="/node/3" typeof="sioc:Item foaf:Document">

---

Drupal 8

/**
 * Implements hook_preprocess_HOOK().
 */
function MYTHEME_preprocess_node(&$variables) {

  $field_name = 'field_select_list';

  $node = $variables['node'];
  if ($node->hasField($field_name)) {
    $field = $node->{$field_name}->getValue();
    if (is_array($field)) {
      foreach ($field as $item) {
        $variables['attributes']['class'][] = $item['value'];
      }
    }
  }
}

Presuming the select list field had foobar selected, this is what the node wrapper then looks like:

<article data-history-node-id="5" data-quickedit-entity-id="node/5" role="article" class="contextual-region foobar node node--type-article node--promoted node--view-mode-full clearfix" about="/node/5" typeof="schema:Article" data-quickedit-entity-instance-id="0">