Guide to Post Templates
Nov 25, 2010 0:40:25 GMT -5
Post by ash on Nov 25, 2010 0:40:25 GMT -5
Ash's Guide to Post Templates
What you need:
Step One
First, find yourself a suitable background on the internet (or make one yourself and upload it using imageshack, photobucket, etc.) and copy and paste the url into WordPad. For my post template, I chose this background:
Here's the url for mine:
Now that we have our background, we're going to insert the url into the first part of the html:
See where my background url is? Now for the next step...
Step Two
Now, we need the url of the picture we want to put on top of the post.
So, pick yourself out a picture (preferably 100x100, since I have yet to try larger pictures) and get the url.
Here's mine:
So, here's the next part of the coding:
See where I put the url of my picture? That's if you only want one of avatars on top of the page. If you prefer to have two or three...
Then all you have to do is replace the 'same icon' part with the same, exact url of your desired picture.
Just like that.
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
Step Three
Here's where it gets a little tricky. Once you decided on the lyrics (or whatever words you want to put there) I suggest you find yourself a good a hex code site. (Hex codes are small codes used to determine the color of, in this case, your font. They usually begin with a # and is followed by six numbers or letters. Ex. #2E0854 = indigo, #9E0508 = burgundy, and so on.) Here's a few sites:
www.december.com/html/spec/color.html
www.2createawebsite.com/build/hex-colors.html (I personally like this site, it allows you to create your own colors)
Now here's the next part of your coding:
Notice the font type and size part of the html. You can also alter the font type (ex. times, arial, comic sans...) or size (1 to 7, I believe) For my html coding, I chose the hex code D6C6C6 and the times font. So replace the D6C6C6 with your own choice (like 166B03, a green color or 5B3573, a purple color, whatever color code you want)
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
Step Four
Now for the border. I used the † symbol
So pick your font and color.
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
Step Five
The easiest step in the guide! No coding! This is where you put your roleplay post.
Step Six
Alright, this is a long step, but it should be pretty simple. Repeat step 4
It even includes a place to put an extra lyric!
And here's where you put the credits. You could use the url of your WoD profile, or another webpage, such as facebook or myspace. (replace '
Once that's over with, put the site (ex. If you used your WoD profile, then replace
NOW HERE'S WHAT YOUR FINAL CODE SHOULD LOOK LIKE:
Final Note
I hope this guide helps. I'm sorry if it's sloppy, I had to put a lot of coding on this page. If you have any suggestions, feel free to let me know! =]
What you need:
- Wordpad or something similar (to edit the coding)
- A LOT of patience
Step One
First, find yourself a suitable background on the internet (or make one yourself and upload it using imageshack, photobucket, etc.) and copy and paste the url into WordPad. For my post template, I chose this background:
Here's the url for mine:
http://img541.imageshack.us/img541/6016/backgroundbeautiful.png
Now that we have our background, we're going to insert the url into the first part of the html:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,20,true][atrb=width,400,true][atrb=style,border-radius: 30px; -moz-border-radius: 30px;][atrb=background,http://img541.imageshack.us/img541/6016/backgroundbeautiful.png][center]
See where my background url is? Now for the next step...
Step Two
Now, we need the url of the picture we want to put on top of the post.
So, pick yourself out a picture (preferably 100x100, since I have yet to try larger pictures) and get the url.
Here's mine:
http://img708.imageshack.us/img708/3890/temp2j.png
So, here's the next part of the coding:
[img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]same icon[/img] [img]same icon[/img]
See where I put the url of my picture? That's if you only want one of avatars on top of the page. If you prefer to have two or three...
Then all you have to do is replace the 'same icon' part with the same, exact url of your desired picture.
[img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]http://209.85.12.227/14314/134/upload/av-252.png[/img]
Just like that.
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,20,true][atrb=width,400,true][atrb=style,border-radius: 30px; -moz-border-radius: 30px;][atrb=background,http://img541.imageshack.us/img541/6016/backgroundbeautiful.png][center][img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]same icon[/img] [img]same icon[/img]
Step Three
Here's where it gets a little tricky. Once you decided on the lyrics (or whatever words you want to put there) I suggest you find yourself a good a hex code site. (Hex codes are small codes used to determine the color of, in this case, your font. They usually begin with a # and is followed by six numbers or letters. Ex. #2E0854 = indigo, #9E0508 = burgundy, and so on.) Here's a few sites:
www.december.com/html/spec/color.html
www.2createawebsite.com/build/hex-colors.html (I personally like this site, it allows you to create your own colors)
Now here's the next part of your coding:
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
[font=times][color=D6C6C6][b][size=2]I'm gonna say all those bad things about you that ain't true[/b][/size][/color][/font]
[font=times][size=4][color=D6C6C6][b]Intimate things so everyone hates you[/b][/color][/size][/font]
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
Notice the font type and size part of the html. You can also alter the font type (ex. times, arial, comic sans...) or size (1 to 7, I believe) For my html coding, I chose the hex code D6C6C6 and the times font. So replace the D6C6C6 with your own choice (like 166B03, a green color or 5B3573, a purple color, whatever color code you want)
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,20,true][atrb=width,400,true][atrb=style,border-radius: 30px; -moz-border-radius: 30px;][atrb=background,http://img541.imageshack.us/img541/6016/backgroundbeautiful.png][center][img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]same icon[/img] [img]same icon[/img][font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
[font=times][color=D6C6C6][b][size=2]I'm gonna say all those bad things about you that ain't true[/b][/size][/color][/font]
[font=times][size=4][color=D6C6C6][b]Intimate things so everyone hates you[/b][/color][/size][/font]
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
Step Four
Now for the border. I used the † symbol
]†
As you can see, the symbol is way too small, that's why I made mine a size 5.[font=georgia][size=5][color=white]† † †[/color][/size][/font][/center][size=1][color=d6c6c6]
So pick your font and color.
SO FAR, YOUR CODING SHOULD LOOK LIKE THIS:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,20,true][atrb=width,400,true][atrb=style,border-radius: 30px; -moz-border-radius: 30px;][atrb=background,http://img541.imageshack.us/img541/6016/backgroundbeautiful.png][center][img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]same icon[/img] [img]same icon[/img][font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
[font=times][color=D6C6C6][b][size=2]I'm gonna say all those bad things about you that ain't true[/b][/size][/color][/font]
[font=times][size=4][color=D6C6C6][b]Intimate things so everyone hates you[/b][/color][/size][/font]
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font][code][font=georgia][size=5][color=white]† † †[/color][/size][/font][/center][size=1][color=d6c6c6]
Step Five
The easiest step in the guide! No coding! This is where you put your roleplay post.
Step Six
Alright, this is a long step, but it should be pretty simple. Repeat step 4
[code][/color][/size]
[center][font=georgia][size=5][color=white]† † †[/color][/size][/font][/center]
Now we get to the 'fancy' part of the template. Again, decide on your font and its color. As you may have already notice, this template can easily tell the number of words in your post, the people you wish to tag, and the 'background' music or your choice (usually to credit the owner of the lyrics, if used, though it could be used just for fun)[center][size=1][color=d6c6c6][color=d6c6c6]WORDS:[/color] [b]1,000,000[/b] | TAG: [B][color=d6c6c6]Anyone[/color][/b] | MUSIC: [b][color=d6c6c6]REVENGE[/b][/color] - MINDLESS SELF INDULGENCE[/color]
[color=d6c6c6]"[/color] [color=white]Never special enough to make a case for jealousy [/color] [color=d6c6c6]"[/color]
It even includes a place to put an extra lyric!
[color=d6c6c6]Template © [url=http://twisteddisney.proboards.com/index.cgi?action=viewprofile&user=nasira][b]Nasira[/b][/url] in [url=http://twisteddisney.proboards.com/index.cgi?][b]TWISTED DISNEY RPG[/b][/url][/color][/size][/center][/td][/tr][/table][/center]
And here's where you put the credits. You could use the url of your WoD profile, or another webpage, such as facebook or myspace. (replace '
http://twisteddisney.proboards.com/index.cgi?action=viewprofile&user=nasira
' with the url of your webpage) Now that we have the hyperlink, replace 'Nasira' with your own name. Once that's over with, put the site (ex. If you used your WoD profile, then replace
http://twisteddisney.proboards.com/index.cgi?
with
http://worldsofdisney07.proboards.com
and TWISTED DISNEY RPG with the name of the site.NOW HERE'S WHAT YOUR FINAL CODE SHOULD LOOK LIKE:
[center][table][tr][td][atrb=border,0,true][atrb=cellPadding,20,true][atrb=width,400,true][atrb=style,border-radius: 30px; -moz-border-radius: 30px;][atrb=background,http://img541.imageshack.us/img541/6016/backgroundbeautiful.png][center][img]http://209.85.12.227/14314/134/upload/av-252.png[/img] [img]same icon[/img] [img]same icon[/img]
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
[font=times][color=D6C6C6][b][size=2]I'm gonna say all those bad things about you that ain't true[/b][/size][/color][/font]
[font=times][size=4][color=D6C6C6][b]Intimate things so everyone hates you[/b][/color][/size][/font]
[font=times][size=3][color=D6C6C6][color=D6C6C6]-[/color] [i][b]this....is....my.....re....venge![/b][/i][/size] [color=D6C6C6]-[/color][/color][/font]
[font=georgia][size=5][color=white]† † †[/color][/size][/font][/center][size=1][color=d6c6c6]Here's the new template![/color][/size]
[center][font=georgia][size=5][color=white]† † †[/color][/size][/font][/center]
[center][size=1][color=d6c6c6][color=d6c6c6]WORDS:[/color] [b]1,000,000[/b] | TAG: [B][color=d6c6c6]Anyone[/color][/b] | MUSIC: [b][color=d6c6c6]REVENGE[/b][/color] - MINDLESS SELF INDULGENCE[/color]
[color=d6c6c6]"[/color] [color=white]Never special enough to make a case for jealousy [/color] [color=d6c6c6]"[/color]
[color=d6c6c6]Template © [url=http://twisteddisney.proboards.com/index.cgi?action=viewprofile&user=nasira][b]Nasira[/b][/url] in [url=http://twisteddisney.proboards.com/index.cgi?][b]TWISTED DISNEY RPG[/b][/url][/color][/size][/center][/td][/tr][/table][/center]
Final Note
I hope this guide helps. I'm sorry if it's sloppy, I had to put a lot of coding on this page. If you have any suggestions, feel free to let me know! =]