I need to add a css id selector to a views row. Of course this is straight forward with a class selector such as .my-class but how do I insert something like #my-class at the individual row level?

I realize that this probably invalid CSS; however, the ID appears to be needed to trigger some JavaScript.

Some background: I want to use a component from the Bourbon Refills CSS framework for a 'fade in' effect and apply this to all the rows in a views. See http://refills.bourbon.io/components/#fade-in.

In order the make this work I need to add a CSS ID #js-fadeInElement to each row.


After a bit more digging, it seems I may need a custom row.tpl file in my theme. Is this correct?


Solution 1:

No need to add ID for each row, you can achieve it by each row CSS class it self. Instead of document.getElementById("js-fadeInElement"); you can use document.getElementsByClassName("js-fadeInElement");

Solution 2:

  1. You can use Views theme templates to modify the HTML output and add your id attribute.
  2. Under the Advanced section, you will find Theme: information.

This link will show you possible file name for templates and a sample content of that file.

  1. You probably want to copy and modify the "Style output". You can put your custom template in your own theme directory. You probably want a name like views-view-list--your-view--page.tpl.php

Please follow this link to override the template.

| improve this answer | |
  • 1
    Just an addition: In your view, you can easily find the exact name you need for the template by going to Advanced > Theme Information . – gkom Oct 25 '15 at 12:55

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.