?

Log in

No account? Create an account
 
 
trading secrets for sugar cubes
Default userhead blocking custom userhead.
June 19th, 2012 @ 09:09 pm
Tags:
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:



No idea what's going on, it was all working fine yesterday! I don't think it's my CSS, since it's been working fine for over a year (and also, after some further poking, it's happening on other people's custom layouts.) Anyone have any ideas?

If you need to see it live, you can see it at my journal, temporalranger, or my graphics comm drtytrenchicons

ETA: The fix is in the comments.
 
Page 1 of 2
<<[1] [2] >>
( Post a new comment )
 
[fʏʃ]fueschgast on June 19th, 2012 11:41 am (UTC)
Yeah, LJ changed something again :o/

But fixing it was easier than I expected \o/. Add !important before every semicolon in the userhead codes.
 
Funk: Photo - Norbetangrylogic on June 19th, 2012 11:49 am (UTC)
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?

Edited at 2012-06-19 11:56 am (UTC)
 
(no subject) - fueschgast on June 19th, 2012 12:04 pm (UTC)
 
(no subject) - angrylogic on June 19th, 2012 02:44 pm (UTC)
 
(no subject) - petitefee24 on June 19th, 2012 07:24 pm (UTC)
 
(no subject) - finnickodair on June 19th, 2012 12:01 pm (UTC)
 
(no subject) - fueschgast on June 19th, 2012 12:09 pm (UTC)
 
(no subject) - finnickodair on June 19th, 2012 12:15 pm (UTC)
 
(no subject) - fueschgast on June 19th, 2012 12:38 pm (UTC)
 
(no subject) - finnickodair on June 19th, 2012 12:40 pm (UTC)
 
(no subject) - heard_the_owl on June 21st, 2012 01:34 am (UTC)
 
(no subject) - shiorita on February 3rd, 2013 01:00 am (UTC)
 
(no subject) - nomoreprinces on June 19th, 2012 02:14 pm (UTC)
 
(no subject) - london_fan on June 19th, 2012 06:37 pm (UTC)
 
(no subject) - betgirl on June 25th, 2012 01:13 am (UTC)
 
(no subject) - bookishgeek on June 26th, 2012 10:36 pm (UTC)
 
(no subject) - fueschgast on June 26th, 2012 10:45 pm (UTC)
 
(no subject) - ohstarling on July 2nd, 2012 07:52 pm (UTC)
 
 
Aryn Wakefieldbookish_blonde on June 19th, 2012 03:57 pm (UTC)
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?
 
Anjali.anjak_j on June 19th, 2012 04:31 pm (UTC)
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.
 
(no subject) - bookish_blonde on June 19th, 2012 04:42 pm (UTC)
 
 
Anjali.anjak_j on June 19th, 2012 04:29 pm (UTC)
Thanks to everyone who contributed to the answers on this page. Most helpful in fixing the issue for me.
 
 
(no subject) - hermanwarren on June 19th, 2012 05:18 pm (UTC)
 
thniduthnidu on June 19th, 2012 05:59 pm (UTC)
DO NOT FEED THE SPAMMERS.
DO NOT BITE THE PHISHING LURES.
 
 
(no subject) - sazz_k on June 19th, 2012 07:43 pm (UTC)
 
 
5492: I <3 computerskiya71677 on June 19th, 2012 08:06 pm (UTC)
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:

