Design

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;
}

About Bowe Frankema

 Zebra styling of Activity Stream items with CSS3 Building communities on BuddyPress is something I’m 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

I'm constantly updating my BuddyPress Hosting Guide and SiteGround and WPEngine
have proven to be a great fit for hosting your BuddyPress community.

Need some help finding the perfect host? Check out my in-depth BuddyPress Hosting guide!

Discussion

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>