Zebra styling of Activity Stream items with CSS3

If you want to make your activity streams a bit easier to read, you might want to add Zebra styling to the entries. Marco72 tell us how on BuddyPress.org

Find this in your css:

/*> Activity Stream Listing
--------------------------------------------------------------*/
UL.activity-list LI
{
padding: 20px 0 0;
overflow: hidden;
}
UL.activity-list>LI:first-child
{
padding-top: 5px;
}

right after that add:

UL.activity-list>li:nth-child(even)
{
background-color: #EFEFEF;
border-bottom: 1px solid #D5D5D5;
border-top: 1px solid #f4f4f4;
}
BuddyPress Hosting Guide Looking for quality BuddyPress hosting? We will guide you through all the available hosting options and help you find the best webhost for your next BuddyPress project!

3 Responses to Zebra styling of Activity Stream items with CSS3

  1. Twig November 26, 2010 at 8:18 am #

    Maybe you want to explain to everyone what Zebra styling is, or link to an explanation or something. I honestly didn’t know it was called zebra styling, I always just called it alternating styles lol.

    Also, your login with facebook button on the sidebar isn’t working for me. Maybe it’s just me though? It doesn’t seem to do anything at all when I click it.

Trackbacks/Pingbacks

  1. BuddyPress Tutorial Roundup: 15 Useful Hacks and Customizations - WPMU.org - May 14, 2013

    [...] View Tutorial [...]

  2. 38 WordPress Tutorials for Hacking Custom Functionality | WarWebDev - December 30, 2013

    […] Zebra Striping BuddyPress Activity Stream […]

Leave a Reply