2

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?

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)
      );
    }
  }
}
0

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">

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.