Tiny Icon Tutorial

[sireesanwar]

Account Status: Free
Actions: Putting Tiny Icons in your journal
Theme: Flexible Squares (not sure if it works with other themes)

I've had a lot of difficulty with this so I would recommend going step by step with this tutorial. Change one on my sections and then save your coding. This way if something doesn't work you can easily remove it.

The issue I have been having is that I will put in all the code and save but the customs saves don't actually apply. The Custom CSS page reloads white after I hit save which means something is wrong with the code or maybe there is just too much coding in that little box (I have recently discovered that there can be too much code in this box). I don't know the issue but this is why I say do it in stages.

1. You are going to be working on the Custom CSS page. You will either have a custom layout already inserted into the Custom Stylesheet box or it will be empty.

2. Tags & Currents (Music, Location, Mood & Custom Friend Groups):
In my coding you will find under SECTION: Currents, tags, comment links this coding:

.ljtags {
margin-top: 5px;
color: #b7a68b;
font-weight: lighter;
font-size: 10px;
font-family: "Verdana", arial;
text-transform: lowercase;
margin: 15px 0px 0px 0px;
padding: 5px 0px 5px 17px;
background: url(TINY ICON URL) no-repeat center left;
}

You will add the DIRECT URL LINK for your tiny icon into the () on the background line. You might have to adjust the padding to accommodate images but 16x16 images should work. The px (5px 0px 5px 17px) got Top, Right, Bottom, Left.

If you have a custom layout by another person see if you can find this coding in their layout.

If you are adding this into an empty CSS Stylesheet box just add the coding:

.ljtags {
padding: 5px 0px 5px 17px;
background: url(TINY ICON URL) no-repeat center left;
}

In my coding there should be a second called SECTION: Tiny Icons or you can add this in the CSS Box:

/*-----------------------
SECTION: Tiny Icons
-------------------------*/

.currentlocation
{
background: url(TINY ICON URL) no-repeat left center;
padding: 2px 0px 5px 18px;
}

.currentmood
{
background: url(TINY ICON URL) no-repeat left center;
padding: 2px 0px 5px 18px;
}

.currentmusic
{
background: url(TINY ICON URL) no-repeat left center;
padding: 2px 0px 5px 18px;
}
.currentgroups
{
background: url(TINY ICON URL) no-repeat left center;
padding: 2px 0px 5px 18px;
}

You will be adding your Direct Image URL to the () in each background line. I believe it is Paid Users you can see when they've made posts to custom friends groups. If you can not see your custom friends groups when posting (above Mood) then you can ignore this code portion (currentgroups) or delete it.

3. Private, Custom Friends Group and Protected Entries

/* PROTECTED ENTRY */
.subject img[src*="icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(TINY ICON URL);
}

/* FRIENDS GROUP */
.subject img[src*="icon_groups.gif"]{
width: 0; height: 0; padding: 0 16px 16px 0; background: url(TINY ICON URL); }

/* PRIVATE ENTRY */
.subject img[src*="icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0 16px;
background: URL(TINY ICON URL);
}

4. User and Community Tiny Icons
New Coding Since LJ Updates

/* USER */
html body .ljuser img {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

html body .ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

5. To get these all to work in my coding I had to go through and delete some of the extra spaces after sections and take out the ------- in each section title.