Post by Azure on Jul 19, 2014 20:40:46 GMT -5
I hope I am allowed to make this, if not please forgive me. xD
Now Since I have been getting alot, and I mean alot of freaking pms, no offense to anyone. But please just read this instead.
I find that coding is pretty much like putting preferences down. Or talking in another language. But a simple one.
Now I have two pre-made templates that you may edit to your liking, it is really not too hard. You just need time. Then below them I have a guild explaining the smaller template.
Template one:
&& STORY Text | && RULES Text |
&& RELATIONS Text | && GENETICS Text |
&& FORM Text | && SLOTS Text |
[center]
[div style="background-color:; bordercolor=#212121 borderwidth=5px; font-family: georgia; font-style: bold; font-size: 50px; color: white; text-transform: lowercase; margin-top: -5px; letter-spacing: -3px; opacity: 0.99; text-shadow: 2px 2px 2px #000000;"]mother xx father[/div]
[div style="background-color=;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://hdwallphotos.com/wp-content/uploads/2014/03/Awesome-Nature-Forest-Desktop-Wallpaper-Download.jpg');width:450px;height:530px;"][center]
[table][tr][td][div style="background-color:#ffffff;opacity: 0.50;bordercolor=#000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& STORY
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td]
[td][div style="background-color:#ffffff;opacity: 0.50;bordercolor=#000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& RULES
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td][/tr][/table]
[table][tr][td][div style="background-color:#ffffff;opacity: 0.50;bordercolor=#000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& RELATIONS
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td]
[td][div style="background-color:#ffffff;opacity: 0.50;bordercolor=#00000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& GENETICS
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td][/tr][/table]
[table][tr][td][div style="background-color:#ffffff;opacity: 0.50; bordercolor=#000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& FORM
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td]
[td][div style="background-color:#ffffff;opacity: 0.50;bordercolor=#000000; borderwidth=5px; width: 150px; height: 150px; overflow:auto;"][left][font=Georgia][color=Black][size=12pt]&& SLOTS
[hr]
[font=georgia][color=black][size=8pt]Text[/div][/td][/tr][/table](C) AZURE
[/div]
TEMPLATE 2
Text
(c) AZURE
[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('http://d75822.medialib.glogster.com/media/f2/f2879921035168e73d6bf8790d114567571488199957d7353774c9e3fa11ff96/storm-gif.gif');"][div style="text-align:center;letter-spacing:-3px;font-family:georiga;font-size:35px;border-bottom-color:#000000;border-bottom-width:0px;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
[/font][/div][/div]
[div style="text-align:center;letter-spacing:3px;font-family:georiga;font-size:12px;border-top-color:#000000;border-top-width:5px;border-top-style:dotted;"][font color="white"]
(c) AZURE[/font][/div][/div][/div]Feel free to use and edit those templates without asking.
TEMPLATE (Using examples an ect from template #2) GUIDE
[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.
Text
(c) AZURE
[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.
use them modestly if you do use them.
I love coding, it's actually pretty easy once you get the hang of it and there are so many possibilities! I especially love what you did with the first one and the transparent text boxes! I learned from something similar to this, I took someone's free codework and messed with/added to it until I had my own styles and techniques lol This'll be very helpful for people(:
