I have a content field called Featured 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:

<li class="views-row views-row-1 views-row-odd views-row-first featured">

I suspect editing the views row template would be one option, although I do not know how to achieve this, and since this is the only change I need to make, is there an easier way?

  • do you need add some style to your first li element? – cigotete Sep 21 '11 at 15:16

The question is a bit old, but i was looking for the same.

My answer is for drupal 7 / views 3.5, not sure if it works on previous versions.

You can use some field replacement patterns when specifying the classname for the row (in the view edit : Format / Settings / Row Class )

To do so, on the same settings page you may have to check the box 'force using fields'

You then have to make sure the field you want to use is added to the fields section of the view edit

To know what pattern you can use, click on the field in the fields section and go to 'rewrite results' / 'rewrite the output of this field', there is a 'replacement patterns' block that will show you the available patterns.

hope that help, I'm still stuck though by the fact that the string you will get is not class friendly and may contain spaces.

  • To make the string 'class-friendly', you can use field rewriting for your field of interest… – julou Feb 18 '14 at 8:41

The answers here so far don't answer the question as we're specifically looking to include the value of a field within the views row within the markup of the views row wrapper element. The suggestions so far cover adding a class to the entire view's wrapper or giving a class to a field within the row, which isn't quite right.

Making a views template is a matter of clicking "Theme: Information" (Views 3) and you'll be presented with a list of candidate file template names. Create a new file in your theme with a name more specific than the currently used template (highlighted in bold) then click "rescan template files" or clear the cache.

Sample template files that you can C&P from are in the Views module (of course), look in your "sites/all/modules/views/theme" folder.

Actually creating the Views row template is not particularly hard, so finding "an easier way" might be tough :P

That said, depending on your use case you might just want to exclude all the fields from display, then create a "global: custom text" field and use a token replacement for your "featured" field in a wrapper div/span inside this custom text and drop your desired content within that to create a "row within a row" kind of effect.

  • I do know how to use views templates, but I do not know how to get a field value as a class based on it's value. – Diane Sep 22 '11 at 10:02
  • I think this answer applies to the overall list of views, but the question asker is actually looking to be able to style the items of a field list within content, not the overall list. – therobyouknow Jul 12 '13 at 15:33

As developpeur 2000 suggested, one way to add a class to these rows is to edit the view and go into Format / Settings / Row Class.

In that input box, enter the token for the field you're interested in displaying, along with any prefixes you'd like to add (in my case, it was "featured-[field_featured]").

If the field you're displaying is a boolean and you want a 0 or 1 as your class, make sure that you have "Key" selected as the formatter under Fields / {Your Field} / Formatter. Otherwise nothing will show up unless you've set an "On value" and an "Off value" in the field's settings.

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.

For your specific example, let's assume the content type you're pulling in is called News Articles and the field you're interested in adding as a class is called Featured. Here's a step-by-step that I hope should work for you:

  1. Go into Structure / Content Types / News Articles / Manage Fields / Featured and set the "On value" to featured. Leave the "Off value" blank. Save settings.
  2. Edit your view and click on Format / Settings. Under row class, enter [field_featured]. Apply.
  3. 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.)
  4. 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.


If I understand well your question, I think that your view have a class to achieve this. You can use your current featured class to style the first element. for example:


regarding add a class according the value of your first LI item, I do not know how to make this from a Drupal way, I just can offer a jquery way:

if your view already have a featured class you can try this, just putting this code in the head of your page.tpl.php

<script src="http://code.jquery.com/jquery-1.6.4.min.js">
//this is not necessary if your Drupal already have Jquery

$(document).ready(function() {
valueLi = $('li.featured:eq(0)').text(); //get the value
valueLiClass = valueLi.replace(/\s+/gi,'');//remove spaces between words
$('li.featured:eq(0)').addClass(valueLiClass);//add the class


I hope information be useful.

  • 1
    I am not looking to manually add a class, I need the class to be created based on the value of a field. – Diane Sep 22 '11 at 10:03

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.