Standard, Custom Avatar for Anonymous & OpenID: Silly Blogger CSS hacks that you SHOULD NOT use

Blogger’s comment system has seen a lot of improvements in the last few years and the introduction of profile images alongside comments way back in September 17th 2009 was one of its most welcomed new features.

Yeah, it was really cool for the first couple of months. After a while, bloggers begin to question Blogger’s decision to use a blank avatar for anonymous comments. Some even condemns the use of OpenID’s logo as the standard avatar for comments left via OpenID. Personally, I don’t mind seeing OpenID’s logo as avatars but I couldn’t accept Blogger’s decision to use a blank avatar for anonymous comments. It is a horrible decision and Blogger should have come up with some creativity there.

Can you hear me, Blogger?

Now, some bloggers have came up with some silly Blogger CSS hacks to show a standard, custom avatar for anonymous comments and comments left via OpenID. Let’s take a look at some of their silly CSS hacks.

Common Avatar for Anonymous & OpenID Blogger CSS hacks

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('URL to custom avatar ') no-repeat;
height:37px;
width:37px;
}

.avatar-image-container { background: url("URL to custom avatar") no-repeat scroll center center;}

Why do I call them silly Blogger CSS hacks?

Such hacks manipulate Blogger’s ‘avatar-image-container’ CSS rule, giving hack users that seemingly cool ability to place a standard, custom avatar for anonymous comments. But what most of them didn’t realize is that CSS hacks as shown earlier have also subtly undermined the look and feel of other avatars. You see, Blogger’s server-side scripting treat ‘avatar-image-container’ class in 2 different ways (for the time being). If the comment is left by a visitor logged in via Blogger (and the visitor has a picture on his or her profile), Blogger’s server-side scripting will push their avatars under the ‘avatar-image-container.vcard’ sub-class. Anonymous comments (including those logged in via Blogger but have no pictures) and comments left via OpenID on the other hand, will be placed under ‘avatar-image-container.avatar-stock’ sub-class.

By manipulating Blogger’s ‘avatar-image-container’ CSS rule, such hacks inadvertently apply some unnecessary CSS rules to avatars classified under the ‘avatar-image-container.vcard’ sub-class and that is really bad. Many things can go wrong here. For an example, such hacks will crop and warp those otherwise perfect avatars classified under the ‘avatar-image-container.vcard’ sub-class. Yes, this is the classic case of CSS Inheritance gone totally wrong!

That’s why I called them silly hacks.

The better way (still silly but better) to place a standard, custom avatar for anonymous & OpenID

I propose a direct manipulation of the ‘avatar-image-container.avatar-stock’ CSS rule. An example is shown down below;

#comments-block .avatar-image-container.avatar-stock span img {
background: url(URL to custom avatar) no-repeat;
background-position: center;
float: left;
height: 37px;
width: 37px;
}

The above proposed hack works best if the height and width of the standard, custom avatar is set at 37px x 37px. Yes, a perfect square.

Bear in mind that the above Blogger CSS hack would not help you in replacing that horrible blank avatar (originating from http://img1.blogblog.com/img/blank.gif). That blank avatar would still be in the background and there’s nothing we can do about that since the whole thing is generated by an external CSS style sheet that belongs to Blogger. The best we can do so far is to place another image right on top of it and this is what the above code will do for us.

Feel free to use it if you want but I certainly would not encourage anyone to use hacks similar with the ones mentioned in this post. We should leave this Blogger and Blogger should replace that damn blank avatar with something that has some kind of a picture on it.

Do you hear me, Blogger?