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

[matgb]

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.

Comments

[mendi]

Thanks for the invite Mat - you didn't send me a code, does that mean you technically own my journal - or was the code in the Link? (I'm a complete techno simpleton I'm aftraid)

[matgb]

Code was in the link, if I'd sent an email it would've been the exact same link within the email, putting it in a comment is quicker.

[matgb]

I'm not the smartest at times. I didn't do one for OpenID or Staff accounts, and then in the next sentence said that not bothering to do one for LJ sponsored Comms would mean nothing showed up.

You can probably figure out what that meant. I have thus edited incode for DW staff and OpenIDs. I think a puppet is good for OpenID, right?

[triadruid]

Snazzy post!

[miss_s_b]

Your spelling is AWFUL! :P

And your punctuation.

[mapp.livejournal.com]

Trouble is, while I like the Tardis and the Dalek icons, I don't really look at either of them and see "Community" and "RSS Feed" respectively...

[matgb]

See, I do, took a few views for my brain to get used to it, but it works. And importantly, the person most likely to see your layout is you, as it's mostly your friends page &c.

So you could replace the defaults with anything you liked, including Bunny icons, and you'd get used to it quickly.

That's especially true on DW, where the icons are new anyway.

[paulatpingu.livejournal.com]

(This is mostly to test Open ID posting)

They're nice, but I think now that the RSS logo is pretty much a Standard, changing it to something else is a bit confusing. I wouldn't have thought to look there if I was going to subscribe to your Journal/Blog/Width/Whatever.

But it's cool that you can do it, and that's worth praising.

[matgb]

See, that's the thing. When the RSS logo was introduced, LJ switched to it for syndicated accounts, but a lot of users complained about the switch, and instead the current (compromise) logo was introduced.

Because the RSS logo is a standard, but by standard it should link to an RSS feed. Not a syndicated account on the service you're on. So the RSS logo shouldn't be used to link to anything except a feed subscribable by a feedreader.

(also, if you haven't done it, you need to validate your email account here, they haven't finished making the OpenID UI really really good yet, merely upgraded it lots from LJ)

[ex_ardisia396]

I've tried adding this code to my css in my theme layer on my LJ but it wont compile.
I've put the message behind the cut:



S2 Compiler Output at Wed Jul 15 00:49:54 2009
Error compiling layer:

Compile error: line 216, column 32: Unexpected token found. Expecting: [TokenPunct] = ;
Got: [TokenIdent] = http
S2::Node, S2/Node.pm, 144
S2::NodeSet, S2/NodeSet.pm, 42
S2::Layer, S2/Layer.pm, 53
S2::Compiler, S2/Compiler.pm, 27


Context

212: /* so that IE users will still see an image */
213: background-image: url(http://i447.photobucket.com/albums/qq198/ardisia1/user_icons/user_green.png);
214: padding: 16px 16px 0 2px !important;
215: }
216: .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
217: background-color:transparent;
218: background-image: url(http://i447.photobucket.com/albums/qq198/ardisia1/user_icons/user_green.png);
219: padding: 0px 0px 0 2px !important;
220: }



Hope you can give me a clue why it's not working. I really want to get this going. Ta!!!

[matgb]

Very simple.

Add it to your Custom CSS in the normal customisation area, as per the above links. It's not an S2 hack, it's normal CSS that you can apply without using the layer editor.

[ex_ardisia396]

Thanks Matgb. I've got it working that way and renamed my user layer.
Now I just need to get the user layer working with the theme layer.

Neat code though - many thanks.

PS. The wizard compile just added three back slashes before and after the attribute selectors URL, so once the code is there it can be cut and pasted into the theme layer and will compile fine.

example:
.ljuser img[src=\\\"http://l-stat.livejournal.com/img/userinfo.gif\\\"] {
background-color:transparent;
background-image: url(http://i447.photobucket.com/albums/qq198/ardisia1/user_icons/user_green.png);
padding: 16px 16px 0 0px !important;
}

 

[matgb]

OK, so it can be put into the layer. But why would you want to?

Specifically I avoid doing so because a) it's more complicated and b) the code will need updating fairly regularly if LJ change their CDN or mess around with the settings--having it in the custom CSS box makes it a lot easier to process and less prone to breaking.

[lunadelcorvo]

This is awesome, thank you! I'm wondering though, if you know how to change the Edit/Tag/Memory/Share/Track icon images in posts as well?

In any case, thanks for sharing this!

[matgb]

Theoretically, you use the same basic code to do it with CSS--you can also do it by hacking your S2 layer if you know how to do that, but it's a different process, CSS is easier but not as good practice.

First, you need to blank the existing images, they're all contained within the Class "entry-management-links" so:

.entry-management-links img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
padding: 17px 17px 0 0 !important;
}

Then for each you need to insert a new image

.entry-management-links img[src="LOCATION OF CURRENT IMAGE"] {
background-color:transparent;
background-image: url(LOCATION OF NEW IMAGE);
padding: 17px 17px 0 0 !important;
}

Basically look at the source code of the bit you want to change to get the code, currently your journal isn't displaying them so I can't tell you specifically.

Two caveats: first is that IE users might not see anything at all, which will confuse them, second is that the icons were chosen to be generic and tie in with sets used on lots of sites, changing them might cause confusion.

First caveat is why it's better to do it in S2, there are layout comms that have layouts doing it, it should actually be a very simple bit of code, so it might even be in the S2 cookbook on the Wiki.