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

Find this in your css:

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

right after that add:

background-color: #EFEFEF;
border-bottom: 1px solid #D5D5D5;
border-top: 1px solid #f4f4f4;

Tired of having a slow BuddyPress site?

I'm constantly updating my BuddyPress Hosting Guide to help you get the most out of your hosting. SiteGround and WPEngine have proven to be fast and reliable but see my BuddyPress Hosting guide for a full overview of your options


40% Discount on the first year of BuddyPress hosting on WPEngine!

Currently WP Engine is running a promotion where they give 40% discount for the first year of hosting on any of their plans. Use code SSL40OFF on Personal, Professional, or Business plans on WP

About Bowe Frankema

Building communities on BuddyPress is something I am very passionate about. The decision to focus exclusively on BuddyPress projects over the last few years inspired me to share back some of the things I've learned here on BP-Tricks! You can find me on WordCamps & BuddyCamps across the globe and on Twitter! Follow me on Twitter


3 responses to ‘Zebra styling of Activity Stream items with CSS3

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">