Post by Deleted on Jul 24, 2015 21:14:02 GMT -5
This topic is not compatable with Tapatalk. Please do not open this topic in the Tapatalk app.
Note, this topic is written in assumption that you are comfortable with BBCode (as if you use the "BBCode" tab more than the "Preview" tab in the post editor.
This topic was set to have the same font and background color as the Twili theme, due to the examples having potential color incompatibility issues that may be found on other themes otherwise.
This topic was set to have the same font and background color as the Twili theme, due to the examples having potential color incompatibility issues that may be found on other themes otherwise.
This topic is made to help with advanced BBCode (i.e. not listed in the Visual Editor UI, or possibly not listed on Proboard forums), in case you wanted to mess around with the code for whatever reason.
Tags
Tags are the core of BBCode, which tells how a post (or part of the post) how to be formatted. Tags are pieces of text enclosed in brackets [], and each has a various purpose. Whenever using BBCode, you will very likely be using a tag.
The [b] tag makes text bold, the [i] tag makes text italic, etc.
Note, I currently do not have a long list of unlisted tags.
The [b] tag makes text bold, the [i] tag makes text italic, etc.
Note, I currently do not have a long list of unlisted tags.
[noparse]
The BBCode [noparse] acts similar to the [code] function (keeps the BBCode from formatting (parsing)), but keeps the code inline and without a box.
In BBCode, you would write the following:
Result:
The BBCode [code] is annoying.
Notes:
[noparse] may get very confusing to use, and may conflict with other codes in undesired ways.
In BBCode, you would write the following:
The BBCode [noparse][code][/noparse] is annoying.
Result:
The BBCode [code] is annoying.
Notes:
[noparse] may get very confusing to use, and may conflict with other codes in undesired ways.
[spoiler]
The [spoiler] tag is used to hide a bunch of text under one line, as you've already seen. The usage is quite simple, as there are no properties attached to it. However, it is impossible to view in the preview mode for some reason.
Styles
If you enjoy using BBCodes to the point where you're like me, making health bars and such, I will list various properties that can help you more with this. Styles are typically used with [div]'s or [font], and cover a huge range of properties. If you're familiar with CSS, then Styles should be a breeze, or perhaps you've already mastered it.
The format goes as followed:
[div style="property1: value; property2; value;"][/div]
The format goes as followed:
[div style="property1: value; property2; value;"][/div]
Opacity
[div style="opacity:0.5;"][/div]
Red: Opacity. 1 is completely solid, 0 is completely transparent.
Glow
Projects are a bunch of BBCode (normally very long), that have been made by users to fulfill a task, usually cosmetic.
Opacity can be used to change the transparency of certain things, like images or text.
[div style="opacity:0.5;"][/div]
Red: Opacity. 1 is completely solid, 0 is completely transparent.
Opacity (Only applied to text)
If you need a code that only affects the text, this style is needed.
[div style="color:rbga(255,255,255,0.3)"]
[div style="color:rbga(255,255,255,0.3)"]
Red: Amount of red in the font.
Green: Amount of green in the font.
Blue: Amount of blue in the font.
Gray: Opacity of the font.
Click here to go to a Hex to RBGA color converter.
Result:
Transparent white text
Glow
This style creates a glow effect of text.
[div style="text-shadow:0px 0px 5px #ffffff;"]I can glow![/div]
Red: Position. Positive values move it to the right, while negative values move it left.
Yellow: Position again. Positive values move it down, while negative values move it up.
Green: How large the shadow is. Loses effect at greater sizes.
Blue: Color. Can be any color you want, and can use the RBGA format.
[div style="text-shadow:5px 15px 5px #00ffff;"]I can glow! But not in the usual place...[/div]
Combined with the text-only opacity, you can create a "foggy" font.
[div style="color:rgba(255, 255, 255, 0.0);text-shadow:0 0 3px #ffffff;"]SpookyGhost ©Spookypatrol[/div]
I can glow!
[div style="text-shadow:0px 0px 5px #ffffff;"]I can glow![/div]
Red: Position. Positive values move it to the right, while negative values move it left.
Yellow: Position again. Positive values move it down, while negative values move it up.
Green: How large the shadow is. Loses effect at greater sizes.
Blue: Color. Can be any color you want, and can use the RBGA format.
I can glow! But not in the usual place...
[div style="text-shadow:5px 15px 5px #00ffff;"]I can glow! But not in the usual place...[/div]
Combined with the text-only opacity, you can create a "foggy" font.
I'm a spooky ghost.
[div style="color:rgba(255, 255, 255, 0.0);text-shadow:0 0 3px #ffffff;"]SpookyGhost ©Spookypatrol[/div]
BBCode Projects
Projects are a bunch of BBCode (normally very long), that have been made by users to fulfill a task, usually cosmetic.
Health Bar (collective)
Author: Vari
This is a cosmetic setup meant to be placed at the original post of dungeons or bosses. The code is very complicated and long, let alone can be confusing.
The amount of players, size of the health bar, and colors, must be manually edited.
Example:
I will use an in-depth tutorial to explain every part of this. With white space, the BBCode would look like this:
To break it down, I will list every piece individually:
[font color="#000000" style="text-shadow:0 0 2px #ffffff;" size="3"] This makes the text look the way it is.
[div style="width:200px;height:176px;border:2px solid #000000;border-right:4px solid #000000;"] This makes the boundry of the box.
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] This is the container for each player cell, and also sets the background color for it (transparent).
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]Player 1: 300/300[/div] The actual health bar, which is colored and represents the size. This also contains the player name and health.
Now for the editable parts:
[font color="#000000" style="text-shadow:0 0 1px #ffffff;" size="3"]
[div style="width:200px;height:22px;border:2px solid #000000;border-right:4px solid #000000;"]
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"]
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]
Player 1: 300/300
[/div]
[/div]
[/div]
[/font]
Red is the height of the entire box, and is calculated like so: height:(TotalPlayersInBox * 22)px;
Yellow is the width of the health bar (colored part), and is written like so: width:(CurrentHP / MaxHP)%;
Green is the color of the health bar, and is relative to the width. It follows the color table below.
Blue is the stats, and the formatting is self-explanatory.
Please post below about any BBCode or Style that you would want to see. If you have a project you wish to display, please PM me so I can add it into the Projects section.
Author: Vari
This is a cosmetic setup meant to be placed at the original post of dungeons or bosses. The code is very complicated and long, let alone can be confusing.
The amount of players, size of the health bar, and colors, must be manually edited.
Example:
Player 1: 300/300
Player 2: 139/280
Player 3: 262/280
Player 4: 202/220
Player 5: 336/440
Player 6: 34/200
Player 7: 230/280
Player 8: 190/240
[font color="#000000" style="text-shadow:0 0 2px #ffffff;" size="3"][div style="width:200px;height:176px;border:2px solid #000000;border-right:4px solid #000000;"][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]Player 1: 300/300[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:50%;height:20px;background-color:#b90;white-space:nowrap;"]Player 2: 139/280[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:94%;height:20px;background-color:#0b0;white-space:nowrap;"]Player 3: 262/280[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:72%;height:20px;background-color:#6b0;white-space:nowrap;"]Player 4: 202/220[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:76%;height:20px;background-color:#6b0;white-space:nowrap;"]Player 5: 336/440[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:15%;height:20px;background-color:#820;white-space:nowrap;"]Player 6: 34/200[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:82%;height:20px;background-color:#3b0;white-space:nowrap;"]Player 7: 230/280[/div][/div][div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"][div style="width:79%;height:20px;background-color:#6b0;white-space:nowrap;"]Player 8: 190/240[/div][/div][/div][/font]
I will use an in-depth tutorial to explain every part of this. With white space, the BBCode would look like this:
[font color="#000000" style="text-shadow:0 0 2px #ffffff;" size="3"]
[div style="width:200px;height:176px;border:2px solid #000000;border-right:4px solid #000000;"]
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"]
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]
Player 1: 300/300
[/div]
[div style="width:50%;height:20px;background-color:#b90;white-space:nowrap;"]
Player 2: 139/280
[/div]
[/div]
[/div][/font]
[/font]
[div style="width:200px;height:176px;border:2px solid #000000;border-right:4px solid #000000;"]
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"]
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]
Player 1: 300/300
[/div]
[div style="width:50%;height:20px;background-color:#b90;white-space:nowrap;"]
Player 2: 139/280
[/div]
[/div]
[/div][/font]
[/font]
To break it down, I will list every piece individually:
[font color="#000000" style="text-shadow:0 0 2px #ffffff;" size="3"] This makes the text look the way it is.
[div style="width:200px;height:176px;border:2px solid #000000;border-right:4px solid #000000;"] This makes the boundry of the box.
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] This is the container for each player cell, and also sets the background color for it (transparent).
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]Player 1: 300/300[/div] The actual health bar, which is colored and represents the size. This also contains the player name and health.
Now for the editable parts:
[font color="#000000" style="text-shadow:0 0 1px #ffffff;" size="3"]
[div style="width:200px;height:22px;border:2px solid #000000;border-right:4px solid #000000;"]
[div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"]
[div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"]
Player 1: 300/300
[/div]
[/div]
[/div]
[/font]
Red is the height of the entire box, and is calculated like so: height:(TotalPlayersInBox * 22)px;
Yellow is the width of the health bar (colored part), and is written like so: width:(CurrentHP / MaxHP)%;
Green is the color of the health bar, and is relative to the width. It follows the color table below.
Blue is the stats, and the formatting is self-explanatory.
100-90.1 | 90-80.1 | 80-70.1 | 70-60.1 | 60-50.1 | 50-40.1 | 40-30.1 | 30-20.1 | 20-10.1 | 10-0.1 |
#0b0 | #3b0 | #6b0 | #9b0 | #aa0 | #b90 | #b60 | #b30 | #b00 | #800 |
Full | Good | Moderate | Bad | Severe | Critical |
This is what it would look like if four people were in the table. Note, all white space must be removed to perform correctly. | [font color="#000000" style="text-shadow:0 0 1px #ffffff;" size="3"] [div style="width:200px;height:88px;border:2px solid #000000;border-right:4px solid #000000;"] [div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] [div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"] Player 1: 300/300 [/div] [/div] [div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] [div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"] Player 2: 300/300 [/div] [/div] [div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] [div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"] Player 3: 300/300 [/div] [/div] [div align="left" style="width:200px;height:20px;border:1px solid #000000;background-color:rgba(48, 48, 48, .6);"] [div style="width:100%;height:20px;background-color:#0b0;white-space:nowrap;"] Player 4: 300/300 [/div] [/div] [/div] [/font] Player 1: 300/300 Player 2: 300/300 Player 3: 300/300 Player 4: 300/300 |
Please post below about any BBCode or Style that you would want to see. If you have a project you wish to display, please PM me so I can add it into the Projects section.