basic guide to bbc code !

[aspen]

Table of Contents

i. Basics
ii. Formatting
iii. Possible Elements
iv. Limitations
v. Resources

-~-~-~-~-~-

i. Basics

Basic knowledge of how to read code is pretty important for coding posting tables.

The basic format for BBCode styling is this:

[div style="width:100px;height:100px;background-color:#E3DC95;color:#51513D;"]text here[/div]

[ div ] is what this tag represents. 'style' modifies it so it looks and acts different. The quotations carry the code and the semicolons separate each element from each other so they don't muddle up. No, you can't use commas instead. Sorry!

Notice that with each [ div ] opened, you must always close it with a [ /div ] tag.

Let's space this out a bit so we can understand what everything is supposed to do to this div.

width:100px; height:100px;

Defines width and height of the box.

background-color:#E3DC95;

Changes the background into a nice green color.

-~-~-~-~-~-

ii. Formatting

Formatting is relatively easy, depending on whether you're using table or div formatting.

Div formatting should look like this:

[div style="width:100px;height:100px;background-color:#E3DC95;color:#51513D;"]text here[/div]

Which gives us:

text here

The coding must be formatted in the "div style="element:definition;" format or else it won't show up. You can, alternatively, add spacing between element and definition (i.e. "background-color: white" vs "background-color:white") .

Some people like to style tables, too, which is fine and presents its own limitations (like not really being able to hide the border element despite defining it as nonexistent...."). Table styling is basically the same, like this:

[table style="width:100px;height:100px;background-color:#E3DC95;color:#51513D;"][tbody][tr][td]cell one[/td][/tr][/tbody][/table]

Which gives us:

cell one

Elements (things like background-color, color, width, or height) can be presented in literally any order in the style, so don't worry about definining height before width or whatever.

-~-~-~-~-~-

iii. Possible Elements

Despite being relatively restrictive compared to pure HTML/CSS, there's still a bit you can do with Proboards BBCode. Elements that work will be listed here. You can search for additional element usage help by looking up said element on Google.

Element	Description
width, height	Sets width and height (respectively) for a table/div. Can use 'px' or '%' at the end of the number.
background-color, background-image	Changes background color or image. Format for background-image is [div style="background-image:url(http://url.com/img.png);"].
color	Changes text color. Can use a regular word (white, red, black) or a color code like #FFFFFF (which is white, by the way).
overflow	Defines what happens if text overflows your div/table. I usually do "overflow:auto;" to make it scroll automatically if it overflows.
border-radius	Changes the roundness of your table/div's corners.
padding	Adds some padding to the inside edges of your div/table so the text has room to breathe (i.e. space around the text area so it doesn't hit the edges and make it hard to read). Be careful, because this can make your width/height bigger and mess with sizing.
margin, margin-left, margin-right, margin-top, margin-bottom	Adds spacing outside of the div/table in accordance to other divs. Sometimes top and bottom don't work and I'm not wholly sure why.
span	Span is actually usually its own "div", so it'd be something like: [span style="border-top:#95b2d3 dotted 1px;"] There are a lot of things you can do with span tags, so I'd suggest looking them up. It's mainly used to decorate text!
border, border-top, border-bottom, border-left, border-right	Allows you to customize your border. Format for customization should look like this: [div style="border-botton: #FFFFFF dotted 1px;"] Possible customizations in place of 'dotted' include 'dashed', solid, double, groove, ridge, inset, outset, none, or hidden.
float	Includes "float:left" and "float:right". Lets images float to the side of text or allows elements to overlap other elements (either above or beneath). You can modify where an element floats with the margin property.
max-width, max-height	Usually used to resize images, but can be used to resize divs too.

-~-~-~-~-~-

iv. Limitations

Although there's a lot you can do with BBCode, there's a lot you also can't. This includes, but is not limited to, the following:

- Stylized bold, italics, and underlined text (no special colors for these unfortunately)
- Transitions (or at least, I believe these aren't possible... I hope I can be proven wrong P:)
- Formatting/spacing (good luck making readable code!)
- Classes (it's too bad you can't name your divs things like "poopbutt")
- More complicated css magic

Afaik that's kind of it. You can do a lot of the basic coding stuff with BBCode here on Proboards, and that's a miracle.

-~-~-~-~-~-

v. Resources

CSS tutorial - for finding different elements you can try out and see if they work.

Coolors - for generating colors and color palettes.