INSTALLING TINY ICONS

[maytel]

Last Edit: November 08, 09
wingweaver22 has developed a tiny icon generator.
Click the button below.



This guide was created for people who want to customize their existing layouts by using the mini icons I have designed.
My tiny icons have been removed since some people have started distributing them without my permission. Yes, it sucks.

NOTE:
This guide is meant to serve as a helping hand only.
I am not an HTML/CSS expert, therefore I cannot help you if you venture into the experimental.
You might want to save a copy of your untouched layout in a .txt file before you start messing with it.
I've only tested the codes below with with FLEXIBLE SQUARES (because that's what I use~).


INSTALLATION:
♥ Upload the images to your own server. ex: Photobucket.
♥ Add the codes on your Custom CSS Page.
♥ If you already have some codes on there, just add these ones on the very bottom.
♥ Replace the "background: URL(http://YOUR-OWN-IMAGE-LINK.png);" with your own image link!!
♥ Make sure you have the correct padding (see below).
DO NOT CHANGE ANY OTHER EXISTING LINKS!

IMPORTANT:
If you don't use my tiny icons, you might have some problems with the padding section of the CSS.
You need to know the height/width of the icons you plan on using.
Example:
If your tiny icon is 12px wide and 18px high.
Your padding should look like this:
padding: 18px 0px 0 12px;
The first number is for the height and the the last one is for the width.

This part works with Basic, Plus and Paid Accounts:



/* PROTECTED ENTRY */
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* PRIVATE ENTRY */
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

.subject img {
width: 0;
height: 0;
background-repeat: no-repeat;
/* IE is on crack and needs this */
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
padding: 16px 0px 0 16px;
}



/* USER */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* IE is on crack and needs this */
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
padding: 16px 0px 0 16px;
}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
padding: 16px 0px 0 16px;
}

***Someone also mentionned that you can use this for the custom friends group by changing the livejournal link to:
http://stat.livejournal.com/img/icon_groups.gif***

/* COMMUNITY */

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
padding: 16px 0px 0 16px;
}

This part works with Plus and Paid Accounts Only:



/* ANONYMOUS */
.box img[src="http://l-stat.livejournal.com/img/anonymous.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* OPEN ID*/
.box img[src="http://l-stat.livejournal.com/img/openid-profile.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* LOGGED IN USER */
#ljuser_row img[src="l-http://stat.livejournal.com/img/userinfo.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}



/* DELETE */
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"]{
width:0;
height:0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* SCREEN */
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"]{
width:0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* FREEZE */
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* EDIT */
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

/* TRACKING */
.ljcmt, .commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(http://YOUR-OWN-IMAGE-LINK.png);
}

TUTORIALS BY OTHERS:
cartonage has an amazing tutorial on how to modify tags, location, mood and music icons. There's also a very good css guide on the Flexible Squares Style.
ephi wrote a very complete tutorial on how to change your user, community, private, locked, syndicated etc icons.
msblackeyeliner wrote a pretty extensive tutorial on how to change the security icons in almost every S2 Layout available!
minty-peach shares the codes for special comment page images and contextual pop-up codes here. It's kind of awesome.
Please let me know if you know of other good tutorials that I could add to this list.