XF 2.0 Striped look of thread list

[sbj]

I am trying to display the thread list in striped look.

Tried these but it doesn't work, anyone any idea?

.structItemContainer-group:nth-child(even) {
    background-color: black;
}
.structItemContainer-group.js-threadList:nth-child(even){
    background-color: black;
}

 

[S Thomas]

.structItem.structItem--thread:nth-child(2n) {
background: black;
}

 

[sbj]

.structItem.structItem--thread:nth-child(2n) {
background: black;
}

You are the best, thank you.
The element inspector never gave me that selector, I don't understand why I never can find the right selectors. And didn't know I have to use 2n instead of even.

 

[S Thomas]

even and 2n are the same. You probably just were looking at the wrong spot, happens often to me aswell

 

[sbj]

One problem.
When thread moderation tool is selected (the tickbox), and then you select threads in the thread list to moderate, the highlighted color doesn't work for "2n" threads. How to solve that issue?

 

[S Thomas]

Can you make a screenshot?

 

[sbj]

Normal:


Normal with moderation bar (all selected):


Striped:


Striped with moderation bar (all selected):


As you see the highlight of the moderation selection gets overridden by this. There is no highlight for the 2n-threads.

 

[S Thomas]

.structItem--thread:nth-child(2n):not(.is-mod-selected)

 

[Brad Padgett]

I'm going to bookmark this page and this sounds like something I might try later. But just a tip, when using inspect element with XF2 I've learned to look at some of the lower areas in the hierarchy to find the higher classes. Usually the parent is referenced in them and this has always worked best for me. Not always sometimes clicking the exact class will give you the exact class but sometimes if you search a bit lower you'll find the class your looking for.

 

[sbj]

.structItem--thread:nth-child(2n):not(.is-mod-selected)

Thank you again, much appreciated. Learned sth. new again.

But just a tip, when using inspect element with XF2 I've learned to look at some of the lower areas in the hierarchy to find the higher classes.

Thanks, will keep that in mind for future try and errors .

I'm going to bookmark this page and this sounds like something I might try later.

My tip is to use background: xf-intensify(#yourcolor, 2%) for the striped look. Whatever the color of the thread list is, intensifying it 2% is just enough to be noticable (and useful for the eyes) but also doesn't dominate the look.

 

[Brad Padgett]

My tip is to use background: xf-intensify(#yourcolor, 2%) for the striped look. Whatever the color of the thread list is, intensifying it 2% is just enough to be noticable (and useful for the eyes) but also doesn't dominate the look.

Thank you for the idea. I will remember to try that if I decide to do this. Also another good function is the darken fuction. You may want to look that up with LESS if you haven't heard of it. I'm sure you have though. There's also lighten too.