?

Log in

No account? Create an account
 

Baldyman no more! - Treasure's Den — LiveJournal

About Baldyman no more!

Baldyman no more! Sep. 4th, 2006 @ 03:37 pm Next Entry

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
  1. Read how to integrate CSS with your layout overrides
  2. 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

  1. Other than the four images I listed above, there's also icons/widgets for OpenID and Sponsored Community in LJ at this time.
  2. With the same principle and method, you can actually changed your security-level icon (eye and lock) as well. Here's how: S1, S2.
  3. You can also code this with S2 programming language, read the documentation at LJ Dev for other people's attempt.
  4. In S2 style system, everytime you change to a new basic layout, you have to input the codes again.
  5. 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)

Where to find your own mini icons?

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.

Tags:
(Leave a comment) Page 1 of 2 - [1] [2]
[User Picture Icon]
From:jaxadora
Date:November 18th, 2006 09:57 pm (UTC)
(Link)
I'm using a layer to code, and adding this code to my layer AND custom CSS. But I get a compiling error:

Compile error: line 263, column 29: 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

259:
260: }
261:
262:
263: .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"]
264: {
265: width: 0;
266: height: 0;
267: padding: 0 0 20px 15px;
[User Picture Icon]
From:ephi
Date:November 19th, 2006 02:55 pm (UTC)
(Link)
can I see your layer code?
[User Picture Icon]
From:_boxinghelena
Date:December 11th, 2006 05:23 pm (UTC)
(Link)
Soryy to bother you but could you point out to me what I'm doing wrong. I'm trying to "change it all at once", or at least change it so that everytime I see the baldyman guy, you'll see my usericon instead.


[User Picture Icon]
From:ephi
Date:December 12th, 2006 04:41 am (UTC)
(Link)
You forgot to put the CSS code between these tags. <style>...</style>
[User Picture Icon]
From:punkheid
Date:April 3rd, 2007 05:42 pm (UTC)
(Link)
Thanks very much for this tutorial :) I've just one question: do you know if it's possible to use different images in different places? E.g. a green man to replace baldyman in my entries, and a blue man to replace him on my friends page. I'm hoping to do this because I'm an IE user, so the little red man I use instead of baldyman shows up with a white background instead of a transparent one. I've remedied this by just colouring the background the colour of my entries, so it looks fine most of the time:

But that means the background then shows up on my friends page:

So I was hoping to be able to use two images - one for my entries and comments, and one for the "leave a comment" page and my friends page. Is it possible?
[User Picture Icon]
From:ivles
Date:April 4th, 2007 03:02 am (UTC)
(Link)
If you understand CSS Basic Selectors and familiar with HTML structure, you can try.

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)

From me: I never use Opal, so I don't know its HTML structure. I need to be familiar with its HTML structure before I can safely say you can do this. From a quick glance, I don't think it's possible for IE users. One style that allows you to do this is Tranquility 2.

Don't want to switch to Firefox? The interface and menu is pretty much the same with IE (that's why I choose to switch to FF instead of Opera ^^;)
From:succubuslove138
Date:April 17th, 2007 03:46 pm (UTC)
(Link)
my icons won't show up, do you know what i'm doing wrong? i have a paid account if that makes any difference.



