1

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');
    }
}
0

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.

  • I've pasted in an attempted jQuery solution (placed in template.php) in my question above. It's a simpler version of your suggestion, but it didn't work. The script is in the view page, but the jQuery doesn't add the new classes??? – 24ma13wg Apr 11 '13 at 21:07
  • I've never stuffed jQuery inline, rather relying on the drupal behaviors mechanism, but it might be "firing" before the DOM is ready in your implementation. Also, make sure you are running at least jQuery 1.4 in order to be using a function inside addClass (eg, Drupal 7 you're fine, Drupal 6, not so much :) – Jimajamma Apr 11 '13 at 21:30
  • I was misunderstanding jQuery. I was looking for the new classes to appear in the source HTML, but then guessed that the added classes were in the DOM only, and that I wouldn't see any change in the source HTML. Thanks for your help - it solved my problem. – 24ma13wg Apr 12 '13 at 10:18
  • Ah! Yes, they get added afterwards but do as I am sure you now see show up when you look via a code inspector/etc. Glad I could help out. – Jimajamma Apr 12 '13 at 12:30
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

  • Won't this just add 'YOUR CLASS' to every row? Let's say I have an entity bundle called 'article' with a field called 'date'. I need to target date. So I need to add the class 'date' just to that one row, wherever it occurs in the list. Makes sense? – 24ma13wg Apr 11 '13 at 11:24
  • You may want to add it in the node--article.tpl.php . Is it a fields view or a content view? – Tyler Durden Apr 11 '13 at 12:49
  • I've updated my answer adding a IF statement – Tyler Durden Apr 11 '13 at 13:14
  • Sorry, what's the difference between a fields view and a content view? Can I use some kind of logic in these tpls, like: if node:field_name is 'date' then add class 'date' – 24ma13wg Apr 11 '13 at 13:16
  • I do not quite understand your question. Do you want to add a specific class based on position or on content type? – Tyler Durden Apr 11 '13 at 13:19
1

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:

  • nth-child was my first port of call, but I need to target the nth child of a particular class - e.g. the 3rd child where the class is 'article'. I tried .article:nth-child(3), but the 'article' class was 'ignored' and just the 3rd child, whatever the class, was selected. So I went for nth-of-type, .article:nth-of-type(3), but that seems only to work on elements, not classes. – 24ma13wg Apr 11 '13 at 11:13
  • @user1919784 Try changing .article:nth-child(3) to .article:nth-child(3n). I used classes in the Fiddle and it works fine :-/ – Chapabu Apr 11 '13 at 12:31
  • I updated your jsFiddle: jsfiddle.net/rd2at/6. The fifth "Hello", which is the fourth occurence of "myclass", that's what I want to go blue - and only that one. Thanks. – 24ma13wg Apr 11 '13 at 17:58
  • If that's more like your actual class structure, then .yourclass + .myclass {} should work, if not then it might be helpful to add your actual requirements to the question (with code). – Chapabu Apr 11 '13 at 22:21
0

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.

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.