?

Log in

No account? Create an account
 

Baldyman no more!

About what you think I should put in here?

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).

then how?Collapse )

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 2 of 2 - [1] [2]
[User Picture Icon]
From:la_petite_singe
Date:April 29th, 2008 03:55 am (UTC)
(Link)
OK, I give up--what am I doing wrong? :P here's my custom layer. It was working the other day!
[User Picture Icon]
From:ephi
Date:April 29th, 2008 04:06 am (UTC)
(Link)
I cannot see your custom layer, it said, I am not authorized to view it. Sorry, can't help.
[User Picture Icon]
From:la_petite_singe
Date:April 29th, 2008 02:02 pm (UTC)
(Link)
What if I show it to you this way?:

[User Picture Icon]
From:ephi
Date:April 30th, 2008 02:19 am (UTC)
(Link)
The code is not identical with the code in this entry.
Hint: background-image property.
It has a HTML tag that should not be in any CSS value.

Meanwhile in your journal CSS after the declaration for h3.entry-header there are two characters that should not be there either.
;"
[User Picture Icon]
From:nomoreprinces
Date:May 5th, 2008 02:22 am (UTC)
(Link)
LJ changed the locations of the tiny icons they're at p-stat.livejournal.com rather than stat.livejournal.com
[User Picture Icon]
From:reekwadge
Date:April 19th, 2009 02:15 pm (UTC)
(Link)
Hey!

Thank you for this great tutorial! I wanted to have other images for quite a while and now I finally know how to get them. :D

But I still have a problem. I'm using IE7 and LJ uses the user-image for communities, too.

This is the code I'm using:

.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('http://i178.photobucket.com/albums/w266/watchersgoddess/icons/userinfo-teal.png');
background-repeat: no-repeat;
background-position: left center;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"]
{ background-image: url('http://i178.photobucket.com/albums/w266/watchersgoddess/icons/userinfo-teal.png'); }

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"]
{ background-image: url('http://i178.photobucket.com/albums/w266/watchersgoddess/icons/community-teal.png'); }


And here's an example of what I mean. There are a lot of communities amongst my credits, but they all look like single LJ-users.

Can you help me?
[User Picture Icon]
From:ladyelysium
Date:October 16th, 2009 02:53 pm (UTC)
(Link)
I can't get it to work either :(

I'm using the "Flexible Squares" layout and here's my coding:

.ljuser img {
/* fallback code for older browsers */
width: 0;
height: 0;
padding: 17px 20px 0 0;
/* for some reason IE doesn't understand
background shortcuts for this one */
background-image: url('http://i271.photobucket.com/albums/jj121/suckmyproverbial/user_icon_darkgrey.gif');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 0 0 15px 10px;
background-image: url('http://i271.photobucket.com/albums/jj121/suckmyproverbial/user_icon_darkgrey.gif');
background-repeat: no-repeat;
background-position: left center;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"]{
width: 0;
height: 0;
padding: 0 0 18px 15px;
background-image: url('http://i271.photobucket.com/albums/jj121/suckmyproverbial/com_icon_darkgrey2.gif');
background-repeat: no-repeat;
background-position: left center;
}

But no icons show up at all :(
(Leave a comment) Page 2 of 2 - [1] [2]
Top of Page Powered by LiveJournal.com