Useful BBCode

There is quite a bit of useful formatting code that many people miss. I'm putting these here for an easier reference rather than always digging through the codex (which is nice but has a lot of fluff to explian things.

---

BBCode Formatting

Font Editing

Bold

Bold

 [b]Bold[/b] 

Italics

Italics

 [i]Italics[/i] 

Underline

Underline

 [u]Underline[/u] 

Strikethrough

strikethrough

 [s]strikethrough[/s] 

SuperScript

This is ^superscript

 This is [sup]superscript[/sup] 

SubScript

This is _Subscript

 This is [sub]Subscript[/sub] 

Small Text

This is small text

 This is [small]small[/small] text 

Redacted

███████

[redacted:#] where #=number of blocks/characters to show 

NoParse

use this to [b]prevent[/b] bbcode from being used

[noparse]use this to [b]prevent[/b] bbcode from being used [/noparse]

Tooltips

Add a tooltip to this text for explaining things without needing a full article.

Add a tooltip to [tooltip:SAMPLETEXT] this text[/tooltip] for explaining things
without needing a full article. 

Dropcap

This is how you get the nifty big letter at the beginning of a page/paragraph.

[dc]T[/dc]this... 

Checkboxes

Checkbox, empty
Checkbox, checked
Checkbox, right chevron
Checkbox, left chevron
Checkbox, times “x”
Checkbox, plus/buff
Checkbox, minus/debuff

[] Checkbox, empty [br]
[c] Checkbox, checked [br]
[r] Checkbox, right chevron [br]
[l] Checkbox, left chevron [br]
[x] Checkbox, times “x” [br]
[+] Checkbox, plus/buff [br]
[-] Checkbox, minus/debuff [br]

Containers

Code

put this in a box

 [code]put this in a box[/code] 

Block of Noparsed Code

Note: You can't nest Noparse tags so it makes it difficult to show this. All the blocks of code on this page use this. I've written it out here without the brackets so it will show properly and put it in an aloud box.

code noparse BLOCK OF CODE /noparse /code

Quotes

quote

— author

 [quote]quote|author[/quote] 

Spoilers

label

text

 [spoiler]text|label[/spoiler] 

Aloud

text

 [aloud]text[/aloud] 

Formatting

Paragraphs

Paragrah code preserves the linebreaks
of what you have typed.

[p]Paragrah code
preserves the linebreaks


of what you have typed.[/p]

Alignment

[left]left aligned[/left] 
[center]center aligned[/center] 
[right]right aligned[/right] 
[justify]justified text[/justify] 

Indents

indented paragraph is good for when you have a lot of text. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur aliquet quam id dui posuere blandit. Quis que velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit.

[in]indented paragraph...[/in]

Right to Left Reading

For languages that read Right to Left.

[rtl]For languages that read Right to Left.[/rtl] 

BBCode Table

Test	Test	Test	Test
Proin eget tortor risus.	Vivamus suscipit tortor eget felis porttitor volutpat.	Quisque velit nisi, pretium ut lacinia in, elementum id enim.	Vivamus suscipit tortor eget felis porttitor volutpat.

[table]
 [tr]
 [th:20]Test[/th]
 [th:40]Test[/th]
 [th:20]Test[/th]
 [th:20]Test[/th]
 [/tr]
 [tr]
 [td]Proin eget tortor risus.[/td]
 [td]Vivamus suscipit tortor eget felis porttitor volutpat.[/td]
 [td]Quisque velit nisi, pretium ut lacinia in, elementum id enim.[/td]
 [td]Vivamus suscipit tortor eget felis porttitor volutpat.[/td]
 [/tr]
[/table]

Columns

Two Columns

COLUMN-1-CONTENT

COLUMN-2-CONTENT

[row]
[col] COLUMN-1-CONTENT [/col]
[col] COLUMN-2-CONTENT [/col]
[/row] 

Three Columns

COLUMN-1-CONTENT

COLUMN-2-CONTENT

COLUMN-3-CONTENT

[row]
[col3] COLUMN-1-CONTENT [/col3]
[col3] COLUMN-2-CONTENT [/col3]
[col3] COLUMN-3-CONTENT [/col3]
[/row]

Key/Value Pairs

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum in turpis eu augue efficitur auctor.

 --Lorem ipsum::Lorem ipsum dolor sit amet, consectetur adipiscing elit. [br]Vestibulum in turpis eu augue efficitur auctor.-- 

Note: This must be all on the same line of code or it will break. To add multiple lines use the [br] code within the same line.

Ordered Lists

1. Ordered List
2. ITEM2
3. ITEM3

[ol]
[li]Ordered List[/li]
[li]ITEM2[/li]
[li]ITEM3[/li]
[/ol] 

Unordered List

• Unordered List
• ITEM2
• ITEM3

[ul]
[li]Unordered List[/li]
[li]ITEM2[/li]
[li]ITEM3[/li]
[/ul]

---

BBCode Commands

Anchors

Headers with Anchors

 [h1|name]Header[/h1] 

Non-Header Anchors

 [anchor|name] 

Linking to Anchors

 [url:#anchor]name[/url]

Note: linking to [url:#top] will take it to the top of the page without need of an anchor.

Table of Contents

World TOC

 [toc] 

Article TOC

 [articletoc] - uses headers 

Tag Linking

 [tagged:TAG|TYPE|TITLE] 

Tag: your tag
Type: block or list
Title: Empty will use tag; text will make a header; none will hide header

Embedding

URLs

 [url:URLHERE]text[/url] OR [url:URLHERE|tab]text[/url] to open in new tab 

Images

Full Guide To Images - Find the imbed codes in your Images & Files area and going into the Advanced Edit.

 [img:IMGNUMBER] [imgblock:IMGNUMBER] 
[img:(number)|alignment (left,right,center)|width in pixels|nolink] - MUST be in this order or will not work!

Current World Date

Go to your Dashboard. In the left sidebar go to World Settings/Configure. On the right you'll see World Widgets with the code for your world's current date. NOTE: This only appears if you have filled out your current date/time for your world.

Spotify

 [spotify:URICODE] Example: [spotify:spotify:track:1513oAcfRGXKvncH3IPEmi] 

YouTube

 [youtube:SHAREURL] Example: [youtube:https://youtu.be/XjOXGvLMzyI] 

SoundCloud

 [soundcloud:SHAREURL] Example: [soundcloud:https://soundcloud.com/ehrling/ehrling-typhoon] 

Libsyn Podcast

 [libsyn:NUMBER] 

Bandcamp

Find the Track Number by clicking "Share/Embed", then "Embed This Track". Click any format to get to the customize screen. The Wordpress code makes it easy to find the track number.

 [bandcamp:TRACKNUMBER] Example: [bandcamp:565886980] 

Kuula

Guide to embedding 360 images

 [kuula:CODE] 

Discord Widget

Get the number ID from the widget setting from the server settings.

 [discord:WIDGETNUMBER] 

Creative Commons Licence

Please check the Creative Commons Foundation Website.

[licence:cc-by]
[licence:cc-by-sa]
[licence:cc-by-nd]
[licence:cc-by-nc]
[licence:cc-by-nc-sa]
[licence:cc-by-nc-nd]

User Tags

You need to use the person's username, not their listed name.

 [user:NAME] - Listed Name link
[usercard:NAME] - Makes a block with their profile image and links. See below. 

Eternal Sage Lethann

Lethann Aeda

                   

by Lethann Aeda

Costuming Challenge Article: Divine Vestments

Grandmaster Only

Containers

Containers expand and seperate out the contained text.

Example of a Container

[container:box-green]Example of a Container[/container] 

Sections

Sections are inline and can change text in the middle of other text. Example of a Section

[section:box-green]Example of a Section[/section] 

Sample CSS for examples:

.box-green {
 background: #7cfc0047;
 border: 1px solid #7cfc00;
} 

Colored Text

text
This is blue
This is blue with transparency!

 [color:red]text[/color] 
[color:#0000FF]This is blue[/color] 
[color:#0000FF90]This is blue with transparency![/color]

Icons

Use icons from RPGAwesome and FontAwesome
RPG Awesome:



FontAwesome

 RPG Awesome:
[color:#f1f1f1][section:ra ra-3x ra-key] [/section][/color]
[color:#387a46][section:ra ra-3x ra-dinosaur] [/section][/color]
[color:#bd4d1b][section:ra ra-3x ra-wyvern] [/section][/color] 
FontAwesome
[color:#7d4cae][section:far fa-2x fa-compass] [/section][/color]
[color:#233d94][section:far fa-2x fa-book-dead] [/section][/color]
[color:#5b5c4a][section:far fa-2x fa-bone] [/section][/color]

• WA Codex - BBCode Commands
• WA Codex - BBCode Formatting