Icon Album Tutorial
Alright. It took me a few days to write this up. I hope its clear enough to everyone. I'm not very good at explaining things and tend to ramble, so...yeah. Hopefully this helps everyone who wanted to learn how to do the tables to display your icons in.
How to Create Your Very Own Icon Album!
Before we get started with this, I'm going to say that if you don't know HTML, you're probably going to be lost. I'm going to try to explain things so that everyone can understand and follow, but if this is unclear, I'm sorry! The main thing to remember if you don't know how to use HTML is don't mess with the code. If you mess with the coding at all, chances are, its going to get messed up. The only thing that you need to go in and change are the colors, and I'm going to explain how to do that in this tutorial. So with that in mind, lets jump into things!
Step One: Tools of the Trade
I'm not sure how everyone else does this, but I like to edit my table for my icon posts in notepad before I actually post it up to livejournal. That way, you have a hard copy of everything just in case anything happens over at lj. So go ahead and open up notepad. If you don't normally use notepad, then you'll need to go look up at the menu and go to the Format option. From there, make sure that Word Wrap has a checkmark by it, otherwise your text is just going to scroll off to the side forever and ever.
Also, before we get started with the table making, you'll need to have uploaded your album banner, a filler icon (one to put in the blanks where you haven't finished your icons yet. This icon will repeat itself over and over again, so try to make something a bit easy on the eyes), and whatever icons you have finished to a reliable image host. If you don't know what this is, then this challenge might not be the best thing for you. But if you know what one is, and don't have a reliable image host, I reccommend Photobucket. Once you have everything uploaded there, move on.
Step Two: The Coding
Alright. Those of you who are HTML literate, feel free to skip past this paragraph here. Those of you who aren't, you might want to continue reading. Out of all the things in HTML coding, I believe tables to be the most confusing. They're by far the most difficult thing for me, which is what made writing this tutorial so complicated. So...when I say don't mess with the code except for in the designated areas, I mean it. Don't change numerical values or add in extra spaces and that sort of thing. It will mess up the code, and as much as I'd like to help everyone who has problems with their coding...I just don't have the time. Running this community and keeping up with the claims list is hard enough!
Alright. What you need to do now is copy the coding that's in the text box (right click, select all, copy), and paste it into your notepad program. Once you get that done, read down further to step three.
Step Three: Customizing the Coding
Alright. Now that you have your coding copied into notepad, take a good look at it. You'll notice that it repeats itself frequently. Yay. You'll also notice that there are a lot of caps letters on the page. Just in case you aren't sure what each thing means, I'll list it out for you:
YOUR HEADER BANNER HERE: Those big banners that everyone puts at the top of their "album"? This would be that image.
COLOR CHOICE GOES HERE: This is the little bar of color that will appear above each icon, where it lists which theme and number icon it is. You're going to need to make sure to choose a darker shade for this color. I have things pre-set with a white font, so lighter shades won't really work here.
ICON GOES HERE: This is pretty self explanatory, I thought...but...yeah. This is where your icons will go. Either the finished product, or your filler icon (usually says "coming soon" or "no icon yet" or something along the lines of that). You need to have some kind of icon in each space, whether it be a finished icon or a filler icon, otherwise your table won't look right.
Okay. Now that we know what those three things mean, we're going to find a nifty little feature on notepad. Go to the Edit header and find the Replace... option. This is going to be very, very important in customizing your album. If you don't know where the replace option is, you're going to hvae to manually replace all 100 ICON GOES HERE and COLOR CHOICE HERE by hand...which is time consuming.
The little replace box has two areas for you to input text. The top line is for you to put all the text that you want to replace, and the bottom line is for you to put in what you what the new text to say. There are also a lot of buttons over on the right side of the box, but you'll only need to know and use the Replace All button.
After you've found the replace option, give yourself a little pat on the back, and then go to your image host. Once there, get your banner image and paste the http address for it (http://whateveryourimageis.jpg) in the bottom line of the replace box in notepad. Make sure that there are no quotation marks around the http address, otherwise the coding won't work properly.The top line should be YOUR HEADER BANNER HERE. Once these two things are in place, just click replace all, and your banner image should be in place. Hit replace all, and then you should have a banner.
Next, you need to put in your filler icons. To do that, simply select the url (http://whateveryourfillericonis.jpg) and paste it into the bottom line in the replace box in notepad. The top line should be ICON GOES HERE . Once again, make sure there are no quotation marks around the url in the bottom line, otherwise the coding won't work properly. Hit replace all, and then all of your filler icons will be in place, until you have finished icons to upload.
After that, you'll need to choose a good color for your table. Go HERE and take a look at this color chart. Find a color that you like (remember to keep it semi-dark, no light colors) and copy the six letter/number combination into the bottom line of the replace box in notepad. DO NOT INCLUDE THE # SIGN!! The top line of the replace box should read COLOR CHOICE GOES HERE. Hit replace all, and then your colors should be intact.
Yay! That's all you needed to do to get your table to look pretty!
Now from here on out, everytime you want to post up a finished icon, just copy the url, and go place it in the proper place. Its not that complicated. To put an icon in for your number four icon, just count down to the fourth img src spot and paste in the icon url. I know I'm not describing this well, but its really easy to catch on and do. I promise!!
Oh...be sure to save all this to your computer, so that you can come back and use it time and time again as you need to add more icons.
Step Five : Troubleshooting
You're going to have troubles at first, most likely. I still have troubles with things! I tried to write this as best as I could, but I'm sure its just going to confuse people. But if you need help with html stuff, I reccommend using this website:
http://www.lissaexplains.com
Its a great help for people who're just learning HTML and tables and all that.
Step Six: Posting it to LJ
Now, what you need to do next is post it up to your lj. Its very simple. All you need to do is copy and paste up everything on your notepad page, and then paste it behind an lj cut into your journal. Simple as that. Then just post up a fake lj-cut link to your journal so everyone can see the icons!
How to Create Your Very Own Icon Album!
Before we get started with this, I'm going to say that if you don't know HTML, you're probably going to be lost. I'm going to try to explain things so that everyone can understand and follow, but if this is unclear, I'm sorry! The main thing to remember if you don't know how to use HTML is don't mess with the code. If you mess with the coding at all, chances are, its going to get messed up. The only thing that you need to go in and change are the colors, and I'm going to explain how to do that in this tutorial. So with that in mind, lets jump into things!
Step One: Tools of the Trade
I'm not sure how everyone else does this, but I like to edit my table for my icon posts in notepad before I actually post it up to livejournal. That way, you have a hard copy of everything just in case anything happens over at lj. So go ahead and open up notepad. If you don't normally use notepad, then you'll need to go look up at the menu and go to the Format option. From there, make sure that Word Wrap has a checkmark by it, otherwise your text is just going to scroll off to the side forever and ever.
Also, before we get started with the table making, you'll need to have uploaded your album banner, a filler icon (one to put in the blanks where you haven't finished your icons yet. This icon will repeat itself over and over again, so try to make something a bit easy on the eyes), and whatever icons you have finished to a reliable image host. If you don't know what this is, then this challenge might not be the best thing for you. But if you know what one is, and don't have a reliable image host, I reccommend Photobucket. Once you have everything uploaded there, move on.
Step Two: The Coding
Alright. Those of you who are HTML literate, feel free to skip past this paragraph here. Those of you who aren't, you might want to continue reading. Out of all the things in HTML coding, I believe tables to be the most confusing. They're by far the most difficult thing for me, which is what made writing this tutorial so complicated. So...when I say don't mess with the code except for in the designated areas, I mean it. Don't change numerical values or add in extra spaces and that sort of thing. It will mess up the code, and as much as I'd like to help everyone who has problems with their coding...I just don't have the time. Running this community and keeping up with the claims list is hard enough!
Alright. What you need to do now is copy the coding that's in the text box (right click, select all, copy), and paste it into your notepad program. Once you get that done, read down further to step three.
Step Three: Customizing the Coding
Alright. Now that you have your coding copied into notepad, take a good look at it. You'll notice that it repeats itself frequently. Yay. You'll also notice that there are a lot of caps letters on the page. Just in case you aren't sure what each thing means, I'll list it out for you:
YOUR HEADER BANNER HERE: Those big banners that everyone puts at the top of their "album"? This would be that image.
COLOR CHOICE GOES HERE: This is the little bar of color that will appear above each icon, where it lists which theme and number icon it is. You're going to need to make sure to choose a darker shade for this color. I have things pre-set with a white font, so lighter shades won't really work here.
ICON GOES HERE: This is pretty self explanatory, I thought...but...yeah. This is where your icons will go. Either the finished product, or your filler icon (usually says "coming soon" or "no icon yet" or something along the lines of that). You need to have some kind of icon in each space, whether it be a finished icon or a filler icon, otherwise your table won't look right.
Okay. Now that we know what those three things mean, we're going to find a nifty little feature on notepad. Go to the Edit header and find the Replace... option. This is going to be very, very important in customizing your album. If you don't know where the replace option is, you're going to hvae to manually replace all 100 ICON GOES HERE and COLOR CHOICE HERE by hand...which is time consuming.
The little replace box has two areas for you to input text. The top line is for you to put all the text that you want to replace, and the bottom line is for you to put in what you what the new text to say. There are also a lot of buttons over on the right side of the box, but you'll only need to know and use the Replace All button.
After you've found the replace option, give yourself a little pat on the back, and then go to your image host. Once there, get your banner image and paste the http address for it (http://whateveryourimageis.jpg) in the bottom line of the replace box in notepad. Make sure that there are no quotation marks around the http address, otherwise the coding won't work properly.The top line should be YOUR HEADER BANNER HERE. Once these two things are in place, just click replace all, and your banner image should be in place. Hit replace all, and then you should have a banner.
Next, you need to put in your filler icons. To do that, simply select the url (http://whateveryourfillericonis.jpg) and paste it into the bottom line in the replace box in notepad. The top line should be ICON GOES HERE . Once again, make sure there are no quotation marks around the url in the bottom line, otherwise the coding won't work properly. Hit replace all, and then all of your filler icons will be in place, until you have finished icons to upload.
After that, you'll need to choose a good color for your table. Go HERE and take a look at this color chart. Find a color that you like (remember to keep it semi-dark, no light colors) and copy the six letter/number combination into the bottom line of the replace box in notepad. DO NOT INCLUDE THE # SIGN!! The top line of the replace box should read COLOR CHOICE GOES HERE. Hit replace all, and then your colors should be intact.
Yay! That's all you needed to do to get your table to look pretty!
Now from here on out, everytime you want to post up a finished icon, just copy the url, and go place it in the proper place. Its not that complicated. To put an icon in for your number four icon, just count down to the fourth img src spot and paste in the icon url. I know I'm not describing this well, but its really easy to catch on and do. I promise!!
Oh...be sure to save all this to your computer, so that you can come back and use it time and time again as you need to add more icons.
Step Five : Troubleshooting
You're going to have troubles at first, most likely. I still have troubles with things! I tried to write this as best as I could, but I'm sure its just going to confuse people. But if you need help with html stuff, I reccommend using this website:
http://www.lissaexplains.com
Its a great help for people who're just learning HTML and tables and all that.
Step Six: Posting it to LJ
Now, what you need to do next is post it up to your lj. Its very simple. All you need to do is copy and paste up everything on your notepad page, and then paste it behind an lj cut into your journal. Simple as that. Then just post up a fake lj-cut link to your journal so everyone can see the icons!