Tip: Alternate Background Color on Blog and Forum/Discussion List

[Ron]

Hi all,

Here's an easy tip to take advantage again of CSS3 capabilities. With the nth-child(n) pseudo selector, you can customize your forum index or topic list by giving it an alternating background color effect.

Add this code to your Design Studio CSS box:

All Forum Index/Discussion List

.categories tbody tr:nth-child(odd) { background-color:#fff; }
.categories tbody tr:nth-child(even) { background-color:#e9eee8; }

 

Home page module forum list

.module_forum .vcard:nth-child(odd) { background-color:#fff; }
.module_forum .vcard:nth-child(even) { background-color:#e9eee8; }

More Options

Blog module list (contributed by Jane Noel)

.xg_blog .xg_module_body:nth-child(odd) { background-color:#fff; }
.xg_blog .xg_module_body:nth-child(even) { background-color:#e9eee8; }

Home page blog module list

.module_blog .vcard:nth-child(odd) { background-color:#fff; }
.module_blog .vcard:nth-child(even) { background-color:#e9eee8; }

 

Make sure to change the background color values that will match your theme or to any value you like. I have downloaded and applied this style to a local static html copy of this forum for a good sampling and demo/screenshot below. Similar to the 'Top This Week' box and pretty much straightforward on what the code will do.

The code also applies to featured discussions and group discussion list.

Add your own additional styles and enjoy!

[Bernard Lama]

Very nice tip...thanks a lot. will this apply to Main page forum module too?

[Ron]

Hey Bernard, you're welcome. Yes, just updated it :-)

cheers.

[Bernard Lama]

BTW, thanks again.

[Ron]

No problem. hey, I just updated the tip with your request-- it should work on the home page.

[Bernard Lama]

It works like a charm. Thanks a lot.

[Ron]

great, cheers.

[Michael Thompson]

Excellent tip Ron!

[Ron]

Thanks Michael.

[Ron]

Hi Diane,

I'm not sure but I think it will also work.

[Ron]

Hi Diane,

I'm not sure but I think it will also work.

[Fire-Tech]

Great tip Ron. Thanks for sharing :)