By vasheck on

I'm wondering if there's a way to apply a style to only every 5th item in an unordered list (in views).

<li class="views-row views-row-1 views-row-odd views-row-first">first</li>     
<li class="views-row views-row-2 views-row-even">2nd</li>                              
<li class="views-row views-row-2 views-row-odd">3rd</li>
<li class="views-row views-row-2 views-row-even">4th</li>                              
<li class="views-row views-row-2 views-row-odd">5th</li>
<li class="views-row views-row-2 views-row-even">6th</li>                              
<li class="views-row views-row-2 views-row-odd">7th</li>
<li class="views-row views-row-1 views-row-even views-row-last">8th</li>

Thanks!

⋅ Categories: Drupal 6.x

Comments

coreyp_1’s picture

coreyp_1 commented

your example repeats "views-row-2" in the class declaration, but it actually increments with each row. In other words, you could set up a css rule for ".views-row-5, views-row-10, views-row-15" etc. up to the limit of your view.

You could also override the row theme file to include a custom css class every 5 rows.

Both approaches have advantages depending on your usage.

-Corey

vasheck’s picture

vasheck commented

Corey,

Thanks for your reply and pointing out the class mistake... I didn't even notice it...
This is the correct code:

<li class="views-row views-row-1 views-row-odd views-row-first">first</li>    
<li class="views-row views-row-2 views-row-even">2nd</li>                             
<li class="views-row views-row-3 views-row-odd">3rd</li>
<li class="views-row views-row-4 views-row-even">4th</li>                             
<li class="views-row views-row-5 views-row-odd">5th</li>
<li class="views-row views-row-6 views-row-even">6th</li>                             
<li class="views-row views-row-7 views-row-odd">7th</li>
<li class="views-row views-row-8 views-row-even views-row-last">8th</li>

I thought of using the approach you suggested:

.views-row-5, views-row-10, views-row-15...

however, there's going to be an "endless" number of rows... each item <li> represents a post title and there's most likely going to be hundreds (possibly thousands) of posts... therefore to keep adding new classes (something like .views-row-1125, views-row-1130) would make it kind of a clumsy solution....

But your suggestion to override the row theme file to include a custom css class every 5 rows seems like the way to go. Unfortunately, I'm not very familiar with overriding themes. Could you please point me in a direction how to do that. (I'm using Drupal 6.13)

Thanks!

coreyp_1’s picture

coreyp_1 commented

Edit your view and select the correct display type (i.e., default, page, etc.).

Under the "Display Settings" area of the View, click on "Theme: Information". This will open an area that does two things: (1) show you the order of tpl.php filenames that the theme looks for when rendering the view, and (2) a sample of the default tpl.php used for that element. For example, you can click on "Row Style Output" and see how the row is created. Use this code as a starting point and, in your text editor, add your own code to customize the tpl.php. You will probably have to experiment in order to figure out which variable to use (try $id).

Save your customized tpl.php in your theme folder, using one of suggested names. The suggestions are given in order of specificity, ranging from "use this template for every view" to "use this template only on this view, on this specific display, on this specific page".

Once you have uploaded your customized tpl.php, you need to make sure that Drupal finds it. For performance reasons, Drupal caches theme file locations, so you have to make Drupal look for the files again so that it will find yours. You can clear the cache in several ways: (1) click the "Rescan template files" button on the tpl.php suggestions panel of the view that you were looking at, (2) click the "Clear cached data" button on the site performance page admin/settings/performance, (3) flush the theme registry cache using the Administration Menu module, or (4) change to a different theme, then change back to your normal theme.

I hope this gives you a bit more information on the subject.

-Corey

bryan kennedy’s picture

bryan kennedy commented

I have a similar inquiry to the original post. I think the solution in this comment won't work. I could be wrong, but I can't find a template file that covers this level of the code. The display output level just outputs all of the rows, while the rows theme displays everything inside of the divs that are listed in the post above. It looks like the divs listed above are somewhere in between these two themeable layers.

I hope I am being dense and just missed something.

Jeff Burnz’s picture

Jeff Burnz commented

I'd do it with jQuery, since jQuery fully supports all CSS3 selectors you can use :nth-child and ordinal position to target every fifth views-row and add a class to it (e.g. views-row-fith), look into it, it actually pretty easy, heres a heads up

http://reference.sitepoint.com/css/understandingnthchildexpressions
http://visualjquery.com/ (you want addClass(class))

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
vasheck’s picture

vasheck commented

thank both of you guys! I'll take a closer look at both suggested approaches and I'll post results.

bryan kennedy’s picture

bryan kennedy commented

I was able to achieve this effect using the Semantic Views module. Even though it is still in dev. it worked exactly as needed, allowing me to define the class elements for the row level markup.

dale386’s picture

dale386 commented

That did the trick. Thanks for the suggestion.