.ljuser img {
width: 0px !important;
height: 0px !important;
background-repeat: no-repeat !important;
/*so that IE users will still see an image*/
background-image: url(http://i13.photobucket.com/albums/a263/kiya71677/wild_beauty_user-blue.png) !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] {
background-image: url(http://i13.photobucket.com/albums/a263/kiya71677/wild_beauty_user-blue.png) !important;
padding: 16px 0px 0px 16px !important;
width: 0 !important;
height: 0 !important;}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-image: url(http://i13.photobucket.com/albums/a263/kiya71677/wild_beauty_community-blue.png) !important;
padding: 16px 0px 0px 16px !important;
width: 0 !important;
height: 0 !important;}
 
london_fan: London - Piccadilly Circuslondon_fan on June 20th, 2012 06:01 pm (UTC)
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!
 
(no subject) - kiya71677 on June 23rd, 2012 05:49 am (UTC)
 
(no subject) - london_fan on June 23rd, 2012 10:55 pm (UTC)
 
 
(no subject) - posthoc on June 19th, 2012 08:44 pm (UTC)
 
london_fanlondon_fan on June 20th, 2012 06:12 pm (UTC)
This code should do the trick for you:

.ljuser img[src*="userinfo.gif"] { background-image: url(http://i104.photobucket.com/albums/m165/dominiquefrancon/layout/qnso6d.png) !important; padding: 16px 16px 0px 0px !important; width: 0 !important; height: 0 !important;}

.ljuser img[src*="community.gif"] { background-image: url(http://i104.photobucket.com/albums/m165/dominiquefrancon/layout/fuq2df-1.png) !important; padding: 15px 15px 0px 0px!important; width: 0 !important; height: 0 !important; }

.ljuser img[src*="openid-profile.gif"] { background-image: url(http://i104.photobucket.com/albums/m165/dominiquefrancon/layout/qnso6d.png)!important; padding: 16px 16px 0px 0px!important; width: 0 !important; height: 0 !important;}

.ljuser img[src*="syndicated.gif"] { background-image: url(http://i104.photobucket.com/albums/m165/dominiquefrancon/layout/smilies/cupcake.gif) !important; padding: 15px 15px 0px 1px !important; width: 0 !important; height: 0 !important;
 
(no subject) - posthoc on June 20th, 2012 10:26 pm (UTC)
 
(no subject) - london_fan on June 21st, 2012 08:15 pm (UTC)
 
(no subject) - dustofempires on June 21st, 2012 05:57 am (UTC)
 
(no subject) - london_fan on June 21st, 2012 08:16 pm (UTC)
 
 
trading secrets for sugar cubes: § text → holy plot twist batman!finnickodair on June 21st, 2012 09:52 am (UTC)
Ok, I used the above code, and that fixed it for the most part... but I'm getting an issue with users who have purchased a custom userhead, where it's displaying both the one coded for in CSS and their personal userhead.

You can see what I mean in this comment here.
 
[fʏʃ]fueschgast on June 21st, 2012 10:42 am (UTC)
Delete the line .ljuser line that isn't followed by an image URL in square brackets
 
(no subject) - finnickodair on June 21st, 2012 10:45 am (UTC)
 
(no subject) - jejo763 on June 22nd, 2012 01:14 pm (UTC)
 
(no subject) - fueschgast on June 22nd, 2012 01:25 pm (UTC)
 
(no subject) - jejo763 on June 22nd, 2012 01:50 pm (UTC)
 
(no subject) - fueschgast on June 22nd, 2012 02:11 pm (UTC)
 
(no subject) - jejo763 on June 22nd, 2012 02:23 pm (UTC)
 
(no subject) - fueschgast on June 23rd, 2012 10:57 am (UTC)
 
(no subject) - jejo763 on June 24th, 2012 01:19 pm (UTC)
 
(no subject) - fueschgast on June 24th, 2012 06:05 pm (UTC)
 
(no subject) - farah on August 6th, 2012 11:25 pm (UTC)
 
(no subject) - fueschgast on August 7th, 2012 09:00 pm (UTC)
 
(no subject) - farah on August 7th, 2012 10:32 pm (UTC)
 
 
Kaitchasingvertigo on June 21st, 2012 08:10 pm (UTC)
Thank you so much, fueschgast! Could not for the life of me figure out what was going on.
 
 
projectwritersprojectwriters on June 22nd, 2012 03:12 am (UTC)
Hello! We were trying to fix this userhead issue in our roleplay comm, projerctrewrite, and we're not very sure of what is happening that results in the duplicate userheads. This is the code we're trying:

.ljuser img[src*="userinfo.gif"] {background-image: url(http://i46.tinypic.com/ekeqf.png) !important; padding: 16px 16px 0px 0px !important; width: 0 !important; height: 0 !important;}

Is there something we're missing? Thank you in advance if you can help us! We're rather new when it comes to the more advance CSS codings.
 
[fʏʃ]fueschgast on June 22nd, 2012 10:28 am (UTC)
I couldn't find any userheads of users (but I think that code is working) - what I could see is a community userhead. You can fix that one by copying the .ljuser img code and replacing userinfo.gif with community.gif.
 
(no subject) - projectwriters on June 24th, 2012 02:01 am (UTC)
 
 
AVictorianGirlavictoriangirl on June 22nd, 2012 04:04 am (UTC)
Help! I've tried to fix my CSS and seem to have !important in all the places it should be, but it's still not working. Here's my code:

.ljuser img {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color:transparent !important;
/* so that IE users will still see an image */
background-image: url(http://i160.photobucket.com/albums/t196/avictoriangirl/LJ%20images/heart.png) !important;
padding: 12px 12px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] {
background-color:transparent !important;
background-image: url(http://i160.photobucket.com/albums/t196/avictoriangirl/LJ%20images/heart.png) !important;
padding: 12px 12px 0 2px !important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent !important;
background-image: url(http://i160.photobucket.com/albums/t196/avictoriangirl/LJ%20images/rainbow-1.png) !important;
padding: 12px 12px 0 2px !important;
}

 
[fʏʃ]fueschgast on June 22nd, 2012 10:55 am (UTC)
Oh, there's a lot to do. Let's see...

1. Delete the .ljuser img code that has no URL following it.

2. Then... no, you know what? We'll just do it with copy & paste. It's less works and less confusing. Replace the remaining 2 userhead code with

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat;
background-color:transparent !important;
background-image: url(http://i160.photobucket.com/albums/t196/avictoriangirl/LJ%20images/heart.png) !important;
padding: 12px 12px 0 2px !important;
}

.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-color:transparent !important;
background-repeat: no-repeat;
background-image: url(http://i160.photobucket.com/albums/t196/avictoriangirl/LJ%20images/rainbow-1.png) !important;
padding: 12px 12px 0 2px !important;
}
 
(no subject) - avictoriangirl on June 22nd, 2012 12:21 pm (UTC)
 
 
Nadinemalicat on June 22nd, 2012 05:45 pm (UTC)
I was hoping LJ would fix this so I didn't have to edit the CSS but I'm tired of waiting and tried this but it's still not working? Can someone please tell me what I'm doing wrong? Thanks!

.ljuser img { width: 0 !important; height: 0 !important; background: transparent url(http://i40.tinypic.com/288b7ug.png) no-repeat 50% 50% !important; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}

.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i40.tinypic.com/288b7ug.png) no-repeat 50% 50% !important; padding: 10px 10px 0 2px !important; }

.ljuser img[src*="community.gif"] { background: transparent url(http://i44.tinypic.com/t7bpg9.png) no-repeat scroll 50% 50% !important; padding: 10px 10px 0 2px !important;
}
 
[fʏʃ]fueschgast on June 22nd, 2012 05:57 pm (UTC)
Hello, former friend! :o)

.ljuser img[src*="userinfo.gif"] { width: 0 !important; height: 0 !important; background: transparent url(http://i40.tinypic.com/288b7ug.png) no-repeat 50% 50% !important; padding: 10px 10px 0 2px !important; }

.ljuser img[src*="community.gif"] { width: 0 !important; height: 0 !important; background: transparent url(http://i44.tinypic.com/t7bpg9.png) no-repeat 50% 50% !important; padding: 10px 10px 0 2px !important; }
 
(no subject) - malicat on June 22nd, 2012 06:10 pm (UTC)
 
(no subject) - fueschgast on June 22nd, 2012 06:24 pm (UTC)
 
(no subject) - malicat on June 22nd, 2012 06:46 pm (UTC)
 
 
Shakespeare aka Kimberleyshakespeare on June 22nd, 2012 09:28 pm (UTC)
I'm tearing my hair out. :( I've managed to correct this on a comm I run (apart from the custom userheads on that [there's a different code to use? :s]) but no matter how much I fiddle I can't get it right on my personal lj and I have never been so stumped with CSS coding before. This is my code

.ljuser img[src='http://l-stat.livejournal.com/img/userinfo.gif'] { background: url('') no-repeat !important; width: 0 !important;
height: 0 !important;}
.ljuser img[src='http://l-stat.livejournal.com/img/community.gif'] { background-image: url('') !important;width: 0 !important;
height: 0 !important; }
.ljuser img[src='http://l-stat.livejournal.com/img/icon_sticky.png'] { background-image: url('') !important;width: 0 !important;
height: 0 !important; }

I deleted a set that had no URL in the square brackets, and above this is coding for the look of the links, but there is no coding for the custom userheads (they never showed before, so I think that's why) - I'm stumped how to get rid of ALL the userheads again. Any help would be gratefully received!
 
[fʏʃ]: Muse - Absofueschgast on June 22nd, 2012 10:38 pm (UTC)
It's linking to no pics, so it can't show pics.
 
(no subject) - shakespeare on June 23rd, 2012 06:52 am (UTC)
 
(no subject) - fueschgast on June 23rd, 2012 10:53 am (UTC)
 
 
the daylight won't remember her: the man your man could smell likeredbells on June 23rd, 2012 12:13 am (UTC)
Ok, I have no idea what's going on but I've loaded this page in three different browsers and I still can't actually see the fix. As in, I don't know what to change in my CSS code to get rid of the default userheads because the four images beneath the first paragraph refuse to load. Help?
 
trading secrets for sugar cubes: § misc → death rayfinnickodair on June 23rd, 2012 12:19 am (UTC)
Try reading the comments, it's listed several times.The post was asking for help; not a solution, and the images were simply examples of the problem, not a fix.
 
(no subject) - fueschgast on June 23rd, 2012 12:28 am (UTC)
 
(no subject) - redbells on June 23rd, 2012 02:15 am (UTC)
 
 
(no subject) - mercyisme on June 23rd, 2012 10:20 am (UTC)
 
[fʏʃ]fueschgast on June 23rd, 2012 11:09 am (UTC)
There's px missing after the 4 in padding. Also, you should add no-repeat to background.

Edited at 2012-06-23 11:09 am (UTC)
 
(no subject) - mercyisme on June 23rd, 2012 11:26 am (UTC)