?

Log in

No account? Create an account
 
 
06 November 2009 @ 11:48 am
Tiny Icon Tutorial  
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:

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:


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

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


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


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.
 
 
 
my_lilac_dreamsmy_lilac_dreams on November 7th, 2009 03:22 pm (UTC)
Will try
As soon as i can find the icon i'm looking for. Thanks!
Jill aka Jo: Misc: Kermit & Fozziesireesanwar on November 9th, 2009 09:27 pm (UTC)
Re: Will try
Cool. I'm glad it can be a help.

my_lilac_dreamsmy_lilac_dreams on November 17th, 2009 12:57 am (UTC)
Re: Will try
I got it to work. But there is still a lock icon just before the subject in each of my entries. Could it be because my journal is viewable to friends only? Is there a way to change the font of my entries?
Jill aka Jo: BN: Michael Spyingsireesanwar on November 17th, 2009 01:27 am (UTC)
Re: Will try
The lock is a default item to tell you that it isn't an entry opened to the public. I'm not sure if you can remove them.

The header on your journal is gorgeous.

In the Entries section of the coding you will find

.entry {
padding: 10px;
margin: 0px;
color: #513a3a;
font-family: "arial";
font-size: 12px;
text-align: left;
}

You want to change the Arial to whatever font you prefer. You might want to change that like to

font-family: "NEW FONT", arial;

This way if people can't see the font you are using it will revert to the arial for them.
Nekifishiemon on January 11th, 2013 11:16 pm (UTC)
First, thanks for the awesome layouts : )
and second, I've already use some tiny icons and everything it's fine but after I save changes for User, the layout is not visible :(
Could you help me?

And thanks again for your awesome lj and help : )
Jill aka Josireesanwar on January 12th, 2013 12:13 am (UTC)
Did you fix it or is it on a community where you are having this problem. Point me towards the problem.

thanks
Nekifishiemon on January 12th, 2013 02:20 am (UTC)
nope, I couldn't.
It's in the CSS page, I show you:

http://imageshack.us/a/img685/4181/img1oh.jpg
When I try to change the url for the tiny icon:
http://imageshack.us/a/img853/1129/img3a.jpg
and then save changes my journal looks like this:
http://imageshack.us/a/img689/751/img4zj.jpg

It doesn't matter if I change the two links or one. :|

thank you~
Jill aka Jo: ST: Dual Spocksireesanwar on January 14th, 2013 10:13 pm (UTC)
Give me the url to the new images you'd like to use, please.
Nekifishiemon on January 15th, 2013 04:38 am (UTC)
Jill aka Josireesanwar on January 16th, 2013 07:33 pm (UTC)
That really is strange because it is only putting in the url that changes everything. What I did to get around this issue is to use a TinyPic URL which helped with the issue....

Try http://i29.tinypic.com/k1ut8m.jpg
Nekifishiemon on February 5th, 2013 12:22 am (UTC)
ohh, really! It works now!
Thank you so much ^^
Jill aka Josireesanwar on February 6th, 2013 08:06 pm (UTC)
I'm glad.
Judith Bartholomewjoyfulljunebugg on June 21st, 2013 12:13 am (UTC)
I don't know how to remove the default Ljs icons from on top of the custom icons how do I do that?

This is my tiny icon section, the ones I can see work its just that the Ljs icons are on top of them.




EDIT: FINALLY SUCCESS
Between you and Tuff_Ghost (found him in your memories) I found these two replacement codes! It took an hour of replacing codes to get this to work. Although now that I understand your tut a little better I think I'll go with your 16px over the 24px I'm using the icons are a bit spread out. THANKS!!!



Edited at 2013-06-21 03:17 am (UTC)
AirUpNorthairupnorth on February 19th, 2014 06:04 am (UTC)
Thank you so much for this! ^^,
Jill aka Jo: Happy: Rapunzel Excitedsireesanwar on February 20th, 2014 01:57 am (UTC)
You are so welcome. I'm excited that it helped.
チェルシーchlsmgmhd on June 6th, 2017 07:49 am (UTC)
hi! is there a way to put tiny icon before the entry name? i am using your transparent darkness layout. thank you.
Jill aka Josireesanwar on June 29th, 2017 09:06 pm (UTC)
It appears the only ones you can do this too are private, friends and group posts. I have yet to find a simple way of adding a tiny icon for public posts. There is a complicated way if you are a paid "Pro" member but I'm not sure it is worth it.
チェルシー: 亀1chlsmgmhd on July 2nd, 2017 03:42 am (UTC)
I see. Ahm, I am using a free account and I am looking forward on your findings on how to add tiny icons on public posts. Sorry to cause you trouble and thank you in advance for your hard work. 😊
チェルシー: 亀1chlsmgmhd on July 2nd, 2017 05:44 am (UTC)
I see. Ahm, I am using a free account and I am looking forward on your findings on how to add tiny icons on public posts. Sorry to cause you trouble and thank you in advance for your hard work. 😊