Tiny Icon Tutorial
Nov. 6th, 2009 11:48 am![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount 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.
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.
layout_lounge
Will try
Date: 2009-11-07 03:22 pm (UTC)Re: Will try
Date: 2009-11-09 09:27 pm (UTC)Re: Will try
Date: 2009-11-17 12:57 am (UTC)Re: Will try
Date: 2009-11-17 01:27 am (UTC)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.
(no subject)
Date: 2013-01-11 11:16 pm (UTC)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 : )
(no subject)
Date: 2013-01-12 12:13 am (UTC)thanks
(no subject)
Date: 2013-01-12 02:20 am (UTC)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~
(no subject)
Date: 2013-01-14 10:13 pm (UTC)(no subject)
Date: 2013-01-15 04:38 am (UTC)(no subject)
Date: 2013-01-16 07:33 pm (UTC)Try http://i29.tinypic.com/k1ut8m.jpg
(no subject)
Date: 2013-02-05 12:22 am (UTC)Thank you so much ^^
(no subject)
Date: 2013-02-06 08:06 pm (UTC)(no subject)
Date: 2013-06-21 12:13 am (UTC)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!!!
(no subject)
Date: 2014-02-19 06:04 am (UTC)(no subject)
Date: 2014-02-20 01:57 am (UTC)(no subject)
Date: 2017-06-06 07:49 am (UTC)(no subject)
Date: 2017-06-29 09:06 pm (UTC)(no subject)
Date: 2017-07-02 03:42 am (UTC)(no subject)
Date: 2017-07-02 05:44 am (UTC)