shiny happy glowy ([info]afuna) wrote in [info]s2flexisquares,
@ 2007-09-14 11:38:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:!announcements, lj and browser issues, misc, stylesheet

ljuser icons customization broken + fix
This is going to affect a bunch of people, so I figure it's best to make a top level post.

Those of you using the CSS to customize your ljuser icons will notice that it no longer works properly. This is because padding was recently added to the ljuser icon (don't know if it's likely to be changed back -- I suspect not).

Anyway, to make it work again, add !important to your CSS where appropriate. This will force it to use your padding, instead of the newly-defined padding. That should make your ljuser icon customizations work as normal.

Information found here.

ETA:
Here's sample code:
padding: 16px 16px 0 0 !important;

Note that the !important has to come before the semi-colon, and that it's !important and not important!.

Also, I know there are several variations of this code floating around in various tutorials on various journals, so if you did post code about this in the past, please update it, thanks ♥. (Er I have the feeling that I did once write an entry or comment about code like this, but I have no idea where it is on the community, so I'm not taking my own advice. ;P)

ETA2:
An alternative solution which doesn't use !important. This is better, because you don't run the risk of overriding the user's browser settings, if any. I can't take credit for figuring it out, so read that post. In essence, what it does is shift the padding from the right (which conflicts with the padding-right newly put in by LJ), to the left. So if your code looks like this:

padding: 16px 16px 0 0;

change it to this:

padding: 16px 0 0 16px;

If you need a mnemonic for the order of sides, think of TRouBLe (top, right, bottom, left)




(Post a new comment)


[info]breezie
2007-09-14 04:27 am UTC (link)
thank you so much for that :)

(Reply to this)


[info]storyteller
2007-09-14 04:31 am UTC (link)
Thanks so much for this, it's really been bugging me for the last couple of hours (I thought maybe something was wrong with my server... :-?) ♥

Just a question, this also seems to have effected my "locked" and "private" images I have to replace the default ones, which aren't showing up (the default images are what show, so it's not a width problem). I added the !important to their widths/heights thing too, but it didn't change anything.

(Reply to this)(Thread)


[info]afuna
2007-09-14 05:23 am UTC (link)
Hm, this shouldn't have affected that, and I can't really tell what's going on from your description. Show me the code that you're using? :)

(Reply to this)(Parent)(Thread)


[info]storyteller
2007-09-14 01:54 pm UTC (link)
l;asks;adlk thanks, I don't mean to be a bother. I used this tiny icon generator by [info]loveicon, and previously, it worked at replacing the default lock and private eye with my own.

This is the pertinent bit of code:



and a baby screencap.

(Reply to this)(Parent)(Thread)


[info]afuna
2007-09-14 02:00 pm UTC (link)
Hm, if that's the code you're using, it probably isn't working because of the javascript, and the fact that the URLS contain an anchor/link tag (the <a href....) bit.

However, that's not the version of the code which that tiny icon generator generates. I'm not sure where you got the code from, but a quick glance at the actual code that is being generated shows that the generated code should work (with the addition of the !important in the appropriate place, of course).

(Reply to this)(Parent)(Thread)


[info]storyteller
2007-09-14 02:13 pm UTC (link)
hmm, I'll try fiddling with it! thanks for you time.

(Reply to this)(Parent)(Thread)


[info]afuna
2007-09-14 02:16 pm UTC (link)
No problem. If you run into any more problems there, give me another poke :)

(Reply to this)(Parent)(Thread)


[info]storyteller
2007-09-14 02:27 pm UTC (link)
aha! I must have typoed something, but when I just replaced what I had with this, it all started working again. Thanks again for your help!

(Reply to this)(Parent)(Thread)


[info]afuna
2007-09-14 02:28 pm UTC (link)
You're welcome! *g*

(Reply to this)(Parent)


[info]leggyslove
2007-09-14 05:16 am UTC (link)
Thank you!

(Reply to this)


[info]tyffi
2007-09-14 07:22 am UTC (link)
And I was almost killing my code because I didn't know what happened. *headdesk*

Thanks so much for this!

(Reply to this)


[info]bug_girl75
2007-09-14 10:22 am UTC (link)
Thank you for that! I wondered what was going on!!

(Reply to this)


[info]mcalex22
2007-09-14 11:00 am UTC (link)
Thank you so much. I hardly noticed till you pointed it out - and then with my limited knowledge, I just stuck !important everywhere with padding.

The only annoying thing about my code is I still can't seem to make the user icons different between coms and people - but I really appreciate you telling us this (especially when I haven't a clue about these things!)

(Reply to this)(Thread)


[info]afuna
2007-09-14 02:14 pm UTC (link)
Glad I could help! (And I hope it worked)

Are you using IE by any chance? That doesn't recognize the CSS syntax used to target specific images (user vs comm vs syndication), so it falls back upon the CSS for a generic image instead, which may be why you're only seeing one icon for comms and people.

(Reply to this)(Parent)


[info]jenlynn820
2007-09-14 02:51 pm UTC (link)
thanks for this, I noticed something weird last night and was going to ask for help here if I didn't see an answer today.

(Reply to this)


[info]passing_girl
2007-09-14 03:25 pm UTC (link)
Thank you! I was wondering what was wrong.

(Reply to this)


[info]weehobbit
2007-09-14 03:30 pm UTC (link)
thank you so much! i thought i was going crazy because i hadn't seen anyone post about it yet. i just thought it was one of those lj down-times or something and it would go back to normal, lol.

(Reply to this)


