[LJ/DW] Making profile icons look cool in your layout

One of the things I like about journalling platforms based on the LJ codebase is the easy shortcut for usernames that'll link to both the blog itself and the profile, with that nice little logo for the profile link.

ETA: At the top, unfortunately. The site where some of my icons was hosted, dammitja.net appears to be down, I'll be contacting the site owner ASAP, but in the meantime, the code does work, but won't display properly here using the icons I liked :-(

	LJ	DW	Mine
User
Community
Feed
Others

Thing is, the nice little logo doesn't always suit the style of the place it's appearing in, or the colour scheme of the layout. So, given I know how to replace them, I thought I'd update the code and add some new tweaks. As always, CSS hackery, playing with CSS is both fun and easy, I highly recommend it for people of a web-savvy nature.

I have, naturally, chosen a Doctor Who theme to my replacement images—feel free to replace them with something else if you wish. I forget where I got the original code for to do this, it's heavily updated now, but I'd like to credit the author, so if you know, gimme a link?

.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* so that IE users will still see an image */ background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg); padding: 19px 15px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/silk/identity/user.png"] { background-color:transparent; background-image: url(http://dammitja.net/lj/opp/drwho06.gif); padding: 19px 15px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/silk/identity/community.png"] { background-color:transparent; background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fzf79); padding: 18px 11px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/silk/identity/feed.png"] { background-color:transparent; background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg); padding: 18px 15px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/silk/identity/user_staff.png"] { background-color:transparent; background-image: url(http://dammitja.net/lj/opp/drwho05.gif); padding: 18px 15px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/silk/identity/openid.png"] { background-color:transparent; background-image: url(http://dammitja.net/lj/opp/flibble.gif); padding: 18px 15px 0 2px !important; } .ljuser img[src="http://s.dreamwidth.org/img/external/lj-userinfo.gif"] { background-color:transparent; background-image: url(http://www.livejournal.com/img/pencil.gif); padding: 17px 17px 0 2px !important; }Anyway. Dreamwidth users should go to the DW Custom CSS page and paste the code into the big box.

.ljuser img { width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; /* so that IE users will still see an image */ background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg); padding: 19px 15px 0 2px !important; } .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { background-color:transparent; background-image: url(http://dammitja.net/lj/opp/drwho06.gif); padding: 19px 15px 0 2px !important; } .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { background-color:transparent; background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fzf79); padding: 18px 11px 0 2px !important; } .ljuser img[src="http://l-stat.livejournal.com/img/syndicated.gif"] { background-color:transparent; background-image: url(http://pics.livejournal.com/snapesbabe/pic/000fxssg); padding: 18px 11px 0 2px !important; }Livejournal users should go to the LJ Custom CSS page and, go on, have a guess...

Yup, copy and paste the code into the box. One little caveat—it's replacing images taken from l-stat.livejournal.com, if LJ changes their CDN again, then the URL might change and the code'll stop working, I'll update it as soon as I know to, it's likely to be a simple change the letter hack (it used to be p-stat.*)

The Colin icon is taken from allah_sulu's Ten Doctor's. If you want to use different images, then replacing the image location is fairly easy, just make sure you also change the dimensions in the 'padding' area, the first two are effectively height and width.

I deliberately haven't done one for OpenID accounts, I might change my mind on that but I think the OpenID logo ought to be got used to. I'm considering a DW staff replacement, but not sure what I should go for (either Five or appeal a bit). Haven't bothered with sponsored Comms, probably ought to, not doing so means the image won't show up at all.

As always, feel free to link or comment with questions, etc.