6

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.

2

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

  • @indrock what about semantic fields. I read about it but failing to use properly..can u help? – sneha.kamble Nov 16 '12 at 7:52
  • what about semantic fields. I read about it but failing to use properly..can u help? – sneha.kamble Nov 16 '12 at 7:55
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.

  • Thanks for reply... I have already tried it ..it allows adding class but that class is not visible. As i want to use that class in my jquery , I need to check the position of class. – sneha.kamble Nov 16 '12 at 5:48
  • I'm not sure, what do you mean by class is not visible. If the module allows the addition of classes, you should be able to access it in your jQuery code by something like $('.classname').function(.... Or, you can see the edit for Field formatter class module. – AjitS Nov 16 '12 at 5:55
  • yes i can see the edit for Field formatter class module bt after adding class when i move to add content i am not able to get the class in inspect element. – sneha.kamble Nov 16 '12 at 6:07
  • 1
    These modules will only work if your fields are themed following Drupal standard practice. If they are not working, that suggests that something else is interfering with how fields are rendered. This might be your theme or another module. – Alfred Armstrong Oct 6 '14 at 14:12
2

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

);
0

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

0

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

Snapshot of manage display

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.