Simple BuddyPress Avatar CSS Tweaks: Rounded Corners, Shadows, Highlight Admin / Moderator

Here are some quick CSS tips for customizing avatars in your BuddyPress theme. You can file this under the “cute things you can do with BuddyPress” category. I was inspired by a post in our forums where a user requested a way to distinguish admin / moderator avatars from general users. You don’t need to hack the core or write a plugin for it. Highlighting avatars is simple to do with a little CSS. You will add this to your child theme’s CSS file.

How to Highlight Admin Avatars:

This will add a little white border around all of your avatars site-wide with a light blue border around the admin’s avatar:

1
2
3
4
5
6
7
8
9
10
11
img.avatar {
    background: #ffffff;
    padding: 4px;
    border: 1px solid #ddd;
}

img.avatar.user-1-avatar {
    background: #ebf7ff;
    padding: 4px;
    border: 1px solid #ddd;
}

Note that the admin’s user number is 1. If you have other moderators whom you’d like to highlight as well, you can easily find their numbers by using Firebug to see what class BuddyPress is giving them. Or you can hover over the username in the Dashboard >> Users list and note the number that follows “user_id=” in the status bar at the bottom of your browser. Then simply add multiples like so:

1
2
3
4
5
img.avatar.user-1-avatar, img.avatar.user-5-avatar {
    background: #ebf7ff;
    padding: 4px;
    border: 1px solid #ddd;
}

The light blue is a slight, unobtrusive distinction for the avatars that matches the BuddyPress default theme, but you can change it to any color you like.

How to Add Rounded Corners to BuddyPress Avatars Site-wide

If you’re a fan of rounded corners, this bit of CSS will add it to your avatars site-wide. Please note that this doesn’t actually round the image but rather the corners on the border and its background.

1
2
3
4
5
6
7
8
9
img.avatar {
    background: #ffffff;
    padding: 4px;
    border: 1px solid #ddd;

/* Round Corners (native in Safari, Firefox and Chrome) */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

This technique does not work in IE (the bane of every developer’s existence). You’ll need to use JavaScript to accomplish this if you want it to match in IE.

How to Add a Shadow to BuddyPress Avatars with Rounded Corners

This is a cute thing you can do to your avatars to make them pop a little more:

1
2
3
4
5
6
7
8
9
10
11
12
13
img.avatar {
    background: #ffffff;
    padding: 4px;
    border: 1px solid #ddd;

/* Round Corners (native in Safari, Firefox and Chrome) */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;

/* Add the Shadow */
    -moz-box-shadow: 2px 2px 2px #dddddd;
    -webkit-box-shadow: 2px 2px 2px #dddddd;
}

I hope this was helpful for those of you who want to add a little bit of customization without having to be a CSS or PHP wizard. Enjoy customizing your theme and let us know if there other tutorials that would be helpful to you. Happy theming! :)

Tags ,

Comments (10)

  1. That’s very cool and simple. I’m struggling for a way to tie the avatar’s border to a field in the buddypress profile. I think I have to edit get_avatar or maybe there is a buddypress function for get_avatar?

    This is pretty much a requirement for me to come up with and I think it would make a decent plugin. Any thoughts or other references I could check?

    I’m working on http://tkdunion.org which is for Taekwon-Do practitioners. So, a black belt should have a black border, a green belt, a green one. Further, we want to highlight 2nd, 3rd and on up to 9th degree black belts.

    Thanks for posting this! Your site is loaded with gems – lots to read here.

  2. hey there, i’m having a bit of trouble with the highlight code. i had it working before but it disappeared when i upgraded my buddypress.

    i’m not a wordpress expert so maybe i’m pasting the code in the wrong place.

    any ideas or where should i be pasting it?

    it’s an awesome code by the way. and thank you for it

Participate