?

Log in

spire。
the smooth sailing fangirl
Tutorial: Replace the Custom Userheads 
Sep 29 10
archangel
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.)



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.



Tada, no more demon horns userheads!
Comments 
Sep 29 10 (UTC)
With the Adobe-styled layout you had created, my custom userhead shows up just fine - like how theljstaff does - so I'm all good when I switch back to that look after Halloween. :)
Sep 29 10 (UTC)
Does this work for every style?
Sep 29 10 (UTC)
It should, as this code is fairly universal (on LJ, at least). It's not targeting any specific part of a layout style, just the user icons. :)
Sep 29 10 (UTC)
MINE DOESN'T RELATE TO MY USERNAME AT ALL :D!!

Handy though, thanks.
Sep 29 10 (UTC)
Awesome, thank you! Hilariously, I just switched back to one of your layouts the other day, but it'll be nice to have them consistent.
Sep 29 10 (UTC)
thanks for this! i don't mind seeing them in non-customized pages, but i do like the icons in my flist to be consistent.
Sep 29 10 (UTC)
THANK YOU.
Sep 29 10 (UTC)
♥ ♥
Oct 01 10 (UTC)
Oh awesome! Thank you for posting this. I'll bookmark it for later use.
Oct 02 10 (UTC)
Thank you for anticipating my needs. :P
Oct 24 10 (UTC)
Thank you for this :)
Oct 31 10 (UTC)
In case you are interested:

img[src*="userhead/8"],
img[src*="userhead/12"],
img[src*="userhead/14"],
img[src*="userhead/16"],
img[src*="userhead/24"],
img[src*="userhead/28"],
img[src*="userhead/34"],
img[src*="userhead/36"],
img[src*="userhead/40"],
img[src*="userhead/44"],
img[src*="userhead/46"],
img[src*="userhead/48"],
img[src*="userhead/50"],
img[src*="userhead/52"],
img[src*="userhead/54"],
img[src*="userhead/56"],
img[src*="userhead/60"],
img[src*="userhead/62"],
img[src*="userhead/64"],
img[src*="userhead/66"],
img[src*="userhead/68"],
img[src*="userhead/74"],
img[src*="userhead/76"],
img[src*="userhead/80"],
img[src*="userhead/84"],
img[src*="userhead/86"],
img[src*="userhead/88"],
img[src*="userhead/90"],
img[src*="userhead/92"],
img[src*="userhead/94"],
img[src*="userhead/98"],
img[src*="userhead/114"],
img[src*="userhead/118"],
img[src*="userhead/120"],
img[src*="userhead/122"],
img[src*="userhead/133"],
img[src*="userhead/135"],
img[src*="userhead/137"],
img[src*="userhead/141"],
img[src*="userhead/145"],
img[src*="userhead/146"]

Here are all that are visible in the shop :)
Works great!
Thank you!
Jan 27 11 (UTC)
Ooooh. Thank you so much for this; I found you through Google! Unfortunately, this code doesn't work for my layout (smooth sailing). I'm not entirely sure why; perhaps I'm using an older coding style for the custom userheads that only replaces the defaults...? I'm not overly competent in CSS to know why it's rebelling, but it doesn't seem to want to apply the blanket term "userhead" without some sort of URL. At least you've given me something to play with, even if I wind up sticking in each individual URL (eeeeeeeegh)!
Mar 19 11 (UTC)
Thank you for this tutorial! I've fixed a style for Opal with it. :)
This page was loaded Feb 22nd 2017, 3:51 am GMT.