[info]nicolejacks
2007-09-14 05:19 pm UTC (link)
*kisses you*
Thanks!

(Reply to this)(Thread)


[info]afuna
2007-09-14 05:21 pm UTC (link)
*blushes* ;)

Happy to help!

(Reply to this)(Parent)


[info]benitle
2007-09-14 05:24 pm UTC (link)
Awesome, thank you! And I just feared it was my browser fucking things up.

(Reply to this)


[info]callmeang
2007-09-14 07:33 pm UTC (link)
Oi, I've spent the last twenty minutes trying to figure out what happened to my little guys. Thank you so much.

(Reply to this)


[info]bluemotion
2007-09-15 03:10 am UTC (link)
Thank youuu. I knew this community would have the answer.

(Reply to this)


[info]thestarlet
2007-09-15 06:15 am UTC (link)
Thank you very much! :)

(Reply to this)


[info]multicolour
2007-09-15 11:26 am UTC (link)
Ooooh thank you so much for this!
I've been wondering ever since yesterday how to fix that.
Thanks a lot! :)

(Reply to this)


[info]misseri44
2007-09-15 03:13 pm UTC (link)
Thanks for the info, i was going crazy thinking that something in my layout had changed without me knowing what it was

(Reply to this)


[info]mosquetera
2007-09-15 09:29 pm UTC (link)
Solved! Thanks!

(Reply to this)


[info]destroyah_des
2007-09-16 01:18 pm UTC (link)
OMG Thank you. I was just getting ready to ask about this. I just added the code for Tiny Icon and thought I'd broken my journal. It worked then it was gone. Would happen once I came a long. Gosh it's amazing just that makes a difference. I'm glad my little budgie heads are back.

(Reply to this)


[info]jennaxrose
2007-09-17 12:12 am UTC (link)
Thank you!

(Reply to this)


[info]moof_mum
2007-09-17 08:34 am UTC (link)
thankyou :D

(Reply to this)


[info]inishmaan
2007-09-17 04:10 pm UTC (link)
Thank you! :D

(Reply to this)


[info]sarken
2007-09-18 07:58 am UTC (link)
Thanks for linking to my alternative -- I'd have probably just contented myself with !important if I had known this post existed. ;o)

But, seriously, I've learned a ton from this community, and I'm so happy I could give back in some small way.

(Reply to this)(Thread)


[info]afuna
2007-09-18 08:07 am UTC (link)
No, thank you. Switching the padding to the opposite side is brilliant ;P And it makes me happy because I hate adding arbitrary !important statements to the code.

PS. commented to that post -- though you've probably seen it by now, and also edited my entry above to better reflect why I think your alternative should be used *grin*.

(And I'm glad that this community has been such a big help for you \o/)

(Reply to this)(Parent)


[info]mindori
2007-09-18 09:14 am UTC (link)
GUH. THANKS FOR THAT.

(Reply to this)


[info]kentucka
2007-09-19 09:16 am UTC (link)
If you need a mnemonic for the order of sides, think of TRouBLe (top, right, bottom, left)

and here I thought the order was simply clockwise... :D

(Reply to this)(Thread)


[info]afuna
2007-09-19 09:17 am UTC (link)
It is? Oh hey, it is!

(Reply to this)(Parent)(Thread)


[info]kentucka
2007-09-19 09:15 pm UTC (link)
hehe. thank you, btw. I was pleasantly surprised to find the fix for a problem I had noticed only a day earlier (because sometimes I'm slow, and I suspected photobucket issues first).

(Reply to this)(Parent)


[info]coco_belle
2007-09-24 11:30 am UTC (link)
oh my god i am so frustrated, i have tried and tried to get my tiny icons to work using the new !important; coding but it only shows half my protected entry icon and none of my user or communty ones. I am using the [info]loveicon generator, any suggestions? ♥

(Reply to this)(Thread)


[info]afuna
2007-09-24 11:51 am UTC (link)
Hm, code you're using, please? *lazy* ;)

(Reply to this)(Parent)(Thread)


[info]coco_belle
2007-09-24 12:21 pm UTC (link)
This is what comes out of the tiny icon generator before adding the !important; coding:

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: px px 0px 0px;
background: url(http://i131.photobucket.com/albums/p309/curlsnhipbones/minty_peachheart.png);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: px px 0px 0px;
background: url();
}

.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://i131.photobucket.com/albums/p309/curlsnhipbones/minty_peachuserpink.png);
padding: px px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i131.photobucket.com/albums/p309/curlsnhipbones/minty_peachuserpink.png);
padding: px px 0 2px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i131.photobucket.com/albums/p309/curlsnhipbones/icon10.png);
padding: px px 0 2px;
}




(Reply to this)(Parent)(Thread)


[info]afuna
2007-09-26 02:10 pm UTC (link)
Oops, I never did reply, did I? I mean to, but had some connection problems...

Anyway, the problem seems to be that you have no value for the width/height. See the padding, where it says "padding: px px 0 2px"?

(Reply to this)(Parent)


[info]coco_belle
2007-09-24 12:23 pm UTC (link)
and the code for the layout is over here: http://emmahyphenjane.livejournal.com/4542.html#cutid1

It is #9 Oxygen. Shall I post it here or can you get it from there? :) thank you for replying so quickly!

(Reply to this)(Parent)


[info]lizzy_maxia
2007-09-28 04:47 pm UTC (link)
Thank you!

(Reply to this)


[info]utopian_sky
2007-10-04 08:14 pm UTC (link)
Thank you so much!!

(Reply to this)


Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…