Default userhead blocking custom userhead.

[finnickodair]

I'm having issues with the layout on my journal and graphics page. Suddenly, instead of replacing the default userhead with the custom mini-icon coded in my CSS, the default is appearing in front of the custom one. Ala the following:

Comments

[fueschgast]

Yeah, LJ changed something again :o/

But fixing it was easier than I expected \o/. Add !important before every semicolon in the userhead codes.

[angrylogic]

Thanks for that! I was about to reply saying that the same thing had happened to my tiny icons.

EDIT: Ah wait. I just had a look at the code I'm using for tiny icons (from Malionettes generator) which looks like this (with my URL in it):

img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img228.imageshack.us/img228/4445/199w.png) no-repeat !important; padding: 16px 0 0 16px !important; }

Looks like there is an !important before every semicolon, but it's still not working :\ Or am I not seeing one?

[fueschgast]

You need to add .ljuser in front of the userhead codes.

[angrylogic]

Thanks! That worked perfectly :)

[bookish_blonde]

I tried putting in !important and .ljuser but I'm still getting the duplication. My code looks this:

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="userhead"] {background-color:transparent !important; background-image: url(http://i43.tinypic.com/15efwwi.jpg) !important; padding: 14px 14px 0 2px !important; background-position: center left !important; }

.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i39.tinypic.com/2vamsyp.jpg) !important; padding: 14px 14px 0 2px !important; background-position: center left !important; }

I am CSS-challenged. Halp?

[anjak_j]

You're missing a couple of lines from each set:

width: 0 !important;
height: 0 !important;

Just add them at the end, inside the } bracket.

[bookish_blonde]

Oh! That worked! Thank you!

I'm like, CSS dumb. I got the layout from one of the layout comms here on LJ and only figured out enough to changed colors and remove backgrounds. But I have no idea how to write it from scratch or fix stuff when it's broken.

[anjak_j]

Thanks to everyone who contributed to the answers on this page. Most helpful in fixing the issue for me.

[thnidu]

DO NOT FEED THE SPAMMERS.
DO NOT BITE THE PHISHING LURES.

[kiya71677]

I'm pretty rusty using CSS, but I've added the !important along with width and height and I'm still getting the overlap. Here's what I've got

[london_fan]

You have some outdated code for the images in general. Try replacing

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] with .ljuser img[src*="userinfo.gif"]

and

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] with .ljuser img[src*="community.gif"]

That should do the trick!

[kiya71677]

Thank you! It worked for the most part, but I had to read down further to figure out how to solve the same problem with syndicated feeds and custom userheads. I'm using an old layout that I don't update often; I only notice when something goes wrong.

[london_fan]

Ah, I'm glad to hear you got it to work in the end. Yes, there are a couple of other userheads that can be customized, too, e.g. open-id or anonymous users and news.