Drupal 7 Fields CSS

Question

I'm having trouble customizing the CSS for a content type I'm developing. Here's an example of what I'm trying to accomplish:

• Field Name = Appetizers
• Value 1 = Appetizer1 Name <div class="field-item even">
• Value 2 = Appetizer1 Price <div class="field-item odd">
• Value 3 = Appetizer1 Description <div class="field-item even">
• Value 4 = Appetizer2 Name <div class="field-item odd">
• Value 5 = Appetizer2 Price <div class="field-item even">
• Value 6 = Appetizer2 Description <div class="field-item odd"> etc...

In this case, if I want to style all Prices, I'd look to style field-item odd but I'd end up styling Name & Description as well.

Ideally, I'd want to have a class for Name, Price and Description. So I changed the field input format to Full HTML and started wrapping the value contents in those classes - but the markup looked pretty sloppy.

Essentially: <div class="field-item even"> <div class="appetizer-price">

In that case I wouldn't have any styling applied to field-item even, so it seems like a waste to even have it in the first place. Why not just have my custom class only?

Is there a best practice for assigning a class on the value level? Preferably where I can override the field-item odd / field-item even assignment.

Answer 1

You can implement a field theme function in the template.php file of your theme, like this:

// Assuming that the field name is "field_foo".
THEMENAME_field__field_foo() {
  // Implementation...
}

See the default theme_field implementation as a starting point. In your case, you probably want to give different values to the $classes variable depending on the $delta.

As an alternative, you could implement a custom field template by copying the file modules/field/field.tpl.php to your theme's folder and renaming it to field--field_foo.tpl.php. Again, see the description of theme_field and comments for examples.

Another option: if you hate coding or are in a hurry, use the Field Templates extra functionality bundled with the Display Suite module (even though I don't think it covers your specific need).

Answer 2

Would using Views to output your content suit your situation?

If so, I suggest using the built-in facilities in Views that can add CSS classes to your fields based on variable-data - i.e. tokens, from the fields.

Follow the usual procedure to create a view to show your content type. Once you have created the view, for my solution to you, you would start from here:

admin/structure/views/view/<insert your view name here>/edit

Under fields, right-click on the field that you want to customise the CSS for. In the pop up you can control the markup output of both the wrapper and/or the content itself and construct CSS class names based on the field name or the content in the field itself.

See my example below:

Here you can see I am adding a CSS class generated from variable data using the tokens that are available - for a full list, expand the 'rewrite results' section, check the box 'rewrite the output of this field' and then click to expand the 'replacement patterns' subsection to see the available tokens. (NOTE: Don't forget to uncheck 'rewrite the output of this field' as you wouldn't be using it for this particular case - it was just to see the available tokens.)

Then in your theme, you can style the content, e.g. in my example, in stylesheet.css for my theme, the fragment of code added to it would be:

.label.label-actualfieldvalue {
    background-color: darkcyan;
}

(where actualfieldvalue is a value that can occur in that field.)

Also, someone else has provided an answer for a similar problem here: Customizing a View with Taxonomy, color coding and icons

Answer 3

I've stumbled across this module, which appears like it could do the job.

http://drupal.org/project/fences

Details from its project page:

Fences is a an easy-to-use tool to specify an HTML element for each field. This element choice will propagate everywhere the field is used, such as teasers, RSS feeds and Views. You don't have to keep re-configuring the same HTML element over and over again every time you display the field.

Best of all, Fences provides leaner markup than Drupal 7 core! And can get rid of the extraneous classes too!

This kind of tool is needed in order to create semantic HTML5 output from Drupal. Without such a tool, you have to create custom field templates in your theme for every field.