How do I add an extra css class to my Views rows?

Question

I have created a view and it gives me lots of css classes for the rows of my unformatted list:

<div class="views-row views-row-1 views-row-odd views-row-first">

...but not enough...I need a class for the content type or field name also, something like:

<div class="views-row views-row-1 views-row-odd views-row-first views-row-article">

I can see in the style options for the page: 'Row class The class to provide on each row. You may use field tokens...'.

Is this what I need? Do I have a 'field token' for content types? Thanks

Answer 1

1. Add the field "Content: Type"
2. Check "output machine name"
3. Check "exclude from display" for the type field
4. For the row class, enter [type]

Answer 2

Just another way on how to add classes to views rows.

/**
 * Implements template_preprocess_views_view_unformatted.
 */
function my_theme_preprocess_views_view_unformatted(&$vars) {
  $view = $vars['view'];
  if ($view->name == 'my_view' && $view->current_display == 'my_view_display')) {
    $classes_array = $vars['classes_array'];
    foreach($classes_array as $key => $classes) {
      $vars['classes_array'][$key] = $classes . ' my-class';
    }
  }
}

Note that the preprocess function indicates the View's selected format.

Preprocessors functions list for the basic Views' formats.

Answer 3

Yes, you could put it in there, and if you have included the content type in your row as a field, you could access it here via (most probably) [type].

Just click on the little gear widget on a field in your View and then look at the rewriting section and it will give you all the "replacement patterns" you have to work with.

Answer 4

You need to add a class name for the row ... So you can give the name of the class where ever you are using the view.

For eg:- You want to add the view on to a page. then go to structure -> pages -> select your page -> edit it -> now go to Content part of the page -> go to the region where you want to put the view -> go for ADD content -> Select the view -> now click on customise button of the view -> select CSS properties

There it will ask you for the CSS ID and CSS class.. Add the class that you wanna add and go on playing around with CSS stuff...

Cheers.....

Answer 5

Other way to add css to views row is to create the views template.

In my case I needed some class for bootstrap, (col-md-3, etc...).

In Views 3, go to "Advanced", Theme "Information", look at the name possibility and create a new template in you module folder with the recommended name. Just copy past from the current template, (in views press the template to view it).

Now you can add class for your needs.