ljuser icons customization broken + fix

Sep 14, 2007 11:38

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)

lj and browser issues, !announcements, stylesheet, misc

Previous post Next post
Up