Quick Question I hope :)

[Arrows]

So I have decided I really want to begin making my own templates since I have seen so many wonderful ones.  However, I have come to the conclusion I have no where to start. So I was wondering if anyone could tell me where I could learn the basics. So overall I'm just curious as to where I can start, thank you in advance

[lionel estrada d5 ᥫ᭡ kiah]

Oh hey something i can actually answer sort of hahaha!

Ok so when I first started making tables I felt the same way to I started with the simple of the simple- how to actually even make a square with a border:

[div align="center"][div style="width:400px;height:400px;background-color:white;border:4px solid #00ff45;border-radius:10px;font-family:georgia;font-size:10px;text-align:justify;color:black;padding:3px;"]text


text


text[/div][/div]

^ Thats is the code that will give you this:

text


text


text

so what does all that div shiz mean:

width: #px;
height: #px;
background-color: #her here;
background-image: url();
overflow: auto; (or scroll)
padding: #px #px #px #px; (also padding-left, padding-right, etc.)
margin: #px #px #px #px; (also margin-top, margin-bottom, etc.)
text-align: ;
font-family: font;
font-size: #px/#pt;
font: #px fontfamily;
font-weight: bold;
font-variant: small-caps;
text-decoration: ;
color: #hex here;
text-shadow: #px #px #hex code;
letter-spacing: #px;
line-height: #% or #px;
border: #px solid #hex;
border-radius: #px #px #px #px;
opacity: 0.#;

So thats the basics

border:4px solid #00ff45;border-radius:10px;
By adjusing the numbers and hex codes in this part of the code you will change things to do with the border. border:4px- how thick will the border be. the solid part means that it will be solid and if you change the hex code (#00ff45) to a different one your border will be a different colour. border-radius:10px is the factor that decides if your table will have pointy corners or curved edges.

font-family:georgia;font-size:10px;text-align:justify;color:black;padding:3px;"]

By adjusting the values in this secition of the code you will be changing things to do with the text of your table. Ie the font, the size the color.

and there you have it, a basic square table.

Nor if you wanted you background to have be a picture:

background-color:white;

You change the code so it would look like this:

background-image:url(puturlhere);

thats makes the background an image, therefore it will look like this:

text


text


text

If you just want a picture in the table and not actually as the background where your post will go you just put the normal image code in and there you have it:

[div align="center"][div style="width:400px;height:400px;background-color:white;border:4px solid #00ff45;border-radius:10px;font-family:georgia;font-size:10px;text-align:justify;color:black;padding:3px;"] [img alt=" " src="http://www.joblo.com/newsimages1/hunger_games_ver24.jpg" style="max-width:100%;"]

text


text


text[/div][/div]

text


text


text

Play around with the coding, make mistakes that it the best way to learn with this stuff xDD Hope this helps! ^^

[Arrows]

Wow so much info thanks so much! It helps a ton

[анзие (Anz)]

And just my two cents but once you get the hang of simple tables you can take a look at how other people do their coding from the free template sites. I usually just google, "Free proboards templates," and see what comes up.