Whats new

//Glitter Text Generator\\

Note: Before you get started....read this

Make sure you name your folders the names I am giving you to name them. Also, I'm giving you most everything you need here, so this is a very simple script for you to follow, yes it's long and very time consuming, but all in all it's easy. I've made if very easy for you, so a link back IS required.

I'm starting this tutorial assuming you have already made all your glitter gifs. Remember, each letter is a separate gif, so if you are planning on having 10 different fonts to choose from then you will be creating 260 individual gifs, being that there are 26 letters in the alphabet.

First you'll need the javascript. Open notepad, copy the code below and paste it in, then save it as glitter.js Or, take the easy way and download mine here

Now you will need to replace <img src="http://yoursite/yourpath/toyour/glitterfont/gifs/ with the path to your font gif's you've made and saved. If you downloaded my glitter.js then the same will apply to you, you'll need to replace <img src="http://lillium.net/you/gf/ with your own path.

To make this a little less confusing, my path is <img src="http://lillium.net/you/gf/ Yours will be something like <img src="http://doodlebug.com/images/gf/ OK, I don't know what made me come up with doodlebug, but you should get the idea.

Make 2 new folders and name one gf (that's short for glittering fonts) and name the other glitterfontgen
In your gf folder make 2 new folders and name them 1 and 2
In folder 1 upload your first set of font gifs
In folder 2 upload your second set of font gifs. (If you have more than 2 sets of font gifs then create more folders for them, naming them 3, 4, 5 and so on, I'm just showing you to do 2 right now.

OK, so far we have 1 javascript named glitter.js (not uploaded yet)
A new folder called gf
A new folder called glitterfontgen
2 folders inside the gf folder called 1 and 2
You should now have your font gifs uploaded into your folders, if not take a few hours like I did, create your font gifs and upload them.

OK now, open your glitterfontgen folder, upload your glitter.js into that folder.
Now, copy the code below, this is going to be your index. Paste it into notepad, make sure to change the direct paths to your own. Go to file, and save as and name it index.html or index.php or whatever it is you like to use. I named mine index.php, but I just like to end all my pages with php so it's up to you.
<head> <title> Glitter Text Generator </title> </head> <body> <center> Glitter Text Generator <br> <br> <br> <script type="text/javascript" src="http://www.demented-dreamz.net/you/glitterfontgen/glitter.js"></script><br> <form id="gtform" name="gtform"> <input type="hidden" value="1" name="stylechoice" id="stylechoice"> <fieldset style="padding: 5px; width: 500px; border-width: 2px; border-style: solid; border-color:#FFF19F "> <table style="width: 100%"> <tr> <td align="center" style="padding: 5px; width: 100%; text-align: center; vertical-align: top;"> <div style="background-color: #FFF8CE; font-weight: bold; padding: 5px; width:600; height:25"> <p style="text-align: center">Choose Your Glitter</div> <p style="text-align: center"> <br /> </p> <div style="width: 600px; height: 150px; overflow: auto; padding: 4px;"> <table width="90%" cellpadding="0" cellpadding="0"> <tr> <td> <center><p> </p> <img style="margin:-4px" src="http://demented-dreamz.net/you/gf/1/a.gif" onclick="document.getElementById('1').checked=true;document.getElementById('stylechoice').value=1;GenCode();" width="38" height="34" ><br /> Select - <input name="style" type="radio" id="1" value="1" onclick="document.getElementById('stylechoice').value=1;GenCode();" /></td> <td> <p> </p> <p> <img style="margin:-4px" src="http://lillium.net/you/gf/2/a.gif" onclick="document.getElementById('2').checked=true;document.getElementById('stylechoice').value=2;GenCode();" width="41" height="35" ><br /> Select - <input name="style" type="radio" id="2" value="2" onclick="document.getElementById('stylechoice').value=2;GenCode();" /></td> </tr> </table> </div> </td> </tr> <tr> <td align="center" style="padding: 5px; width: 100%; text-align: center; vertical-align: top;"> <div style="background-color: #FFF8CE; font-weight: bold; padding: 5px; width:600; height:25"> <p style="text-align: center">Type it here</div> <p style="text-align: center"> <br /> <textarea id="text" name="text" cols="100" rows="6" onKeyUp="GenCode(); this.value=this.value.toLowerCase();"></textarea> </td> </tr> <tr> <td align="center" style="padding: 5px; width: 100%; text-align: center; vertical-align: top;"> <div style="background-color: #FFF8CE; font-weight: bold; padding: 5px;"> Previewed here</div> <br /> <div style="width: 600px; height: 150px; overflow: auto; padding: 4px;"> <span id="preview"></span> </div> </td> </tr> <tr> <td align="center" style="padding: 5px; width: 100%; text-align: center; vertical-align: top;"> <div style="background-color: #FFF8CE; font-weight: bold; padding: 5px;">copy the code below</div> <br /> <textarea name="code" cols="100" rows="6" wrap="virtual" id="gtcode"></textarea><br> <br/> <br /> </td> </tr> </table> </fieldset> </form> </body> </html>
Now, I left all my direct paths in that code above you just copied, so make sure to change them to your own. Yes, it will work just as you have copied it, I'm sure a few of you have noticed that. You don't have much farther to go, so if your thinking about keeping my direct path, then don't, like I said we are almost finished.

Actually, after you have changed the direct paths to your own then you are finished, unless you want to add more (and I'm sure you do) font gifs.

All you have to do to add more font gifs is to add more folders in the gf folder, like I said before, name the 3, 4, 5, 6 and so on and upload your new gifs into the appropriate folders.

In the index you'll have to add more coding for your new fonts, just repeat this code
<td> <p> </p> <p> <img style="margin:-4px" src="http://lillium.net/you/gf/2/a.gif" onclick="document.getElementById('2').checked=true;document.getElementById('stylechoice').value=2;GenCode();" width="41" height="35" ><br /> Select - <input name="style" type="radio" id="2" value="2" onclick="document.getElementById('stylechoice').value=2;GenCode();" /></td>

remember to change the direct paths to your own.

OK, that's it

<~~~Rewind