Page 1 of 1

How to use BBcode styles

Posted: Sun Oct 24, 2021 2:24 am
by Raddeck

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
Result:
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]
Result:
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
Result:
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]
Result:
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
Result:
This is some text to test code or smilies :D



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]
Result:
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]
Result:
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]
Result:
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]
Result:
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]
Result:
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]
Result:
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]
Result:
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]
Result:
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]
Result:
Hidden Content
This board requires you to be registered and logged-in to view hidden content.






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]
Result:
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]
Result:
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]
Result:
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]
Result:






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.
Result:
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]
Result:
  • Red
  • Blue
  • Yellow
Information: Creating an Ordered list
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]
Result:
  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
  1. The first possible answer
  2. The second possible answer
  3. 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]
Result:
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]
Result:
Preformatted      text



Top of the page


S
Information: Strike through text.
Parameter: None
Example Usage:

Code: Select all

That is [s]correct[/s] wrong.
Result:
That is correct wrong.





Shadow Color
Information: Shadow text.
Parameter: color of the shadow
Example Usage:

Code: Select all

[shadow=blue]Shadow Color[/shadow]
Result:
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 
Result:
: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]
Result:
► 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] 
Result:
[+] My tile
This is hidden text




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
Result:
H2O





Sup
Information: Superscript, slightly elevated text.
Parameter: None
Example Usage:

Code: Select all

E = mc[sup]2[/sup]
Result:
E = mc2



Top of the page


U
Information: Gives Underlined text.
Parameter: None
Example Usage:

Code: Select all

[u]This text is underlined[/u]
Result:
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]
Result:
Forum


Top of the page