How to make a Template (BBCoding Tutorial) [WIP]

[Ronnie]

Introduction

As on many other roleplaying websites, some members of TPUYS use posting templates. Although they are not required, posting templates can provide additional information about a character during a roleplay by listing things such as that character's name, rank, picture, ect. Plus, many templates just look nice and add a bit of extra flair to each post! This will be a BBCode guide to help users create their own personal templates, showing them how to change many of the different variables available in BBCode. Along with this, at the bottom of the post, links to BBCode and template resources will be provided, such as websites with additional information or websites which actually contain templates on them.

Said a bit more simple, BBCode is what allows users on forum posts to center text, changing font size, color, and more. For instance, bolding things requires the use of BBCode, even if one can't see it in the "preview" tab, you can in the "BBCode" tab. Just for reference, the code for bolding text is: 

[b] text goes here, between the b's [/b]
tl;dr: BBCode is essentially an easier (yet very different) version of HTML and this guide will teach you how to do neat stuff with it.

Making Templates with BBCode

Before one can get a nice looking template, one must start with a blank box- at least, I've found this to be the easiest method to use. This will be the step by step guide on how to go from box-y to beauty. 

1) First, let's start off by centering the template. Although this step isn't required, often templates look better centered in the middle of the post, and this is how one will generally find them on things such as template websites. To do this, one must simply type:

[center] text [/center]

Next, now that it is centered, you can start working with div. Basically, the "div" area of the coding is where the variables including size and color go. 

[center][div style="width200px;height300px"][/div][/center]

This code gives us the basis for our box, yet there isn't any color, so it can't be seen. To add color, add, for instance, "...height300px;background-color:red". This would give you a red background. In between different variables, remember to add semicolons (;). 

Note: The larger the px, the larger the box/border/ect. px determines size. 

2) Along with things such as the boxes width and height, once can change/add: 

• Background color OR background image [background-color:#ffffff; background-image:url('direct link to image')]

• Border color, shape, and size. Borders can be solid, dotted, or dashed. Change this within the code to see the varying results. Border radius makes a border more or less round. Additionally, specifying things like "border-right/left/top/bottom:0px solid #000000" will allow you to place a border on only certain parts of your template. (border:0px solid #000000; border-radius:0px) 

• Padding is how far the text and variables within your coding will be placed, such as if you want text further away from the sides of the box you can add padding. Like borders, padding can be set to the right/left/top/bottom or just be left as a general padding across the entire box. (padding:0px)

• Generally, font color and size can be changed using Proboard's options at the top of a post. In the code, they will show up along with the rest of the changes one's made to their template. It's easier to not fiddle in the coding if one's new to BBCode, and that's what I'd recommend doing first.

So, with just the space variables and adding in a white background, we get this:

text

The code for this is:
[div align="center"][div style="text-align:center;width:200px;height:300px;font-family:arial;font-size:12px;color:black;background-color:white;"] text [/div]