Post by Beta Violet on Apr 8, 2015 16:53:27 GMT -8
Welcome to where I will show you how to create a posting template 
First things first, there are a bunch of codes that you will need to learn, but not worry, it's completely and utterly simple and easy to explain what each does
Each coding part of the template must be surrounded by [ < >] These lovely little brackets. And also, please do your BBCoding in the BBCode tab. How do you know you're in that tab? The Preview Tab should be highlighted in a pink/purple color.
Here are some of the basic codes that we need to know:
div align="center" = This sets the template in the center of the posting area
Now that you know that, we can get to the basics of coding.
First off you need to start with [ which makes the start of the coding. As we first start out we keep it simple with div style="coding"
Now, you're probably like "What is the style there for? And why does it just say coding?" Well the style is how your box will be designed. So the coding should look something like this (with out the spaces between it)
So now that we got that set up, the coding area is where you put the following:
Width: width:#px; The # sign can be changed with the number of pixels you want the box to be.
Height: height:#px; The # sign can be changed with the number of pixels you want the box to be.
Everything you add into the string where you put coding should be separated by a semi-colon ( ; ) unless it calls for ( : ) Like in the above examples.
So now your code should look like this:
[ div align="center" ] [ div style="width:#px;height:#px ]
Next, you must put the following after width and height in this order:
1) "background-color:yourcolorhere" or "background-image:url('yoururlhere')" Also, images will not work unless you copy the direct link of the picture, which is most easily obtained on photo sites like flickr and tinypic.
Make sure that what you put in for "yourcolorhere" is in the proper format. The easiest way to do this is to use a site like [this] to find a color you love, then copy and paste the full color code, including the number sign. #ffffff will give you white, for example.
2) "border:0px solid #000000" Borders for your box are optional and their color can be changed using the code of the color you desire. You can also create a variety of borders, i.e: a dotted border, a border that moves, multiple borders, ect.
This can be munipulated by changing the "0px" to a number larger (the bigger the number the wider the border) and changing "solid" to something like "dotted" "dashed"
You can also customize your borders even more so. You can change the "border:" to "border-bottom:" You can replace bottom with top, left, or right as well. That way each of your borders could be a different color, style, width, etc. Just add each one right after eachother, separated by semi-colons, such as; "border-bottom:0px solid #000000;border-top:0px solid #000000;border-right:0px solid #000000;border-left:0px solid #000000;"
3) "border-radius:0px" The border radius will make your border more or less round depending on the number you insert for it.
4) "font-family:yourfontfacehere" Different fonts that can be used can be found in GBMP's "Font Face" tab on the left side of the post editing box.
5) "font-size:12px" Font size will be bigger or smaller depending on the number.
6) "text-align:center" This will center your font; you can also put your font to the left, right, or justify.
7) "color:yourcolorhere" This will color your font. Often you can just list the color's name, but sometimes you will need to use the 6 digit code, for example: #000000, the code for black.
8) "padding:0px" Padding is the spacing in your box. This will give you the overall padding, but as with borders, you can specify it to each side, such as "padding-left:0px" You can put in right, top, and bottom in place of left. Just add them right after one another, separated by semi-colons as such: "padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px"
When you're done stringing all of that together, it should look like this:
From there, you can Personalize your Box Cx
There's a variety of styles available for a user to use, but I'm going to be doing something fairly simple and easy to build off of for the sake of this tutorial. To begin personalizing our new space, start out with a simple picture. To do this, I simply copy-pasting the same code as the box above, so that you end up with two boxes. Using the "background-image:url('myurlhere')" to add a picture of your character/some other image to the second box.
"margin-top:0px". Add positive or negative (like -10) in order to move the box into the position you'd like it to be in. You just add it into the string of text that is separated by semi-colons. You can replace top with bottom, left, or right. This will make the boxes overlap. NOTE: Usually the coding for a box to be on top of the other, the coding has to be below the box it will be overlapping.
From there it's pretty simple, just use the codes given and you should be good
Look at my Posting Template Examples to see if you want one of those or if you want to make your own!
First things first, there are a bunch of codes that you will need to learn, but not worry, it's completely and utterly simple and easy to explain what each does
Each coding part of the template must be surrounded by [ < >] These lovely little brackets. And also, please do your BBCoding in the BBCode tab. How do you know you're in that tab? The Preview Tab should be highlighted in a pink/purple color.
Here are some of the basic codes that we need to know:
div align="center" = This sets the template in the center of the posting area
Now that you know that, we can get to the basics of coding.
First off you need to start with [ which makes the start of the coding. As we first start out we keep it simple with div style="coding"
Now, you're probably like "What is the style there for? And why does it just say coding?" Well the style is how your box will be designed. So the coding should look something like this (with out the spaces between it)
[ div align="center" ] [ div style="coding" ]
So now that we got that set up, the coding area is where you put the following:
Width: width:#px; The # sign can be changed with the number of pixels you want the box to be.
Height: height:#px; The # sign can be changed with the number of pixels you want the box to be.
Everything you add into the string where you put coding should be separated by a semi-colon ( ; ) unless it calls for ( : ) Like in the above examples.
So now your code should look like this:
[ div align="center" ] [ div style="width:#px;height:#px ]
Next, you must put the following after width and height in this order:
1) "background-color:yourcolorhere" or "background-image:url('yoururlhere')" Also, images will not work unless you copy the direct link of the picture, which is most easily obtained on photo sites like flickr and tinypic.
Make sure that what you put in for "yourcolorhere" is in the proper format. The easiest way to do this is to use a site like [this] to find a color you love, then copy and paste the full color code, including the number sign. #ffffff will give you white, for example.
2) "border:0px solid #000000" Borders for your box are optional and their color can be changed using the code of the color you desire. You can also create a variety of borders, i.e: a dotted border, a border that moves, multiple borders, ect.
This can be munipulated by changing the "0px" to a number larger (the bigger the number the wider the border) and changing "solid" to something like "dotted" "dashed"
You can also customize your borders even more so. You can change the "border:" to "border-bottom:" You can replace bottom with top, left, or right as well. That way each of your borders could be a different color, style, width, etc. Just add each one right after eachother, separated by semi-colons, such as; "border-bottom:0px solid #000000;border-top:0px solid #000000;border-right:0px solid #000000;border-left:0px solid #000000;"
3) "border-radius:0px" The border radius will make your border more or less round depending on the number you insert for it.
4) "font-family:yourfontfacehere" Different fonts that can be used can be found in GBMP's "Font Face" tab on the left side of the post editing box.
5) "font-size:12px" Font size will be bigger or smaller depending on the number.
6) "text-align:center" This will center your font; you can also put your font to the left, right, or justify.
7) "color:yourcolorhere" This will color your font. Often you can just list the color's name, but sometimes you will need to use the 6 digit code, for example: #000000, the code for black.
8) "padding:0px" Padding is the spacing in your box. This will give you the overall padding, but as with borders, you can specify it to each side, such as "padding-left:0px" You can put in right, top, and bottom in place of left. Just add them right after one another, separated by semi-colons as such: "padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px"
When you're done stringing all of that together, it should look like this:
[ div align="center" ] [ div style="width:200px;height200px;background-color:white;border:0px solid #000000;border-radius:0px;font-family:arial;font-size:12px;text-align:center;color:black;padding:3px;" ] text [ /div ]
From there, you can Personalize your Box Cx
There's a variety of styles available for a user to use, but I'm going to be doing something fairly simple and easy to build off of for the sake of this tutorial. To begin personalizing our new space, start out with a simple picture. To do this, I simply copy-pasting the same code as the box above, so that you end up with two boxes. Using the "background-image:url('myurlhere')" to add a picture of your character/some other image to the second box.
"margin-top:0px". Add positive or negative (like -10) in order to move the box into the position you'd like it to be in. You just add it into the string of text that is separated by semi-colons. You can replace top with bottom, left, or right. This will make the boxes overlap. NOTE: Usually the coding for a box to be on top of the other, the coding has to be below the box it will be overlapping.
From there it's pretty simple, just use the codes given and you should be good
Look at my Posting Template Examples to see if you want one of those or if you want to make your own!