Tutorial: Replace the Custom Userheads

Sep 29, 2010 09:52

Some of your friends have custom userheads, and as neat as this feature is, you may not like how they are messing the conformity of your custom tiny icons. While I couldn't help but buy a userhead that cheesily relates to my username, I can sympathize. Thus, it is with great pleasure that I reveal the code needed to correct this aberration. (This tutorial can also double as a simple introduction to replacing icons in your own layout.)

img[src*="userhead"]

For clarification, many of my layouts (your mileage may vary with other maker's stuff) have something like the following code to replace the userheads with your own icons (code in red is used to apply the same custom icon to the ONTD, staff, Open ID, and anonymous icons, mostly not present in my older layouts):

img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"] {
background-image:url("http://irondevil.org/icon/categories/diagona%2010a/05.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}

As you may have guessed, replacing the userheads is as easy as inserting the first code snippet in the list before the bracket. Don't forget the comma!

img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background-image:url("http://irondevil.org/icon/categories/diagona%2010a/05.png") !important;
background-repeat:no-repeat !important;
height:0;
padding:15px 11px 0 0 !important;
width:0;
}

Note that I haven't tested this with every userhead, but I did a quick check on a couple and it appears that they all have "userhead" in the URL, which means this solution should work for them.

Theoretically, it's also possible to replace individual userheads with custom icons. I'm not sure why you'd put yourself through that, but it's as simple as finding the image URL for a particular userhead (my demon horns one, for instance, is http://files.livejournal.com/userhead/28) and inserting that "/28" part into the code.

img[src*="userhead/28"]

Tada, no more demon horns userheads!

*tutorial

Previous post Next post
Up