Add a CSS class to a certain text field for node display

Question

How can I add a CSS class to a certain text field? I have a content type, "Board Member", displaying thusly, see my screen shot below if it comes through... This is the node, not a view. The text for "BIO" is typical paragraph style and size. I want it slightly bigger. The field in the content type is a "Long Text with summary". The widget used is "Text Area with a summary". I don't see any way to assign a unique CSS style to it in Drupal. Investigating CSS here, Firebug only shows this:

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even">
<p>Lorem.....</p>

Why is it skipping showing that this field is the "bio". The other lines of text above it "Name" and "Board Member Role" were presenting unique classes and thusly I was able to format with css class rules to make them green and large.

I don't want to depend on the user to type in text with WYSIWYG exactly the same style with each of the board members, although that can be done since I've enabled that for FULL and Filtered HTML for that field. I just seems that I should be able to assign a CSS class to this field. I'll be using this field for TEACHERS and STAFF later on as well.

Thanks for the help.

Dave N

Answer 1

Another option would be to use Display Suite if you didn't want to use hooks in template.php.

This would allow you to add the class directly from the content type edit page, this would probably be a little easier to manage if you started adding more classes to other fields.

1. After downloading Display Suite, you would need to enable: Display Suite, Display Suite UI, Display Suite Extras.

2. Then go to /admin/structure/ds/list/extras and check Enable Field Templates

3. Go to your content types manage display page and use the "Select A Layout" dropdown, this will enable display suite for that view mode under that content type.

4. Arrange your fields as needed and click the gear button to the right of the field and select Field Template: Expert

5. Check "Field Item" or any of the wrappers and add a class and an element and you're done.

It may seem like a lot to do to complete your specific task but it will make your life much easier in the long run. I haven't built a single site without display suite since I discovered it.

Answer 2

You can implement hook_preprocess_field() in your template.php file. Here you can check for the field name and add the class you want. Refer here

Answer 3

If I am understanding you, you want the paragraph with the "Lorem....." text wrapped in a class.

You could skip the wrapper and selector the element with:

• .wrapperClass:last-child
• .boardMemeberRoleClass + p

You could hard code it with the jQuery wrap function:

$( "SELECTOR" ).wrap( "<div class='bio'></div>" );

The SELECTOR could again be:

• .wrapperClass:last-child
• .boardMemeberRoleClass + p