2

I'm fairly new to Drupal and I want to add a custom CSS class to a custom field in content type.

I've created a content type called 'custom page' and I have a field called 'custom_page_main_title' the only thing I would like to do is to add a custom CSS class or iD to this

How can I do this please? Thanks!

1
  • Are you using a custom theme? – Lester Peabody May 8 '12 at 20:53
1

I wrote a blog post about this a little while ago. It mostly serves as a reference for understanding the method for targeting the markup for specific fields in specific content types utilizing theme functions in template.php which is stored in your theme's directory.

Definitely check it out. If you can understand it, then in the future changing any of the HTML for particular fields, including the classes generated, becomes trivial.

To bring the pertinent content from my blog post into this thread, we have the following function in template.php:

function theme_field($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
  }

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

  return $output;
}

What you would do would be to replace the word theme in the function name to the name of your theme, and since you're targeting a specific field in a specific content type, you would append to the word field in the function name with __custom_page_main_title__custom_page. So the function would look something like:

function themename_field__custom_page_main_title__custom_page($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
  }

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

  return $output;
}

Now you need to decide where in the structure of the field the class needs to be added, so perhaps add that on as an addition to your original question.

4
  • Are you sure this can't be addressed with a preprocess function? It is way simpler and avoids the theme duplication maintenance burden. – Capi Etheriel Jun 11 '12 at 17:59
  • btw, here's another guide: atendesigngroup.com/blog/adding-css-classes-fields-drupal – Capi Etheriel Jul 21 '12 at 11:47
  • Interesting post, that does seem much more efficient and clever. One question though: in his post, he makes a reference to $field but that variable is never once defined in his code example. Any idea what that's all about? – Lester Peabody Jul 21 '12 at 11:56
  • Yeah, that's an error. The author actually means $name (or $vars['element'][#field_name]). – Capi Etheriel Jul 21 '12 at 17:26
0

The best way is to create your own theme, then check the html generated and update the theme css, a good point to start is using Fusion theme.

Another option is using a module called CSS Injector.

0

You could install Display Suite It gives you an option to append class to each field in your custom content type.

2
  • which module of display suite do you need to enable for this feature? – Vincent Mar 20 '14 at 14:38
  • I might be wrong but enabling display suite, display suite extras and display suite UI should be sufficient. – Ajay Kotian Mar 21 '14 at 16:43
0

There's a very simple module called Field Formatter CSS Class that does exactly this. When activated it allows you to add a CSS class to your field via the Manage display tab of your content type.

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.