Tiny icons

[weehobbit]

Images:
Look best on very light backgrounds





















Zip file

Notes about the code:

• Works for Internet Explorer 7+, Firefox, and newer browsers in general. Internet Explorer 6 or below will only display one icon.
  
• The code below doesn't work on all styles. If this is the first time you're doing tiny icon customizations AND the code doesn't work below, then go to your style's community to find the appropriate code.
  
• See this post by babytest for more information. I originally got the code from the tiny code generator by loveicon but modifications like l-stat in the URL of the images and !important for the paddings need to be added.

Installation Instructions:
1. Save tiny icons to your own image host.

2. Code: Copy and paste the code below into notepad. After you've uploaded your images and put them into the code, changed the height and width for the image (in red and orange), and tweaked the last two padding numbers to how you see fit, paste it all into the custom stylesheet box.

11px = height, 4px = width, 3px = padding from bottom, 2px = padding from left

CODE:
.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(YOUR IMAGE FOR THE USER);
padding: 11px 4px 3px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif?v=2"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR IMAGE FOR THE USER) !important;
padding: 11px 4px 3px 2px !important;
}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif?v=2"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR COMMUNITY IMAGE) !important;
padding: 9px 9px 3px 1px !important;
}

3. Lastly, edit your userinfo and paste this into the bio section:

Tiny icons by hobbitholes

All done! Comments are appreciated :)



Also posted and tested @ graphics journal: hobbitholes