How to add a CSS class to fields in Drupal 7?

Question

I want to add a CSS class to the HTML output of each field in my field collection.

Please recommend me some module or method to achieve this. I have tried the Fences and Field Formatter Class modules but they did not work.

Answer 1

You could use hook_preprocess_field() in which you can define additional classes for your fields.

Check these to get some idea:
http://atendesigngroup.com/blog/adding-css-classes-fields-drupal
https://gist.github.com/1184302

Answer 2

You should try Field Formatter Class module.

This module allows site administrators to add classes to the outer HTML wrapper for any field display.

Classes can be specified at the Manage display settings for content types, users and other entities.

OR

The Field Formatter CSS Class module.

The Field formatter CSS class module allows you to set any text/list/option field to render as CSS class on the node. This enables the node author to select predefined CSS styling per node.

Answer 3

By following way, you can add class to a form field:

$form['crust_size'] = array(
  '#title' => t('Crust Size'),
  '#type' => 'select',
  '#description' => 'Select the desired pizza crust size.',
  '#options' => array(t('10"'), t('12"'), t('16"')),
  '#attributes' => array('class' => array('my-class')),

);

Answer 4

I would suggest using the Display Suite module, this will allow full ability to control the classes and markup on fields in your view modes. It also allows for better flexibility for layouts

Answer 5

Yes you could achieve this via Display suite module after installing the module. Here is good tutorial for it.

1. Go to manage display of your content type below the manage display form there is a layout option provided by display suite.
2. Select the layout wish and save it.
3. Now you could see a small settings in right side of each field as show in the below screenshot.
4. In choose field template select expert if you want to alter class and html tag wrapped around the field
5. If you just want to add class to fields here is a tutorial for it