Welcome to BuddyDress

Fancy up your avatars with some CSS

Bored of a simple 2px border around your avatar images in the BuddyPress default theme? Look no further than right here for some suggestions as to some easy CSS you can use to spruce them up. We’re going to take the sidebar avatar and show you these in action.

First up we’d always suggest you make a child theme for this so you can make sure any changes don’t effect the parent or get lost in updates. You can find out more about child and parent themes right here.  We would also like to point out different browsers will show these elements differently always consider that.

We’re going to do the changes on the sidebar avatar but you can use these techniques on a range of avatars.

Bigger border love

div#sidebar div#sidebar-me img.avatar {
border:10px solid #EEEEEE;
}

Shadow it up a little

div#sidebar div#sidebar-me img.avatar {
-moz-box-shadow: 3px 3px 4px #000000;
-webkit-box-shadow: 3px 3px 4px #000000;
box-shadow: 3px 3px 4px #000000;
}

Fake Polaroid bordering with shadow

div#sidebar div#sidebar-me img.avatar {
-moz-box-shadow: 3px 3px 4px #CCCCCC;
-webkit-box-shadow: 3px 3px 4px #CCCCCC;
box-shadow: 3px 3px 4px #CCCCCC;
padding: 5px 5px 10px 5px;
}

Lets round this off with some rounded edges

div#sidebar div#sidebar-me img.avatar {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border:5px solid #CCCCCC;
}

Getting a bit more involved

As a point of note – we are using the ‘belt and braces’ approach to mark up and covering as many browsers as can without IE hacks. There are many methods of doing many things in CSS these are just some simple code snippets you may want to play with. Should you want to discover more here are some good links:

w3 CSS Background and Borders

Mozilla box shadow reference