Drupal 7 Field Formatter CSS Class Module

By shane
Tue, 2013-01-08 23:50
Daily Dose of Drupal Episode #83

The Drupal 7 Formatter CSS Class module (not to be confused with episode #82 and the Field Formatter Class module), can be used to add a CSS class to the display of a node based on a specific value in that node. For instance, it can be used to add a class based on what the user selects for a dropdown value when creating the piece of content.

In this episode you will learn:

  • How the Drupal 7 Formatter CSS module differs from the Field Formatter Class module
  • How the Drupal 7 Formatter CSS module can be used to add CSS classes based on the value of a Select box on a content type

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 83. As always I’m Shane, you can go ahead and follow me on Google +, also find me on Twitter at smthomas3 and go to codekarate.com and sign up for the newsletter. Yesterday if you watched episode number 82 we talked about the Field Formatter Class Module.

Today we’re going over the Field Formatter CSS Class Module. So as you can tell the names of the module are very similar and they have a somewhat similar purpose but there is a distinct difference and we’re going to go over what that is and how you can use the Field Formatter CSS Class Module on your Drupal Sites.

So the Field Formatter Class Module that we went over yesterday, well this one will allow you to change or add a class around a specific field item. So for instance we can change a class around this wrapper div or give this wrapper div a specific CSS Class. The Field Formatter CSS Class Module; it allows you to change a class around the higher node so the entire node here but have it be based on a specific value set in one of these fields.

So depending on the value set and for example maybe this field or this field you can change a class that wraps this entire node. This isn’t necessarily just for nodes, it can also be used on field collections using the Field Collection Module or Fieldable Panels Panes and it works with text fields, list fields, bullying fields and taxonomy fields.
Today we’re just going to look at the list field because if you didn’t do it with the one you’ll understand how it works and you can use it with any of those 4 fields. So we’re going to go ahead and get started; as you can see I have a simple article content type with this Status Field.

I’m going to go ahead and show you how that was built; simply go to the content type and manage fields on the article content type and you will see that I have added a field for status. This is called Field Status, it’s a list field that contains text and it is a Select List Widget. I have a list of key value pairs for the allowed value.

These are Needs Review ready to be publish or article publish and this is just one example of how I thought of an idea of how to use it, you may think of many of your own once you understand how it works. In this case let’s assume that this article needs to be reviewed by multiple people so this is a separate mechanism than just a published checkbox. Let’s say maybe an editor needed to review it and change the status before someone actually change this article to publish and then check the publish checkbox. You know obviously you can use your imagination here and figure out how it could apply to other scenarios that you may need it.

The trick is you come into the Manage Display tab and you find the field that you want to be able to control the CSS Class and you change the format from the default to this new CSS Class format. So once I’ve change this and save it, now keep in mind I have added a little bit of CSS and I’ll show you and as you can see the Status Field is gone and now I have this green bar on the side which I’m just using that as a simple example of how you could use that CSS Class to give a visual indicator of the Status.

And as you can see it applies to the entire node, not just one field. So I changed it to In Review instead of ready to publish, save it, it has a different color. This is all driven off of one class. So if you look at this Div that wraps this entire node you can see it has a list of classes. Node, Node-Article, Node-promoted and the important one here Needs Review.

In this class is just that Value from that dropdown so I go ahead and change it back to Ready to Publish and I save it. Now it changes to green and you can see there’s a class called Ready to Publish on this node.

You can see my CSS right over here, I just simply have it adding a border … a green border with a little bit of adding … I just threw that together really quickly as an example, you can of course change that to whatever you might need. If I change the Status then to Article Publish I don’t have any CSS applying to this specific class so then it makes the article look normal without any bar on the side or any type of indicator. Of course we’ve changed the Field Formatter for that field back to the default.

It’s not going to have this CSS Class down here and thing will be back to just the normal way it displays with the Status Field displaying as text. So as you can see the Field Formatter CSS Class is a pretty powerful little module if you need to change the display or styling or theming of an entire node based on a specific field.

So I’m sure you can use your imagination and find many ways that this could be useful on your next Drupal Project. If you have any questions or you have any other ideas for future Daily Dose of Drupal modules, go ahead and contact me on codekarate.com and I will see you next time. Thanks for watching.

Need to learn more Drupal?

Premium Drupal Training Online (Horizontal)


Does this work in views with tables or grids?

I have been looking for a way to put a class around uploaded files list, so I could style it from the basic look and this did the trick.
Thanks a million for posting this.

these tips have been right on the money for me.

Thanks for pointing this out. This has been fixed.

Found my problem...

I'm using the views module. In order to pass the css property captured with the Field Formatter CSS Class module through to the Views module, you have to do the following:

> Go to ../admin/structure/views and edit the view that's displaying the field(s) where you want the css to be applied

> In the "Fields" section, add the content field that's capturing the css class (in my case it was Content: Style)

> On the configuration page, uncheck the "Exclude from Display" box and set "Formatter" to Key (if using Select List as in the video), then click apply

> Next, edit the field that you'll want the CSS class to be applied

> On the config page, in the "styles" section, check "Customize Field HTML" and then check "Create a CSS class"

> In the "CSS class" textbox enter the token from the field that holds the css class (note: the token should be the name of the field like this [feild_fieldname] - mine was [field_style])

> The select apply and it will pass the css class through

Hope that helps...

BTW, thanks for your great videos Shane, keep it up!

I love the idea and thought it would be easy after watching the video. So I followed all shown steps...but whatever I do...from all options I would like to provide only one shows up in the selected list pulldown.

When I add the following options to the 'Allowed values list':

and save this...
In the end there will be only one option in the presented dropdown which shows when you want to create a new page?!

It is driving me crazy, what can I be missing?

Follow up on my previous comment:

After lot's of trial and error I noticed that I have used 'background' like silly. It should of course be


But...after adjusting this...there still isn't a class added to the of to the Node.

There is the possibility to choose a color...like in my mentioned example...but whatever color I choose there is no class added somewhere.

What am I missing this time?

Post new comment