0

This great tutorial explains everything except the CSS work. http://gogrow.org/tutorials/views_parity_row

I need to add CSS class to each row so I can set left/right alignment accordingly in css style. Views settings allows me to set the ccs class in Page: Style options but this one is always the same for each row. I need the class name also to alternate.

I need something like dynamically use the View Mode as css class name.

Current output: <div class="views-row"> Desired output: <div class="views-row left"> and <div class="views-row right">

Or am I missing something and the CSS work is done in a complete different way?

  • You could try using .views-row:nth-child(even) { ... } and .views-row:nth-child(odd){ ... }, see example. – No Sssweat Jan 20 '19 at 12:23
1

You can just set all view-rows to be left and then do like this in your css:

.views-row:nth-child(2) {
   float: right;
}

UPDATE:

.views-row:nth-child(odd) {
  float: left;
}
 .views-row:nth-child(even) {
  float: right;
}

As @No Sssweat pointed out you can use nth-child odd and even to style every second element. You don’t need to style on the parent just use above code.

I actually wrote something wrong you can add nth-child on the .views-row elements

  • I was thinking of such solution too. Currently I have problem that basic theme has single parent with class "js-view-dom-id-64eb3c1702d4342adfdcc75d1bd5d7cab00b4090e16aed1e192df3ef97da623a". This is clearly a no-permanent id. I have no clue what this is for and what am I going to break if I remove it. – PerfectGamesOnline.com Jan 20 '19 at 13:26
  • Try to take a look at updated answer – user72672 Jan 20 '19 at 18:43

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.