Creating Views rows with specific classes? I have created a view and it gives me lots of default css classes for the rows of my unformatted list. I have added the token [type] in the style options for the page under 'Row class'. So now my list items are wrapped in the following div:

&lt;div class="views-row views-row-1 views-row-odd views-row-first article"&gt;&lt;/div&gt;


You can see the class 'article' is added according to the node's content type. But, I need to give specific rows, like the third occurence of class 'article' row, their own 'static' unique css classes, like:

&lt;div class="views-row views-row-1 views-row-odd views-row-first article my-class"&gt;&lt;/div&gt;


views-row-[number] will not do because it changes depending on how many rows there are in the view (not always the same in this view) i.e. the third from last row will sometimes be views-row-10, sometimes it will be views-row-13. How do I find out what other tokens are available to me (I'm looking for ones that will create unique classes), or is there another way that I can create a unique, unchanging, class?

I have tried using pseudo css classes to target the desired rows, like :nth-of-type(N).

Solution

To make classes unique, append an incrementing number to the required classes with jQuery. CSS pseudo class selectors are helpful too, as are tokens. There does not seem to be one solution that will fit every situation: a mix of approaches is required.

Add to template.php in your theme's root folder (or how ever you want to implement your jQuery):

/**
 * Implements template_preprocess_views_view().
 */
function YOURTHEME_preprocess_views_view(&amp;$vars) {
    $view = $vars['view'];
    if ($view-&gt;name == 'VIEWNAME') {
        drupal_add_js('
            (function($) {
                $(function() {
                    $("div.article").removeClass("article").addClass(function(index) {
                        return "article-" + index;
                    });
                });
            })(jQuery);
        ', 'inline');
    }
}
You need to modify views-view-unformatted.tpl.php.

In your views, in the third column click on theme and choose the how specific should be you file, for the full view or for that display. Copy into your theme folder and rename it.

You can find more info here http://api.drupal.org/api/views/theme%21theme.inc/group/views_templates/7

    &lt;?php if (!empty($title)): ?&gt;
     &lt;h3&gt;&lt;?php print $title; ?&gt;&lt;/h3&gt;
    &lt;?php endif; ?&gt;
     &lt;?php
     $i = 1;
     $num_rows = count($rows);
     $num_rows = $num_rows -2;
     ?&gt;
    &lt;?php foreach ($rows as $id =&gt; $row): ?&gt;
    &lt;?php
     if ($i == $num_rows){
       $classes_array['YourCLass'];
     }
     ?&gt;
     &lt;div &lt;?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"';  } ?&gt;&gt;
      &lt;?php print $row; ?&gt;
      &lt;?php $i++;?&gt;
     &lt;/div&gt;
    &lt;?php endforeach; ?&gt;


Flush cache