XF 2.1 How do I alternate forum row colors?

[Heraldic Age]

Hi guys,

Instead of having the rows of all the forums and threads plain white, I want to alternate between white and light grey.

How would I achieve that?

Thanks!

 

[arn]

That was implemented on our site via css. Looks like through this:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

.structItem:nth-child(even) {
    background-color:#edf4fa
}

Example: https://forums.macrumors.com/forums/ios-13-and-ipados.207/

The only oddity is that ignored content still exists and is just hidden via css, so it messes up the odd/even count. So sometimes you'll see two of the same color rows next to each other.

Example attached

 

[Heraldic Age]

That was implemented on our site via css. Looks like through this:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

.structItem:nth-child(even) {
    background-color:#edf4fa
}

Example: https://forums.macrumors.com/forums/ios-13-and-ipados.207/

The only oddity is that ignored content still exists and is just hidden via css, so it messes up the odd/even count. So sometimes you'll see two of the same color rows next to each other.

Example attached

thanks for the reply.

Sorry I just migrated from MyBB so I'm kind of oblivious right now.

Where do you put that code?

 

[arn]

CSS changes/additions go in the "extra.less" template, so if you add it there, it should work.

 

[Heraldic Age]

CSS changes/additions go in the "extra.less" template, so if you add it there, it should work.

thank you.
works beautifully on the forum displays. however how do I apply it to the home page with the forums/forums?

 

[arn]

try ".node:nth-child(even)"

 

[Heraldic Age]

try ".node:nth-child(even)"

didn't work for me

 

[Russ]

Something like this should work:

.node + .node:nth-child(even) {
    background-color: rgb(249, 249, 249);
}