How to make a Table (aka Fancypost)
May 16, 2014 14:32:27 GMT
Post by Azure on May 16, 2014 14:32:27 GMT
Welcome to the Great Guide of Fancypost making!
Fancypost Code
[div align="center"][div style="width:500px;height:inherit;border-right-color:#000000;border-left-color:#000000;border-right-width:0px;border-left-width:0px;border-right-style:solid;border-left-style:solid;background-image:url('IMAGE-URL-NO-IMG-CODES-JUST-LINKS');"][div style="text-align:center;letter-spacing:-3px;font-family:georiga;font-size:35px;border-bottom-color:#ffffff;border-bottom-width:5px;border-bottom-style:dotted;"][font color="#ffffff"]-Title-[/font][/div][div style="padding:3px;border-radius:10px;width:440px;height:270px;overflow:auto;margin-top:10px;margin-left:25px;background-color:#000000;opacity:0.50;"]
[div align="center"][font color="white"][b]
(Text goes Here)
[/font][/div][/div]
[div style="text-align:center;letter-spacing:3px;font-family:georiga;font-size:12px;border-top-color:#ffffff;border-top-width:5px;border-top-style:dotted;"][font color="white"]
(c) AZURE[/font][/div][/div][/div]Fancypost Examples.
Now take a good long look at that fancypost code, now changing the code a bit it can look like this..
-Title-
(Text goes Here)
(c) AZURE
Fancypost Code Explanatory(Tells you What every single part of the code is!)
Everything on a Fancypost is changeable.
This works just as good as:
Now here is where the real Fancypost starts.
To you that probably looks a little overwhelming, lets break it down a bit.
The first part of the code, this defines the total height & width of the Fancypost, not where you put the text, this will not change anything about the text box, this can be good if you want to make your Fancypost bigger or skinnier.
Inheriting the height means that it will change depending on how big you make the chat box, this makes things a bit easier meaning that you can keep adding things to the center and it will never break the post.
This defines the boarder, here you can set the width of the boarder and the color of it, to change the hex code please do not change the numbers to letters as it will make it more confusing than it needs to be.
That should help you with the overall color choosing.
To change the width please look over to the..
Change it to a number or leave it at 0 so there is no boarder to see.
Now that's your background image, pretty easy to work with, just please do not remove the ' from in front and behind the url.
Now that you have gotten past the first part of the code lets travel to the next one.
I have explained a bit of this from reading past part of this thread, here you can change how big your spaces are in between each letter, the font face and the font size. Also the boarder (currently set as dots to make it more fun but you can change it to lines by changing the word dotted. (For lines change it to solid)
Same as the right and left boarders you can change the line's size with width altering. Same as the color, pretty much every color hex code can be changed so go ahead and feel free to.
That's your title and color, please do not change anything here but the color of the text & title.
Now for this to make more sense I made this code a bit bigger, so here it is.
The first part is simply the height and more, now the overflow, auto is what makes your text scroll, not just leave the Fancypost. The background color is really self explanatory, then the opacity makes it so you can still see the background.
Text is where you type anything you want.
Finally we have the last part of the code, the ending, all of it I have explained, here you can also change the dots to lines, by replacing it with the word solid. Please do not take off my copyright, I made the code. If you even took the tiniest bit of something from this tutorial you must leave that on there.
[div align="center"]This works just as good as:
[center]Now here is where the real Fancypost starts.
"][div style="width:500px;height:inherit;border-right-color:#000000;border-left-color:#000000;border-right-width:0px;border-left-width:0px;border-right-style:solid;border-left-style:solid;background-image:url('http://images5.fanpop.com/image/photos/28200000/Moon-Valley-warrior-cats-of-pantherclan-28228402-1024-768.jpg');"]To you that probably looks a little overwhelming, lets break it down a bit.
[div style="width:500px;height:inheritThe first part of the code, this defines the total height & width of the Fancypost, not where you put the text, this will not change anything about the text box, this can be good if you want to make your Fancypost bigger or skinnier.
Inheriting the height means that it will change depending on how big you make the chat box, this makes things a bit easier meaning that you can keep adding things to the center and it will never break the post.
border-right-color:#000000;border-left-color:#000000;border-right-width:0px;border-left-width:0px;border-right-style:solid;border-left-style:solid;This defines the boarder, here you can set the width of the boarder and the color of it, to change the hex code please do not change the numbers to letters as it will make it more confusing than it needs to be.
That should help you with the overall color choosing.
To change the width please look over to the..
width:0pxChange it to a number or leave it at 0 so there is no boarder to see.
background-image:url('http://images5.fanpop.com/image/photos/28200000/Moon-Valley-warrior-cats-of-pantherclan-28228402-1024-768.jpg');"]Now that's your background image, pretty easy to work with, just please do not remove the ' from in front and behind the url.
Now that you have gotten past the first part of the code lets travel to the next one.
[div style="text-align:center;letter-spacing:-3px;font-family:georiga;font-size:35px;border-bottom-color:#ffffff;border-bottom-width:5px;border-bottom-style:dotted;"]I have explained a bit of this from reading past part of this thread, here you can change how big your spaces are in between each letter, the font face and the font size. Also the boarder (currently set as dots to make it more fun but you can change it to lines by changing the word dotted. (For lines change it to solid)
Same as the right and left boarders you can change the line's size with width altering. Same as the color, pretty much every color hex code can be changed so go ahead and feel free to.
[font color="#ffffff"]-Title-[/font][/div]That's your title and color, please do not change anything here but the color of the text & title.
[div style="padding:3px;border-radius:10px;width:440px;height:270px;overflow:auto;margin-top:10px;margin-left:25px;background-color:#000000;opacity:0.50;"]
[div align="center"][font color="white"][b]
(Text goes Here)
[/font][/div][/div]Now for this to make more sense I made this code a bit bigger, so here it is.
The first part is simply the height and more, now the overflow, auto is what makes your text scroll, not just leave the Fancypost. The background color is really self explanatory, then the opacity makes it so you can still see the background.
Text is where you type anything you want.
[div style="text-align:center;letter-spacing:3px;font-family:georiga;font-size:12px;border-top-color:#ffffff;border-top-width:5px;border-top-style:dotted;"][font color="white"]
(c) AZURE[/font][/div][/div][/div]Finally we have the last part of the code, the ending, all of it I have explained, here you can also change the dots to lines, by replacing it with the word solid. Please do not take off my copyright, I made the code. If you even took the tiniest bit of something from this tutorial you must leave that on there.