[User Picture Icon]
From:ephi
Date:April 17th, 2007 03:53 pm (UTC)
(Link)
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{

What I put in pink is incorrect, only include the URL, no tags and stuff. See the examples. And change other things accordingly.



[User Picture Icon]
From:yamatsumi
Date:July 4th, 2007 09:10 pm (UTC)
(Link)
hi, I saw you posted tutorial at s2flexisquares on how to change reply page images and since it's basically the same as in this entry I decided to ask here. I hope you don't mind coz I really sucks with CSS >_<

anyway, I added the code you posted here at the very bottom of CSS coz when adding to Entry Stuff - Comments it ruins the whole comment box >_< and duplicaded it for every image but somehow only one image got changed and all the rest stayed the same. here's the pic:



can you please help me fix it?

oh I'm on S2 Flexible Squares payed account and I'm using this layout. thanks in advance
[User Picture Icon]
From:ephi
Date:July 5th, 2007 03:38 am (UTC)
(Link)
Sorry, I can't answer your question, because I need an example page of your problem first.

I tried to see your LJ but somehow I cannot view your HTML source :(
[User Picture Icon]
From:sakenichi
Date:July 27th, 2007 01:38 am (UTC)
(Link)
http://community.livejournal.com/luvin_layouts/

I don't know if there's an issue with IE7 or not, but it works perfect in Firefox, but the images don't show up in IE7 =( Any ideas?
[User Picture Icon]
From:ephi
Date:July 27th, 2007 11:41 am (UTC)
(Link)
Can I get back to you on Monday, at home I don't have IE7 :D

And can you provided a link to a page where the images would show up? Thanks.
[User Picture Icon]
From:ephi
Date:August 31st, 2007 06:29 am (UTC)
(Link)
Your creative way of saying thanks is enough ;-)
[User Picture Icon]
From:nomoreprinces
Date:September 12th, 2007 12:32 am (UTC)
(Link)
I can't seem to make this work for Bloggish. I'm pulling my hair out here. If I take out the code I can see the little man, but he disappears once I put the code it.

I've gotten it to work on SmoothSailing. I'm not sure why it won't go for Bloggish.
[User Picture Icon]
From:nomoreprinces
Date:September 12th, 2007 12:35 am (UTC)
(Link)
Oh. The LJ in question is berry_goo on the friend's list.
[User Picture Icon]
From:av8rmike
Date:September 15th, 2007 09:48 pm (UTC)
(Link)
Just thought you should know: In release 14, they hard-coded some padding into the right side of the ljuser tag, screwing up people who were using this tutorial. To fix it, you have to add !important after the padding, e.g.:
padding: 17px 20px 0 0 !important;
to override the inline CSS.
[User Picture Icon]
From:ephi
Date:September 17th, 2007 12:59 am (UTC)
(Link)
Thanks, av8rmike. LJ seems to like to do this a lot. *sigh*
[User Picture Icon]
From:regalish
Date:October 4th, 2007 05:17 am (UTC)
(Link)
If I put in a 'general image' as you instruct, it overrides the other two codes and that becomes the image for users AND communities. How do I fix this in IE? It's getting frustrating -- I've tried the generator, I've tried looking at the other tutorials you linked to and nothing is working.
[User Picture Icon]
From:ephi
Date:October 4th, 2007 07:00 am (UTC)
(Link)
what ie? 6 or 7?
what codes? I'm not a mind reader.
and please provide an entry example
[User Picture Icon]
From:evilgrins
Date:October 9th, 2007 01:50 am (UTC)
(Link)
doesn't work
[User Picture Icon]
From:ephi
Date:October 9th, 2007 02:26 am (UTC)
(Link)
I don't mean to sound rude but if you are serious of looking for help, you should leave some informative backgrounds about the problem, instead of a simple comment like this, I might be able to help you in the first try. ;-)

informative backgrounds: browser you are using, journal and entries where we can see replacement image that doesn't work.
[User Picture Icon]
From:daretobelieve
Date:November 17th, 2007 04:13 pm (UTC)
(Link)
I can't seem to get it to work. this is my coding (http://www.livejournal.com/customize/advanced/layersource.bml?id=9619209)
Did I do something wrong?
[User Picture Icon]
From:ephi
Date:November 19th, 2007 02:05 am (UTC)
(Link)
I'd rather prefer you give me a preview of the layout, so I can point what's wrong :D
[User Picture Icon]
From:justcyanide
Date:December 13th, 2007 03:23 pm (UTC)
(Link)
Hi :)
First of all, my English is crappy so I apologise for the lot of grammatic mistakes ^^U xD

Well, I have a problem putting the tiny icons; it's kind of strange, because the user info icon appears as I want to. But the others don't :S
I didn't understand very well what I should copy here for you to see, I hope that is okay.
Is just the part of the tiny icons:

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"]
{
width: 0;
height: 0;
padding: 0 0 11px 12px !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/userinfo-purple.png);
background-repeat: no-repeat;
background-position: left center;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"]
{
width: 0;
height: 0;
padding: 12px 12px 0 0 !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/community-purple.png);
background-repeat: no-repeat;
background-position: left center;
}

.ljuser img[src="http://stat.livejournal.com/img/syndicated.gif"]
{
width: 0;
height: 0;
padding: 0 0 12px 12px !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/feed-purple.png);
background-repeat: no-repeat;
background-position: left center;
}

.ljuser img[src="http://stat.livejournal.com/img/newsinfo.gif"]
{
width: 0;
height: 0;
padding: 0 0 12px 12px !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/news-purple.png);
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://stat.livejournal.com/img/icon_private.gif"]
{
width: 0;
height: 0;
padding: 0 0 12px 12px !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/eye-purple1.png);
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://stat.livejournal.com/img/icon_protected.gif"]
{
width: 0;
height: 0;
padding: 0 0 12px 12px !important;
background-image: url(http://i186.photobucket.com/albums/x43/Kmi_Punky/lock1-purple.png);
background-repeat: no-repeat;
background-position: left center;
}

My layout has another tiny icons (not the predeterminated for lj) included, so I though that it could be interfering or something, buy I also tried erasing that part in my layout codes and it was the same. User Icon fine, the others nop.

Well, big thanks to you for making the tutorial, it's pretty clear :)
Bye,
Kammie.


[User Picture Icon]
From:ephi
Date:December 15th, 2007 03:31 am (UTC)
(Link)
You don't have to say sorry, English is not my first language as well.
You are not using the correct selector.

.ljuser img is the CSS selector for the LJ baldyman, for others, you may want to try some other tutorial, check everything_lj's memories for tutorial.
[User Picture Icon]
From:ivles
Date:December 17th, 2007 12:18 pm (UTC)
(Link)
[User Picture Icon]
From:yuri_san
Date:March 5th, 2008 06:15 am (UTC)
(Link)
thank you so much! (人*-з-)chu★.:゚+。☆
(Leave a comment) Page 1 of 2 - [1] [2]
Top of Page Powered by LiveJournal.com