Post by KingHarry on May 26, 2018 22:41:21 GMT
This is a guide to styling things in BBCode! Simple things like bolding and underlining can be done through the bar above posts, but many people are confused by div boxes and table styling. This will be a full guide to everything you can do with div tags, span tags, p tags, img tags, and tables. At the end, there will be links for where to find templates that are premade. If you use these templates, please keep the credit!
1. Simple Code
Here are some shortcuts that can already be found in the bar above posts:
[u] underline [/u][s] strikethrough [/s][b] bold [/b][i] italics [/i][sup] superscript [/sup][sub] subscript [/sub][img src="source URL"] for linking images[a href="source URL"] link [/a][a href="mailto:email"] text [/a] for emails[quote] quote [/quote][video] video URL [/video][hr]The above is a line that covers the entirety of the text box, and can be found under font size on the top bar.
[ul type="disc"][li]List item 1[/li][li]List item 2[/li][li]List item 3[/li][/ul]I won't list the types of list icon, seeing as you can easily make a list from the top bar.
2. Color, A Summary
The color tag can be used in many ways. It is a way to color text without using div tags or font tags, and
Usually, it is used with a word for a color, like this:
[color=value] text [/color]"Value" would be replaced with a word for a color, like red or blue. Most colors are supported, but if you want to enter a certain hex code, or RGB value, there's a way to do that.
When using hex codes for color, you use this:
[color=#value] text [/color]"Value" would be replaced with the hex code you want to enter.
When using RGB values for color, you use this:
[color=rgb(red value,green value, blue value)] text [/color]3. Span, P, Img, and Div tags
These tags are the bulk of BBCode styling, and will be most of what you use to make your posts, trackers, plotters, character applications, etc. look good.
To use these tags, you surround text like this:
[span] span [/span][p] p [/p][div] div [/div][img src="image URL"]Span tags are meant for a few sentences, and p tags are meant for full paragraphs. Div tags are meant for . However, you can mix it up if you feel like it. Don't feel afraid to experiment with code!
Img tags were covered in the first part, but that's the simplest version of them. If you use styling on img tags, you can put borders, background colors, and more on your images you upload to the forum.
The above examples would do nothing. However, if you do something like this:
[span style=""] span [/span][p style=""] p [/p][div style=""] div [/div][img src="image URL" style=""]then the computer knows you're trying to style something. If you put custom variables into the quotation marks, you can style your text.
The following things go inside the quotation marks, and can be used for styling your text. Unless specified, these things can be applied to any tag on the list, not just div tags. They can also be combined within the same tag, like so:
[div style="color:value;font-family:value;border:width style color;"]a. Color and Backgrounds
[div style="color:value;"] div [/div]This works as specified in the color section.
[div style="background:value;"] div [/div]There are many ways to use backgrounds. You can use them with colors:
[div style="background:color-value"] div [/div]which looks different in span than it does in p or div. In span, it looks like this, while in div and p, it looks like
this.
You are also able to use images for your backgrounds, which can be done with this:
[div style="background:url(url goes here, not where "url" is), url(second url);"] div [/div]You don't need a second image, but if you'd like to make more than one image the background, that is possible. The first one will appear on the top layer, and following ones will be on lower layers.
If you want to put a color behind a background image, you can do it like this:
[div style="background-color:value;"] text [/div]and the color will show through the transparent parts of the image.
[div style="background-attachment:value;"] text [/div]This determines if the image scrolls with your computer or is fixed in place. The two values are scroll, which causes it to scroll with your computer, and fixed, which makes it appear to move when you scroll past it, as it stays in place when you scroll. Scroll is the default value, but fixed looks interesting in some uses.
Background position is similar.
[div style="background-position:xvalue yvalue;"] text [/div]This designates the position of the background image. xvalue can be replaced with a pixel value, left, right, or center. yvalue can be replaced with a pixel value, top, bottom, or center. Top left is default, and if you input xvalue but not yvalue, yvalue will be assumed center.
[div style="background-repeat:value;"] text [/div]This designates if the background image will repeat, and in what way. The values are repeat, repeat-x, repeat-y, and no-repeat. Repeat is the default.
b. Borders
[div style="border:width style color;"] text [/div]Borders are the outlines of your text, and work on span, p, img, div, and tables.
Width is in px, and is the width of your border. Test out different widths to find out which one works the best for your post before posting it. Generally, in double borders, you'll need a higher width for them to show up than in other borders.
Style is the type of border you want. There are solid, double, ridge, inset, outset, groove, dotted, and dashed. Play with the border style before making your post. You never know which one will look the best.
Color works the same as the color tag.
Borders can also be used on one side only, such as here.
[div style="border-bottom:width style color;"] text [/div]This can be used on all four sides of the border.
You can also change the radius of a border, such as here.
[div style="border:width style color;border-radius:value;"] div [/div]The value can be in px or in percentages. I usually recommend you use px for borders, but you can try out whatever you'd like.
c. Width and Height
[div style="height:value;"] text [/div][div style="width:value;"] text [/div]Width can be in percentages or px, while height can only be in px. I believe these are solely for divs.
If you use a higher percentage than 100% or make a box more wide in px than the post box is in width, a scrollbar will immediately show up.
Height immediately cuts off any words that go past the designated height. If you want a scrollbar for that, you'll need:
d. Overflow
Overflow! Overflow is how you make it possible to have scroll bars in your posts. If you don't have a height or a width for your div box, it's impossible to have a scrollbar, so keep that in mind.
[div style="overflow:value;"]Overflow can only have two values: auto and scroll. Auto automatically adds scrollbars once your text exceeds the height or width requirements, and scroll will add a scrollbar to each side whether it needs it or not. There are other values, but seeing as they don't work for BBCode, we don't need to worry about them.
e. Padding
Padding is the space between the edge of the div box and the text. It is necessary to make your layout not look like it's squeezed together.
[div style="padding:value;"] text [/div]Your padding can be anywhere from one to however many px you want. However, make sure that it is lower than the width of the box, or your text will come out of the box.
If you want different values for each side, you can do this:
[div style="padding:value-top value-right value-bottom value-left;"]All values are in px.
f. Font Styling
Two of these can be used independently of a div/span/p/table tag, and it will be displayed how you use them without a tag under the example of how to use them with a tag if it's possible to use a font tag with them.
Font family:
[div style="font-family:value;"] text [/div][font family="value"] text [/font]Fonts that are valid are the fonts under the font face dropdown box.
Font size:
[div style="font-size:value;"] text [/div][font size="value"] text [/font]These values can either be in px or in a plain number. Plain numbers can only go up to 7, and work like the font size dropdown box.
Font weight:
[div style="font-weight:value;"] text [/div]This works like the b command. If the value is set to normal, there is no effect. If the value is set to bold, the text within is bolded.
Text align:
[div style="text-align:value;"] text [/div]The values for this are left, right, justify, and center. This works just like the shortcuts on the bar above the post box.
g. Float
Float lets you place elements next to other text.
[div style="float:value;"]The value can be left or right. This lets you put things side by side, such as an image next to a piece of text. Tables are a better way of doing this, but this is also an effective method.
h. Opacity
Opacity lets you make your text more transparent. It goes from 0, completely transparent, to 1, opaque. All numbers between 0 and 1 are possible values.
[div style="opacity:value;"]text[/div]i. Outline
Outlines are just borders that go around borders, and is used the exact same way.
[div style="outline:width style color;"]j. Img Specific
There are some img specific things you can do.
[img src="image URL" title="value"]This gives the image a title, which can be read if you hover over the image.
[img src "image URL" alt="value"]This gives alternate text for if a computer cannot load the image.
4. Tables
You can use most, if not all, of the above stylings on tables. However, there is specific code for a table that designates how a table works. Tables can be automatically made with the table tool, but that doesn't show just how complex tables are.
[table][/table]is the way to make a simple table.
The following elements must be within a table. Only one of
[thead], [tbody], and [tfoot]is required.
[tbody] text [/tbody]indicates the body of a table.
[thead] text [/thead]indicates the header of a table.
[tfoot] text [/tfoot]indicates the footer of a table.
[tr][/tr]indicates a row of a table. These rows contain cells.
[td] text [/td][th] text [/th]indicate content cells. [td] is for content cells, [th] is for header cells.
[table][tbody][tr][td style="padding: 3px;"]Row 1 column 1[/td][td style="padding: 3px;"]Row 1 column 2[/td][/tr][tr][td style="padding: 3px;"]Row 2 column 1[/td][td style="padding: 3px;"]Row 2 column 2[/td][/tr][/tbody][/table]This is a normal generated table from the table option. It comes out looking like this:
| Row 1 column 1 | Row 1 column 2 |
| Row 2 column 1 | Row 2 column 2 |
You can style any of these elements, and I recommend you do, as tables are extremely useful in making character sheets.
5. Templates
BBCode Styling can be rather complex. It is a great skill to learn and hopefully this guide will help you create your own posting templates. If you are looking for something a little more fancy, outside of the box, and perhaps a bit more advanced than your coding abilities, there is a wonderful website that allows you to use their templates!
This is a regular proboards forum that requires an account. Once an account is created there is just one step to take!
They do require you to post in the introduction board before using their templates!
Simply make a post under this board right here. adoxographyv2.boards.net/board/38/introductions Just a little blurb is fine, they don’t need a life history!
Now that you have introduced yourself you can now start browsing the forum. They have so many wonderful templates to look from! You can click this link here to find all their templates. adoxographyv2.boards.net/board/14/templates
Please be aware that there are many sub boards to choose from so make sure you know what type of template you are looking for. As an example let’s look at PLOT templates.
It is VERY important to read the subjects and read the instructions for the plot pages. If the subject says PLUG IN REQUIRED that means it usually requires the STYLE TAGS Plug-in, which is NOT currently available on the forum.
You have found a nice plotter and you want to use it. So now what do you do? Simply copy the code the creator has left for you (if there is no code hit the quote button to copy and paste) and create a post on the forum. Once you have a plot page, your plot page now has a URL. Copy your plot page's URL from the browser window, and create a new response. Simply let the creator know where you are using their template! Create a reply and type in the phrase below, with the link.
It is perfectly fine to switch templates or use multiple templates in one thread, just be courteous and link your plot page in the creators thread. As a side note, within the coding they have a credit. NEVER REMOVE THIS. Removing the credit is considered plagiarism and is against the law. As silly as that may sound.
If you need help editing the coding for it to work, please don’t hesitate to get in contact with creator, and they can guide you through it thoroughly! If they don’t seem to be available, please ask in our HELP section on Discord, and anyone familiar with BBC or HTML will gladly assist you!
6. Conclusion
In conclusion, BBCode is an incredibly powerful tool to create amazing BBCode stylings for your posts. If you have any questions on BBCode, or if you want someone to walk you through it, you can contact bird or check out the Discord chat's help channel!
