LJ CSS: User and Community Icon Fix

[sarken]

Like many others here, I use my stylesheet to change the icons that appear in user (sarken) and community (mintyapple) names. I'm lazy, so I used loveicon's Tiny Icon Generator.

Unfortunately, in the past few days, the generated code stopped doing its job, and most of the icon was cut off -- at least in Safari and Firefox; I'm not sure about IE. After a bit of quick tinkering, I discovered a way to fix this problem, and I thought I'd share it with all you other layout-conscious folks. Both the old code and the new code are under the cut so you can see where the differences are in order to make corrections to your own stylesheets. The examples here are for 16x16 images, so feel free to adjust the padding dimensions accordingly.



Old code, from Tiny Icon Generator:

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-color: transparent;
/* so that IE users will still see an image */
background-image: url(yourimageurl);
padding: 16px 16px 0 2px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(yourimageurl);
padding: 16px 16px 0px 2px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(yourimageurl);
padding: 16px 16px 0px 2px;
}

Modified code:

.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
background-color: transparent;
/* so that IE users will still see an image */
background-image: url(yourimageurl);
padding: 16px 0px 0 16px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-image: url(yourimageurl);
padding: 16px 0px 0px 16px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-image: url(yourimageurl);
padding: 16px 0px 0px 16px;
}

ETA: In short, the thing to know is that your padding should be HEIGHTpx, 0px, 0px, WIDTHpx.

ETA: And afuna pointed out that the above formula can be changed to HEIGHTpx, 0px, 0px, WIDTHpx, and I changed the code to reflect that. padding: 16px 16px 0px 16px is now padding: 16px 0px 0px 16px, although the earlier version still works. This comment explains why both work, and how this whole icon thing got messed up to being with.

ETA: ephi pointed out that my modified version of the code was redundant and could be simplified, since .ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] and .ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] will inherit properties defined in .ljuser img. Therefore, I have eliminated background-color:transparent; and width: 0; and height: 0; from these two classes. I am, however, leaving the redundant padding in, since you may need different padding for your community and user icons. If this is confusing, don't worry -- it's not important, and it's not necessary to change anything if you used a previous version of this code.

ETA: pengie reports that this thread suggests adding !important to your existing padding will also solve the problem of half-visible icons. Do remember that !important needs to come before the semicolon. Using !important may cause problems in some individuals' browsers, as explained here.

Disclaimer: I'm not claiming this code as my own, and the modifications are so minimal that I'm not even claiming those. Please do not credit me. Full credit still goes to loveicon's Tiny Icon Generator. I have read the post about code stealing and re-packaging, and I don't believe that this violates those rules, as full credit is given and the intent is to teach, not redistribute. If, for whatever reason, the mod of this community or loveicon should disagree, please let me know and I will delete or modify this post accordingly.

ETA: elapses confirms that this fix works in IE.

ETA: ephi has a great post about changing community and user icons.

ETA: Updated on 03/03/09 to reflect changes to the image URLs.