Post by Blazey on Mar 7, 2021 8:06:53 GMT -5
So you here on site, you want to make thing look cool. But don't know how to, well this guide will help with that. Do keep in mind that bbcode is limited and therefore you cannot do everything that you could with straight up html and css.
Basics
All codes (minus mentions) use brackets, the brackets used are here: []
Every code will be in either one or two parts. Those with two surround the thing it is effecting.
These parts are called tags, a code with one tag holds all info and what it is effecting in that one tag.
A code with two tags will have the left one start it and the right one stop it. Or as others say, open and close.
As such they get called open and close tags.
Each code has an ID for it, being a letter or a word.
Open tags and tags put these ids in the brackets
Example: [open]
Some tags and open tags need extra information.
This information will be connected to the ID or another word I shall an Extra via an equal sign.
Some information may be words, links etc that can get confused as junk, so should be surrounded by speech marks to protect them.
Numbers on their own however can normally be fine.
Example: [open=1] [open thing="hello"]
The close tag takes that same ID and puts a / before it.
Example: [/open]
A full two tag code could look like so:
Example: [open] text here will be effected [/open] this text won't be.
Simple codes
These
codes are for all the important buttons you find on the thread/post creation page and the post edit page.
Code: Stops any tags inside them working, though it cannot stop itself. The ID is code and I tend to use them when giving out the code for my templates. You may also see it when you got to fill out a form in a thread, say an evo or bleed phase. The code tags in use look like so, remove the spaces in the tags to have working code tags.
Bold: This makes text stand out, and uses the ID b. Text when bolded look like this.
Italics: Italics slants the text to the right and uses the ID i. Text when italic look like this.
Underline: I am sure you know this one, underline creates the line under text normally seen on titles and headers. Underline uses the ID u and text looks like this.
Strikethrough: Strikethrough puts a line through the middle of the text and uses the ID s. Text when strikethrough look likethis.
Superscript: You know the tiny numbers we do for squared and cubed in maths? That is what this does! It's ID is the word sup and will look like so: TextText.
Subscript: The same as superscript but below instead of on top. It has the ID of sub and looks like so: TextText.
Font Color: I mean, you can kind of guess this one. The ID is color. Font Color needs a color name or a hexcode connected to it's ID. A hexcode is a set of 6 numbers/letters where each pair give you the amount of red green and blue. These 6 numbers/letters must always have a hashtag before them. For example for a text like so: text you could use one of the following codes.
Link: These are the clickable things that take you to other pages or posts. It uses the ID a. A link have either have the url betwen the brackets or inside the open tag with the extra called href. By having it in the open tag the link can have text or an image inside it, looking nicer then just a clickable url text. When done right a link looks like so: link
Image: You know these, these are pictures! Images have only one tag and an ID of img. Images need a direct url that ends in a image format like.png or .gif connected to an extra called src.
Mentions: These look like links BUT they have no tags. Instead it uses an @ followed by the person's username. It will give a link that links to the person's profile and will also give the person a notification. For example (Sorry Ichor XD) Ichor
Quote: These are rounded boxes that tend to hold someone's post, with who posted it and when. It uses the ID quote and it looks like so:
Font Face: These are the fonts we use. They use a shared ID of font. Connected to an extra called face you will put a font name like Arial. When done right it will make the font change like to this!
Font Size: This changes the size of the text, and use the ID of font with an extra called size. Within size you can either put a number between 1 and 7 for any of the premade font sizes of the site. Or you can use your own by putting a number with px at the end. That stands for pixels the tiny squares of the screen, be careful because otherwise it can get uh, crazy. E.g. ERIS
Dice: This is a normal dice, it is used for fishing and battles
It has only one tag with the ID roll. It like code cannot be stopped by code tags. XD
|gkUOwxm
Table: This is a grid of columns and rows. For table is uses multiple sets of tags. The first tag pair it needs has an ID of table. Inside them should be a tag pair with an id tbody. This tbody can have some small styling on it if needed. Inside the tbody you put in pairs of tags with the IF of tr, this one makes a row. Inside of tr tags you can put in pairs of tags with the ID of td. Td is the individual boxes or the row. Sometime, you may want a box to fit across multiple rows or coloums. For that there are two extras called rowpspan and colspan. Rowspan makes the td take up an extra row space, while colspan makes the td take up an extra column space.
Align: These use divs (Sees divs in second post) with the align extra but the buttons will sometimes just put the style extra with text-align property in everything instead. I recommend the Div way as it means you don't have to edit multiple tags for the alignment, just one.
Basics
All codes (minus mentions) use brackets, the brackets used are here: []
Every code will be in either one or two parts. Those with two surround the thing it is effecting.
These parts are called tags, a code with one tag holds all info and what it is effecting in that one tag.
A code with two tags will have the left one start it and the right one stop it. Or as others say, open and close.
As such they get called open and close tags.
Each code has an ID for it, being a letter or a word.
Open tags and tags put these ids in the brackets
Example: [open]
Some tags and open tags need extra information.
This information will be connected to the ID or another word I shall an Extra via an equal sign.
Some information may be words, links etc that can get confused as junk, so should be surrounded by speech marks to protect them.
Numbers on their own however can normally be fine.
Example: [open=1] [open thing="hello"]
The close tag takes that same ID and puts a / before it.
Example: [/open]
A full two tag code could look like so:
Example: [open] text here will be effected [/open] this text won't be.
Simple codes
These
codes are for all the important buttons you find on the thread/post creation page and the post edit page.
Code: Stops any tags inside them working, though it cannot stop itself. The ID is code and I tend to use them when giving out the code for my templates. You may also see it when you got to fill out a form in a thread, say an evo or bleed phase. The code tags in use look like so, remove the spaces in the tags to have working code tags.
[ code]code stuff here[/ code]Bold: This makes text stand out, and uses the ID b. Text when bolded look like this.
[b]bold text[/b]Italics: Italics slants the text to the right and uses the ID i. Text when italic look like this.
[i]italic text[/i]Underline: I am sure you know this one, underline creates the line under text normally seen on titles and headers. Underline uses the ID u and text looks like this.
[u]Underline text[/u]Strikethrough: Strikethrough puts a line through the middle of the text and uses the ID s. Text when strikethrough look like
[s]Strikethough text[/s]Superscript: You know the tiny numbers we do for squared and cubed in maths? That is what this does! It's ID is the word sup and will look like so: TextText.
Text[sup]Text[/sup]Subscript: The same as superscript but below instead of on top. It has the ID of sub and looks like so: TextText.
Text[sub]Text[/sub]Font Color: I mean, you can kind of guess this one. The ID is color. Font Color needs a color name or a hexcode connected to it's ID. A hexcode is a set of 6 numbers/letters where each pair give you the amount of red green and blue. These 6 numbers/letters must always have a hashtag before them. For example for a text like so: text you could use one of the following codes.
[color=red]text[/color][color=#ff0000]text[/color]Link: These are the clickable things that take you to other pages or posts. It uses the ID a. A link have either have the url betwen the brackets or inside the open tag with the extra called href. By having it in the open tag the link can have text or an image inside it, looking nicer then just a clickable url text. When done right a link looks like so: link
[a]link here[/a][a href="link here"]Text[/a]Image: You know these, these are pictures! Images have only one tag and an ID of img. Images need a direct url that ends in a image format like.png or .gif connected to an extra called src.
[img src="https://i.imgur.com/0bgcswq.png"]Mentions: These look like links BUT they have no tags. Instead it uses an @ followed by the person's username. It will give a link that links to the person's profile and will also give the person a notification. For example (Sorry Ichor XD) Ichor
@adminQuote: These are rounded boxes that tend to hold someone's post, with who posted it and when. It uses the ID quote and it looks like so:
Eris Rules!
[quote]Eris Rules :D[/quote]Font Face: These are the fonts we use. They use a shared ID of font. Connected to an extra called face you will put a font name like Arial. When done right it will make the font change like to this!
[font face="comic sans ms"]text here[/font]Font Size: This changes the size of the text, and use the ID of font with an extra called size. Within size you can either put a number between 1 and 7 for any of the premade font sizes of the site. Or you can use your own by putting a number with px at the end. That stands for pixels the tiny squares of the screen, be careful because otherwise it can get uh, crazy. E.g. ERIS
[font size="5"Text[/font] [font size="20px"]Text[/font]Dice: This is a normal dice, it is used for fishing and battles
It has only one tag with the ID roll. It like code cannot be stopped by code tags. XD|gkUOwxm
[ roll]Table: This is a grid of columns and rows. For table is uses multiple sets of tags. The first tag pair it needs has an ID of table. Inside them should be a tag pair with an id tbody. This tbody can have some small styling on it if needed. Inside the tbody you put in pairs of tags with the IF of tr, this one makes a row. Inside of tr tags you can put in pairs of tags with the ID of td. Td is the individual boxes or the row. Sometime, you may want a box to fit across multiple rows or coloums. For that there are two extras called rowpspan and colspan. Rowspan makes the td take up an extra row space, while colspan makes the td take up an extra column space.
| Row 1 column 1 | Row 1 column 2 | |
| Row 2 column 1 | Row 2 column 2 | |
[table][tbody][tr][td style="padding:3px;" rowspan="2"]Row 1 column 1[/td][td colspan="2" 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]
Align: These use divs (Sees divs in second post) with the align extra but the buttons will sometimes just put the style extra with text-align property in everything instead. I recommend the Div way as it means you don't have to edit multiple tags for the alignment, just one.
Left
Justify
Center
Right
[div style="text-align:left;"]Left[/div][div align="justify"]Justify[/div] [div align="center"]Center[/div] [div align="right"]Right[/div]
