Skip to main content

How to add a custom class to a view row ?

Problem: I have a node default field called 'published' which is an list integer checkbox. When using Views to display a list of this content, I would like to add a css class to the item wrapper when that value is 1 like so:
  • Answer: If you want the boolean to display as "true" or "false," for example, you'll need to set an "On value" and "Off value" for the boolean under Structure / Content Types / {Your Content Type} / Manage Fields / {Your Field}. Then you'll want to use "Default" instead of "Key" as your Formatter in views. This is the same for the node default options field like (published, sticky etc). For our specific example, let's assume the content type we're pulling in is called News Articles and the field we're interested in adding as a class is called Featured. Here's a step-by-step tutorial: Go into Structure / Content Types / News Articles / Manage Fields / Featured and set the "On value" to featured. Leave the "Off value" blank. Save settings. Edit your view and click on Format / Settings. Under row class, enter [field_featured]. Apply. Still in your view edit area, click on Fields / Featured. Make sure the formatter is set to Default. (I also use "Exclude from display" since I don't want this appearing anywhere else in my markup.) Inspect your list to make sure you've got the "featured" class on items you want featured, then save. This method avoids editing the views row template, which is nice because it's theme independent this way. You can load up a different theme and you'll still be adding the "featured" class to the same place. source: http://stackoverflow.com/questions/12475699/how-to-add-class-name-progr…
    views custom-class