i need to add custom css id/class to views row after row first. example:

in default i see this :

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

<div class="views-row views-row-2 views-row-even"></div>

<div class="views-row views-row-3 views-row-odd views-row-last"></div>

Now, I need change this to:

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

<div id="leftCol" class="views-row views-row-2 views-row-even"></div>

<div id="leftCol" class="views-row views-row-3 views-row-odd views-row-last"></div>

Actually i need to print result like this:

 <div>views-row-first</div> <-- example: 100% width

 <div>views-row-even</div> <-- example: 50% width + <div> views-row-last</div> <-- example: 50% width

With this i combination of one and two columns. 100% width and one column for first row And at the bottom 2*50% and two column for other(even/odd/last). How to?

NOTE: i work with content-node / unforrmatted list.

1 Answer 1


Why dont you just add the 100% to views-row-1 and width: 50% to views-row? I believe that you do it like this:

.views-row {
  width: 50%;
  //other css

.views-row-1 {
  width: 100%;
  • you can create a template file for rows output and wrap the each row of your view with your class, go -> view settings -> advanced -> theme information. you will see it theme Dec 10, 2012 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.