Baldyman no more!
In following the enthusiasm of people asking how to change the user icon (lame baldyman on the left of your username, ephi) and not having them the same across all (community _css, syndicated account memento2, and news news), here's how you can do it.
Edit1:
- Some people refer the baldyman as blueman, userinfo icon, etc.
- I rewrite the tutorial to make it readable.
Edit2: Now you don't have to read this boring tutorial anymore! Here comes the nifty generator, done by the nifty loveicon
Edit3: Or... if you're S2-savvy (means you know your way with programming S2) and have paid account, here's a great tutorial from kunzite1
Edit4: LJ is so kind to add yet another unnecessary inline style to the baldyman. *grumble* So the code has to be changed again. There are two ways to do that:
(1) Please add !important after your padding declaration. padding: 17px 20px 0 0 !important; (2) Try this padding technique by sarken http://community.livejournal.com/mintyapple/93854.html
Personally, I will recommend the padding technique, but I haven't try it yet and have no time to do so now, so take your pick and report here ;-)
Edit5: LJ changed the location for baldyman and his comrades. [updated: May 28, 2008]
Requirements: Modern Browsers (IE7, Firefox, Opera, etc.)
Preparation
Install in S1 Layouts Install in S2 Layouts
- Read how to integrate CSS with your layout overrides
- Insert those CSS codes below (the ones with yellow background)
Go here and click Custom CSS link. In the last bigger box at the bottom add the codes below (the ones with yellow background).
Need to change only one?
This is for older browsers like IE, and a fallback plan, LJ likes to add more and more usericons, when I first write this I forgot 2 icons (Open ID and Sponsored Community). Always include this CSS code at anytime.
/* http://ephi.livejournal.com/665.html */ .ljuser img { /* fallback code for older browsers */ width: 0; height: 0; padding: 19px 0 0 15px; /* for some reason IE doesn't understand background shortcuts for this one */ background-image: url('URL OF GENERAL IMAGE'); background-repeat: no-repeat; background-position: left center; }
This is for the user info icon (the baldyman or blueman, whatever)
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { width: 0; height: 0; padding: 19px 0 0 15px; background-image: url('URL OF USER ICON'); background-repeat: no-repeat; background-position: left center; }
This is for the community icon.
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { width: 0; height: 0; padding: 19px 0 0 15px; background-image: url('URL OF COMMUNITY ICON'); background-repeat: no-repeat; background-position: left center; }
This is for the syndicated icon. People rarely use this, but who knows, eh?
.ljuser img[src="http://p-stat.livejournal.com/img/syndicated.gif"] { width: 0; height: 0; padding: 19px 0 0 15px; background-image: url('URL OF FEED ICON'); background-repeat: no-repeat; background-position: left center; }
This is for the news icon. I see no reason why you should need this, but go ahead.
.ljuser img[src="http://p-stat.livejournal.com/img/newsinfo.gif"] { width: 0; height: 0; padding: 19px 0 0 15px; background-image: url('URL OF NEWS ICON'); background-repeat: no-repeat; background-position: left center; }
This is for the others (Open ID and Sponsored Community), you can do this on your own, eh? Consider is as a practice.
.ljuser img[src="LJ_SMALL_ICON_IMAGE_URL"] { width: 0; height: 0; padding: 19px 0 0 15px; background-image: url('URL OF ALTERNATIVE ICON'); background-repeat: no-repeat; background-position: left center; } Wanted to change all of them?
This code should be use if you would like to change two or more of those small icons. (To cut down file size and make everyone envy your CSS skills :P)
/* http://ephi.livejournal.com/665.html */ .ljuser img { /* fallback code for older browsers */ width: 0; height: 0; padding: 12px 0 0 11px; /* for some reason IE doesn't understand background shortcuts for this one */ background-image: url('URL OF GENERAL IMAGE'); background-repeat: no-repeat; background-position: left center; } .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { background-image: url('URL OF YOUR USER ICON'); } .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { background-image: url('URL OF YOUR COMMUNITY ICON'); } .ljuser img[src="http://p-stat.livejournal.com/img/syndicated.gif"] { background-image: url('URL OF YOUR FEED ICON'); } .ljuser img[src="http://p-stat.livejournal.com/img/newsinfo.gif"] { background-image: url('URL OF YOUR NEWS ICON'); } Care to explain this?
Sure. This technique we are using is called CSS Advanced Selectors. It is available as part of CSS 2.0, only modern browser support this technique, unfortunately IE 6 does not. Since many people still use IE 6 and any prehistoric browsers, if you want your readers be able to see at least one image, you have to use the fallback code and let them see-at least-an image (the general image).
/* http://ephi.livejournal.com/665.html */ .ljuser img { /* this code shrunk original image width to zero */ width: 0; /* meanwhile this code shrunk original image height to zero, that makes the image invisible */ height: 0; /* this is how we put the replacement image, as a background */ background-image: url('URL OF GENERAL IMAGE'); background-repeat: no-repeat; background-position: left center; /* now, since the image we're replacing has to be seen, we have to define the padding */ padding: 12px 0 0 11px; } What's with the padding?
afuna explained it here, better than I can ;)
Most layouts need to re-adjust the padding in each of the CSS rules, so adjust yours according to your icon image size. If you don't have 17x17 pixels images like the standard LJ does, just adjust the padding quantity.
Notes
- Other than the four images I listed above, there's also icons/widgets for OpenID and Sponsored Community in LJ at this time.
- With the same principle and method, you can actually changed your security-level icon (eye and lock) as well. Here's how: S1, S2.
- You can also code this with S2 programming language, read the documentation at LJ Dev for other people's attempt.
- In S2 style system, everytime you change to a new basic layout, you have to input the codes again.
- If you understand CSS Basic Selectors, you can actually define different user info images for different part of your layout (Navigation Strip, Entry Area, Sidebar, etc)
Go to Resources, and look for the title "Mini Icons/Widgets"
Google keywords: sprites, mini dolls, chibi dolls, etc.
Eg: Ouran sprites, Furuba sprites.
Sample
See it in action.
Credit?
Credit is not necessary, but a link back to the tutorial would be nice, so people can learn, too. CSS codes are not mine, I'm just explaining the technique.