How to use BBcode styles
Posted: Sun Oct 24, 2021 2:24 am
BBcode typography styles
Documentation and examples for BBcode typography available for members.
Use them to embellish and style your texts. It makes the texts more interesting to read.
Anchor
Code: Select all
Hyperlink leading to an anchor: use the URL BBCode and only #AnchorName as URL...
[url=#AnchorName]Hyperlink title[/url]
Anchor with no visible link icon:
[anchor name=AnchorName][/anchor]
[anchor name=AnchorName]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName][img]url[/img][/anchor]
Anchor with visible link icon: add "visible=yes"...
[anchor name=AnchorName visible=yes][/anchor]
[anchor name=AnchorName visible=yes]Word, Title or Paragraph[/anchor]
[anchor name=AnchorName visible=yes][img]url[/img][/anchor]
b
Information: Makes text Bold.
Parameter: None
Example Usage:
Code: Select all
[b]This[/b] is a [b]bold[/b] text
This is a bold text
Top of the page
Blur Color
Information: Blurred text.
Parameter: color of the blur
Example Usage:
Code: Select all
[blur=blue]Blur Color[/blur]
Blur Color
BR
Information: Insert single line breaks in a text.
Parameter: None
Example Usage:
Code: Select all
[b]This[/b] [br][/br]is a [b]bold[/b] text
This
is a bold text
Top of the page
center
Information: Centers the text.
Parameter: None
Example Usage:
Code: Select all
[align=center]This text is centered[/align]
This text is centered
Code
Information: Wraps text or codes in a Code block. All characters will have the same width, BBcode, codes and smilies won't be parsed.
Parameter: None
Example Usage:
Code: Select all
This [i]is[/i] some text [b]to[/b] test code or smilies :D
This is some text to test code or smilies
Top of the page
Text direction
Information: Direction of the text.
Parameter: left/right
Example Usage:
Code: Select all
[dir=rtl]This text[/dir] [dir=ltr]This text[/dir]
This text This text
Drop shadow
Information: Drop shadow on text.
Parameter: color of the shadow
Example Usage:
Code: Select all
[dropshadow=blue]This text[/dropshadow]
This text
Top of the page
Fade in/out
Information: Fade in/out on text. Flashing text.
Parameter: none
Example Usage:
Code: Select all
[fade]This text[/fade]
This text fade
Float text left or right
Information:
Parameter: None
Example Usage:
Code: Select all
[float=left]This text is aligned left[/float] [float=right]This text is aligned right[/float]
This text is aligned left
This text is aligned right
Top of the page
Font Color
Information: Changes the font of the text.
Parameter: The font the text needs to have.
Example Usage:
Code: Select all
[font=Comic Sans MS]Testing[/font]
Testing
Font Size
Information: Changes the size of the text.
Parameter: The size the text needs to have.
Example Usage:
Code: Select all
[size=150]Testing[/size]
Testing
Top of the page
Color
Information: Changes the color of the text.
Parameter: The text color.
Example Usage:
Code: Select all
[color=blue]This text is blue[/color]
This text is blue
Glowing text
Information: Changes the color of the text.
Parameter: The text color.
Example Usage:
Code: Select all
[glow=red]Glowing text[/glow]
Glowing text
Top of the page
Hidden text
Information: Hides the text in a Hidden tag.
Parameter: None
Example Usage:
Code: Select all
[hidden]This is hidden text[/hidden]
Highlight
Information: Changes the background color of the text.
Parameter: The color of the background.
Example Usage:
Code: Select all
[highlight=yellow]Colored text[/highlight]
[highlight=#f6f7f8][color=#000040]highlighted text[/color][/highlight]
highlighted text
highlighted text
Top of the page
HR
Information: Adds a Horizontal Rule in the post.
Parameter: None
Example Usage:
Code: Select all
[hr][/hr]
All lines you see in this post are HR tags
I
Information: Results in Italic text
Parameter: None
Example Usage:
Code: Select all
[i]Italic text[/i]
Italic text
Top of the page
Icons
Information:add a fontawesome icon: https://fontawesome.com/v5.15/
Parameter: Name of the icon
Example Usage:
Code: Select all
[fa]fa-500px[/fa]
IMG
Information: Embed an Image in your post.
Parameter: None
Example Usage:
Code: Select all
[img]http://mysite.xyz/img/myimage.png[/img]
Top of the page
KBD
Information: Is used to define keyboard input.
Parameter: None
Example Usage:
Code: Select all
Press [kbd]alt[/kbd] + [kbd]H[/kbd] ([kbd]control[/kbd] + [kbd]alt[/kbd] + [kbd]H[/kbd] on Mac) to go home.
Press alt + H (control + alt + H on Mac) to go home.
Generating lists
Information: Creating an Unordered list
Parameter: None
Example Usage:
Code: Select all
[list]
[*]Red
[*]Blue
[*]Yellow
[/list]
- Red
- Blue
- Yellow
Parameter: None
Example Usage:
Code: Select all
[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]
[list=A]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
[list=i]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
[list=I]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
- Go to the shops
- Buy a new computer
- Swear at computer when it crashes
- The first possible answer
- The second possible answer
- The third possible answer
- The first possible answer
- The second possible answer
- The third possible answer
- The first possible answer
- The second possible answer
- The third possible answer
Top of the page
Marquee
Information: Results in marquee text
Parameter: left or right
Example Usage:
Code: Select all
[marq=left]Marquee text[/marq]
[marq=right]Marquee text[/marq]
Marquee text
Marquee text
PRE
Information: Preformatted text. All characters have the same width and spaces don't collapse.
Parameter: None
Example Usage:
Code: Select all
[pre]Preformatted text[/pre]
Preformatted text
Top of the page
S
Information: Strike through text.
Parameter: None
Example Usage:
Code: Select all
That is [s]correct[/s] wrong.
That is correct wrong.
Shadow Color
Information: Shadow text.
Parameter: color of the shadow
Example Usage:
Code: Select all
[shadow=blue]Shadow Color[/shadow]
Shadow Color
Smilies
Information: Shadow text.
Parameter: click on the desired smilies on list on the right marge, next to your post.
Example Usage:
Code: Select all
:D
Top of the page
Spoiler
Information: Hides the text in a Spoiler tag.
Parameter: None
Example Usage:
Code: Select all
[spoil]This is hidden text[/spoil]
► Show Spoiler
Spoiler with title
Information: Hides the text in a Spoiler tag.
Parameter: None
Example Usage:
Code: Select all
[spoiler="My tile"]This is hidden text[/spoiler]
Top of the page
Sub
Information: Subscript, text that is a little below the other text.
Parameter: None
Example Usage:
Code: Select all
H[sub]2[/sub]O
H2O
Sup
Information: Superscript, slightly elevated text.
Parameter: None
Example Usage:
Code: Select all
E = mc[sup]2[/sup]
E = mc2
Top of the page
U
Information: Gives Underlined text.
Parameter: None
Example Usage:
Code: Select all
[u]This text is underlined[/u]
This text is underlined
URL
Information: Add an url to post.
Parameter: Optional: The url or an id like: #myidname
Example Usage:
Code: Select all
[url=https://lifeplay.site]Forum[/url]
Forum
Top of the page