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:

{code type=css}
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:

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

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:

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:

• CSS
• avatars