Creating Views rows with specific classes?

Question

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:

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

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:

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

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(&$vars) {
    $view = $vars['view'];
    if ($view->name == 'VIEWNAME') {
        drupal_add_js('
            (function($) {
                $(function() {
                    $("div.article").removeClass("article").addClass(function(index) {
                        return "article-" + index;
                    });
                });
            })(jQuery);
        ', 'inline');
    }
}

Answer 1

You could bring a dull ax to the party and use jQuery:

$('div.article').filter(function(index){
  $(this).addClass('article-' + index);
  return (index%3 == 2);
}).addClass('article-third');

which will create article-0 thru article-N classes on every div with class article it finds as well as putting a special article-third on every third one it finds.

Answer 2

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

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

Flush cache

Answer 3

I know you said you tried nth-of-type, but have you tried nth-child?

Say for example you've added a class called myrows to your Views output (you can do this through the UI under style settings for anyone who doesn't know), then targetting every third row should be as simple as the following:

.myrows {
  //Make all rows red
  color: #FF0000;
}

.myrows:nth-child(3n) {
  //Make every third row green (not including the first)
  //So 3, 6, 9, 12 etc will be green
  color: #00FF00;
}

Here's a jsFiddle just to show it working :)

Some useful resources:

• Useful :nth-child recipes
• The Difference Between :nth-child and :nth-of-type

Answer 4

This is an old thread, but for reference i think the module Semantic Views can do this. There is both a Drupal 7 and a Drupal 8 version of this module.