Post by Molly Hayes on Jun 19, 2014 17:31:21 GMT -5
Everybody likes pretty things! Now I'm gunna help you make pretty posting tables! Just follow the instructions below.^^
THIS IS A TABLE
and an example of what I'm going to show you how to code. From here on out I'll be using code snippets to show you what I'm doing.
These tables are the barest, most simple of posting templates. It's an image on the top, a text area in the middle, and another image on the bottom. Think of it as a sandwich if you must. For the two images you can make them whatever height you want (smaller is usually better) but remember that the width must be 500 pixels. (To use my code as is, if you want to make your table thinner, edit the width of the tables.) Images and colors I shall leave up to you. Now I'll explain the text area in the middle.
The text area in the middle is made using DIV tags. These tags are made to have different properties that specify things such as the width, the fonts, the border styles, ect. I'm going to point out the areas you can change background and border colors for. If you feel the need to mess with the rest of the code then I'm sorry but you're going to have to fend for yourself...unless you come whining to me that you broke it. TT.
This is the code for the post table above, modified to be easier for you to make it your own:
I tried to make the areas you need to edit as obvious as possible with capitols, but I know some people see code and freak out like it's a wild tiger, so I'll explain further. Everywhere I ask you to put image will need an image file. Preferably one that ends in a .jpg, .png, or .gif. You can easily upload images onto the web. Photobucket is a good long-term hoster. If you don't feel like making an account (or are too lazy to log into an account like I usually am) then I would suggest the likes of Tinypic.
Now, onto the colors. The spaces where I ask you for a color:
div style="width:498px;background-color:BACKGROUND COLOR HERE;border-left:1px solid BORDER COLOR HERE;border-right:1px solid BORDER COLOR HERE;margin-top:-12px;padding-bottom:10px;"
When it asks for a color there are three different color systems you can use: Hexidecimal, RGB, and proboards default.
Proboards default is easy. It has the basic colors black, white, red, yellow, ect and you literally just write the color name into that space.However, proboards does not have all the colors. That would be magical.
If you want a better color, I'd go for a hexadecimal. A hexadecimal is a six part code starting with a # that tells you what color something is. It ranges from #ffffff to #000000 and everything in between. The color picker at the top of the proboards post-edit box is an example of one that uses hexidecimals. If you are low on time/resources then you can always use that to pick out a color you want and drop it in the table code.
If you don't already know how to use RGB then don't use it.
Now I'm going to get really fancy. If you're not into coding you should probably stick to pictures and colors.
How to change the font:
You could be lazy and change the font within the body of the post. That's a fun way to do it. BUT if you want to totally customize your posting template then you have the option to change the font family. I reckon if you want to change the font family you will actually know what that means so I'm not going to explain. I'm just going to show you where to find it.
div style="background-color:BACKGROUND COLOR HERE;margin-left:10px;margin-right:10px;font-family:cambria;text-align:justify;padding:15px;width:440px;"
And that ought to be everything. If the coding still gives you trouble, let me know. If you are completely daunted by this but still want a table, let me know. I just might be nice and make you one. ;D
THIS IS A TABLE
and an example of what I'm going to show you how to code. From here on out I'll be using code snippets to show you what I'm doing.
These tables are the barest, most simple of posting templates. It's an image on the top, a text area in the middle, and another image on the bottom. Think of it as a sandwich if you must. For the two images you can make them whatever height you want (smaller is usually better) but remember that the width must be 500 pixels. (To use my code as is, if you want to make your table thinner, edit the width of the tables.) Images and colors I shall leave up to you. Now I'll explain the text area in the middle.
The text area in the middle is made using DIV tags. These tags are made to have different properties that specify things such as the width, the fonts, the border styles, ect. I'm going to point out the areas you can change background and border colors for. If you feel the need to mess with the rest of the code then I'm sorry but you're going to have to fend for yourself...unless you come whining to me that you broke it. TT.
This is the code for the post table above, modified to be easier for you to make it your own:
[div align="center"][img src="TOP IMAGE HERE" style="max-width:100%;"][div style="width:498px;background-color:BACKGROUND COLOR HERE;border-left:1px solid BORDER COLOR HERE;border-right:1px solid BORDER COLOR HERE;margin-top:-12px;padding-bottom:10px;"][div style="background-color:BACKGROUND COLOR HERE;margin-left:10px;margin-right:10px;font-family:cambria;text-align:justify;padding:15px;width:440px;"]
TEXTEXTEXT
[/div][/div][/div][div style="text-align:center;"][img src="BOTTOM IMAGE HERE" style="font-size:10pt;max-width:100%;"][/div]I tried to make the areas you need to edit as obvious as possible with capitols, but I know some people see code and freak out like it's a wild tiger, so I'll explain further. Everywhere I ask you to put image will need an image file. Preferably one that ends in a .jpg, .png, or .gif. You can easily upload images onto the web. Photobucket is a good long-term hoster. If you don't feel like making an account (or are too lazy to log into an account like I usually am) then I would suggest the likes of Tinypic.
Now, onto the colors. The spaces where I ask you for a color:
div style="width:498px;background-color:BACKGROUND COLOR HERE;border-left:1px solid BORDER COLOR HERE;border-right:1px solid BORDER COLOR HERE;margin-top:-12px;padding-bottom:10px;"
When it asks for a color there are three different color systems you can use: Hexidecimal, RGB, and proboards default.
Proboards default is easy. It has the basic colors black, white, red, yellow, ect and you literally just write the color name into that space.However, proboards does not have all the colors. That would be magical.
If you want a better color, I'd go for a hexadecimal. A hexadecimal is a six part code starting with a # that tells you what color something is. It ranges from #ffffff to #000000 and everything in between. The color picker at the top of the proboards post-edit box is an example of one that uses hexidecimals. If you are low on time/resources then you can always use that to pick out a color you want and drop it in the table code.
If you don't already know how to use RGB then don't use it.
Now I'm going to get really fancy. If you're not into coding you should probably stick to pictures and colors.
How to change the font:
You could be lazy and change the font within the body of the post. That's a fun way to do it. BUT if you want to totally customize your posting template then you have the option to change the font family. I reckon if you want to change the font family you will actually know what that means so I'm not going to explain. I'm just going to show you where to find it.
div style="background-color:BACKGROUND COLOR HERE;margin-left:10px;margin-right:10px;font-family:cambria;text-align:justify;padding:15px;width:440px;"
And that ought to be everything. If the coding still gives you trouble, let me know. If you are completely daunted by this but still want a table, let me know. I just might be nice and make you one. ;D
