Skip to content

BBCode Tags

Jump to bottom
Alteras1 edited this page Aug 21, 2024 · 7 revisions

List of BBCode tags and valid syntax spec, listed in alphabetical order.

Table of Contents

Accordion [accordion]{slide} [accordion][slide]

Provides collapsable accordions with customizable text.

[accordion]
  {slide=name}content{/slide}
  {slide=name}content{/slide}
[/accordion]

[accordion]
  [slide=name]content[/slide]
  [slide=name]content[/slide]
[/accordion]

Options - Accordion

[accordion]
[accordion align="alignment" width="#%"]
[accordion=bright|bcenter|bleft|fright|fleft|##%]
  • alignment options
    • bright - align the accordion to the right
    • bcenter - align the accordion to the center
    • bleft - align the accordion to the left
    • fright - float the accordion left
    • fleft - float the accordion right
  • width - size the width of the accordion. Accepts either % percentages or px pixels.

single option with | splits are provided for legacy code.

Options - Slide

{slide=title|options}
[slide=title]
[slide title="title" left right center open style="CSS"]
  • title - The title of the accordion slide
  • open - Sets the accordion slide to be open by default
  • left - align the title to the left of the slide
  • right - align the title to the right of the slide
  • center - align the title to the center of the slide
  • style - add custom CSS to the title slide. Not supported for | options

Single option with | splits are provided for legacy code. Only works with {slide} syntax.

Alignment

Anchor

Animation & Keyframe [animation][keyframe]

Background

Block

Blockquote

Border

Centerblock

Check

Class [class]

Adds user defined CSS Classes to the post, to be used in tandem with Div [div].

[class=name]content[/class]
[class name="className" state="psuedo-class" minWidth="" maxWidth=""]content[/class]
[class name="className" selector="selector"]content[/class]

Options

  • name - The name of the CSS class. Must abide by standard CSS class name rules.
  • state - This optionally applies one of a limited set of psuedo-classes. The list of valid psuedo-classes are:
    • state="hover" - Adds the CSS psuedo-class :hover
    • state="focus" - Adds the CSS pseudo-class :focus
    • state="active" - Adds the CSS pseudo-class :active
    • state="focus-within" - Adds the CSS pseudo-class :focus-within
    • state="focus-visible" - Adds the CSS pseudo-class :focus-visible
  • minWidth - Adds a CSS media query @media (min-width:)
  • maxWidth - Adds a CSS media query @media (max-width:)
  • selector - Adds a custom selector to the end of the class name. For example selector="::after" will add ::after to the class rule.

Conversion to CSS / Using with divs

This bbcode is a direct translation into a CSS class rule and is intended to be used alongside Div [div]. As such, the following bbcode will translate simply over.

[class=foobar]
  background-color: skyblue;
  color: gold;
  // CSS properties
[/class]

[class name=foobar minWidth="900px" maxWidth="1400px"]
  // CSS properties
[/class]

[class name=foobar state=hover]
  // CSS properties
[/class]

[div class="foobar"]
  content
[/div]

<style>
  .foobar {
    background-color: skyblue;
    color: gold;
    // CSS properties
  }

  @media (min-width: 900px) and (max-width: 1400px) {
    .foobar {
      // CSS properties
    }
  }

  .foobar:hover {
    // CSS properties
  }
</style>

<div class="foobar">content</div>

Using with CSS Animations

Users are able to add CSS animations to the class. In the CSS rule for the animation-name or animation, The name of the animation must be prefixed with {post_id}. See Animation & Keyframe [animation][keyframe] for more info.

See also:

Code

Color

Comment [comment]

Adds a hidden comment not visible to users.

[comment]i am a hidden comment[/comment]

Div [div]

Provides an equivalent to the html <div> that users can style with either custom inline CSS styles or with custom CSS classes.

[div="style"]content[/div]
[div class="class names" style="style"]content[/div]

Options

  • style - The inline CSS to apply to the div. Is the default for single option.
  • class - Adds custom user defined class to the div. See Class [class] for more information. Similar to standard HTML, multiple classes can be applied to the div via a whitespace separated list.

As HTML

This is just a direct translation to html.

[div class="foobar" style="color: red;"]content[/div]

<div class="foobar" style="color: red;">content</div>

See also:

Font Awesome Icons [fa]

Provides the usage of Font Awesome icons in posts. See Font Awesome.

[fa]fa-solid fa-pen[/fa]
[fa style="style" fa-transform="power transforms"]fa-solid fa-pen[/fa]
[fa primary-color="" secondary-color="" primary-opacity="" secondary-opacity="" rotate-angle=""]fa-duotone fa-icon[/fa]

Options

  • content - standard FA icon names.
  • style - Custom CSS styling to be applied. If needed, CSS properties can be applied here. See FA Style Cheatsheet
  • fa-transform - Enables the usage of the FA Power Transforms. See FA Power Transforms.
  • primary-color - Applies the given color for Duotone icons
  • secondary-color - Applies the given color for Duotone icons
  • primary-opacity - Applies the given opacity to the primary color for Duotone icons
  • seconary-opacity - Applies the given opacity to the secondary color for Duotone icons
  • rotate-angle - Applies a custom rotation to the icon

Headers & Sub-Headers [h] [sh]

Provides header and sub headers (mapped to h1 and h2 respectively). This is primarily a compatibility bbcode for legacy code. it is recommended to use markdown instead.

[h]Header[/h]
[sh]Sub-header[/sh]

[h1]header level 1[/h1]
[h2]header level 2[/h2]
[h3]header level 3[/h3]
[h4]header level 4[/h4]
[h5]header level 5[/h5]
[h6]header level 6[/h6]

Line Break & No Line Break [br] [nobr]

Line breaks can be manually inserted via the [br][/br] tag. The natural line breaks can be ignored by wrapping a section in [nobr][/nobr].

[nobr]
Hello world![br][/br]I am on a new line.

But this sentence is not on its own line.
[/nobr]

Hello world!
I am on a new line. But this sentence is not on its own line.

Script [script]

  • Highlights
  • Justified Text
  • Blockquotes
  • Sub Script ⌨️
  • Super Script ⌨️
  • Google Font Library
  • Paragraph Indent
  • Bold, Italic, Underline, Strikethrough Ⓜ️
  • Color
  • Font Size
  • Left, Center, Right
  • Spoiler
  • Line Break
  • Inline Spoiler

Layout & Design

  • Dividers
  • Image Float
  • Fieldsets
  • Sides
  • Tabs
  • Accordions
  • Tables now using markdown tables
  • Center Block
  • Background
  • Border
  • Scroll Box
  • Anchors
  • Rows & Columns

Media & Embeds

  • Google Docs(PDF)
  • Height Restrict
  • Image
  • Challonge - Add as an iframe supported site in settings instead.

Aesthetics

  • Print
  • Text Message
  • Blocks
  • Progress Bar
  • Sticky Note
  • Mail
  • Newspaper
  • Checks
  • Font Awesome Icons
  • OOC

Clone this wiki locally