Love to style WordPress? If you have created a theme for your wordpress site and have fiddled with the commenting system, you may have wanted to style how the avatars show up with each comment. Here is a nice CSS snippet that will make your avatars look a lot nicer.

Things to know before-hand…

  • Individual comments are basically li elements within an ol with the class comment.
  • Within each li element there is a div with the class comment-author that contains the image/gravatar/avatar/photo that has the class avatar.
Now that image needs to be wrapped within a wrapper. In my case it is div class avatar-wrap. The CSS rules for the div are…
.comment .avatar-wrap {
width: 64px;
height: 64px;
border-radius: 42px;
float:left;
border: 8px solid #bdbdbd;
margin: 0 10px 5px 0;
position:relative;
box-shadow: 0px 5px 5px -2px #848686;
}
.comment .avatar-wrap::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
right:-15px;
top: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #bdbdbd;
transform: rotate(-27deg);
-ms-transform: rotate(-27deg); /* IE 9 */
-webkit-transform: rotate(-27deg); /* Safari and Chrome */
-o-transform: rotate(-27deg); /* Opera */
-moz-transform: rotate(-27deg); /* Firefox */
}

…and the image with the class avatar will be having the following CSS rules just to make the image look circular.

.avatar-wrap .avatar {
border-radius:42px;
 }

That’s all! We are done! 🙂 Feel free to try this out and leave a comment if something goes wrong.

Advertisements

One thought on “Nice CSS Avatars for your wordpress site!

Your Comments :

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s