Bb-code examples
BB Codes are how you format things on the forum.
For the absolute basics, you can get away with the toolbar on the post box. Bold, Italic, Underline,Strikethrough, etc. Though please note that there's a "Remove formatting" button on the far left. Use that when you've (say) applied a color or font family and want to stop doing so, or use the same icon at the bottom of the color picker. Do not attempt to pick the "default" text color in particular, as that doesn't work across themes!
Personally, I normally don't use any of those buttons, having toggled the far-right gear icon to go into "BB code" (plain text) mode, so I have to type all of my formatting codes. This is because I frequently paste in from Google Docs or Word and don't want formatting to be broken from those places, in addition to finding that the graphical editor breaks my BB code. A lot.
A basic listing of all BB Codes can be found in the Help interface, linked to at the bottom of every page in the forum. Or you can click here to go straight there. I'll be linking to specific tags there as we go along.
That said, it just shows a bunch of examples. There are things you can do that aren't explained well, if at all, there. Thus, this post where some useful but not obvious BB Code is documented for your benefit.
If you want to play with BB Codes without making a thread or conversation message then you can use the Editor Playground, also available from the sidebar of your preferences and account details. This also allows you to see exactly what some of the BB Codes do without the possibility of accidentally posting. It also has an option to show what the site sees when you paste text into the editor, which helps significantly if reporting issues with copy and paste!
Let's start with the ANCHOR tag! It's essentially a way to use some features of the A tag in HTML.
There are two forms:
They do not need to be used in that order, and you can make multiple links to the same anchor. They end up with
The Advanced BB codes button () has a helper for ANCHOR tag creation.
Warning: Be careful with your anchor naming as multiple posts can use the same anchor name and only one will work properly if they're on the same page. This can be especially important for story threads, where threadmarks containing anchors may end up on the same page in reader mode!
Why did I cover that first? So that I can use it to link to the rest!
ACCORDION/SLIDER/TABS
The ACCORDION, SLIDER, and TABS tags all work very similarly, creating multiple sets of information that can be displayed one at a time. They display things differently, but at their core they're used the same basic way.
The Advanced BB codes button () has helpers for ACCORDION, SLIDER, and TABS tag creation that will set up the basics for you.
Each content set gets a "slide", defined with SLIDE tags inside of the parent tags. Each slide can have nearly any content you want in them! These have optional headers (defaults are provided for ACCORDION and TABS if not provided) that can be specified in two different ways. The first is to use a SLIDE_HEADER tag before the SLIDE tag, the second is to provide it as a parameter to the SLIDE tag. For ACCORDION and SLIDER, you can also specify one of
For ACCORDION, you can also specify the
Thus, for headers and initial open page, we can specify the following for all three tags. TABS will ignore the
The opening tags for each allow for several options to be specified. Some are easiest to set with special keywords, others are assumed based on content.
These can also be combined by separating them with white space (
Note that SLIDER controls are included in the size. That's the left left/right arrows and dots underneath.
Lastly, there's one more feature for TABS. Unlike with the other two, you can link to other pages with the
We can combine all of this into examples. The TABS and SLIDER examples have no line breaks between them so that they align vertically.
Back to Tag List
COLOR
The COLOR tag is straightforward. Wrap the text you want in
BE WARNED! Not everyone uses the same theme you do, and not all colors show up well on all backgrounds! When in doubt, avoid using colors at all.
Why, you might ask, is this being brought up if it's so simple? Because this tag is also how you do "invisitext", by setting the value to
On SV, including invisitext will cause an eye icon to appear in the upper right corner of your post, so that it can be converted to Inline Spoilers or Quick Spoilers (they function identically on SV) for the benefit of those who can't highlight text to reveal it.
Back to Tag List
ENCADRE
The ENCADRE tag generates a floating box to the right of content, like the one that should be to the right of this text. They default to at most 20% of the width of the area they're in, though that can be changed. To use the tag you wrap your content in the tag, with an optional label and width. If you want both the label and the width then you separate them with whitespace
The Advanced BB codes button () has a helper for ENCADRE tag creation.
The floating box that the Encadre (and for that matter, similar BB Codes, such as the FLEFT and FRIGHT tags) creates does not always play nice with other formatting, so be cautious when using them! People with different screen widths may see very different things in particular, especially when they run into other elements.
The opening tag for ENCADRE supports a number of options.
You can combine them where they aren't obviously mutually exclusive. For example:
Back to Tag List
LIST
The LIST tag is used to make Bulleted or Numbered lists. It defaults to Bulleted, but if you specify it with the
What's less obvious is that lists can be multiple-lines and you can nest lists and get different bullet styles on each level. Well, for the first three levels, anyway. Set any sub-list to an
Back to Tag List
PLAIN
The PLAIN tag is very simple, incredibly useful, but frequently overlooked. It suppresses all tag parsing within it, similar to a non-rich CODE tag but without a code box (or the ICODE tag without the formatting around it). This means that you can use it to provide examples of what to enter to get effects (enter [B] and [/B] around your text to make it bold!), but also suppress parsing when you don't want parsing.
For example, Worm fanfics frequently have "PHO Segments", that include people @ing users. Some of those usernames exist on SV, and suddenly you've tagged someone on the forum because your fictional user tagged another fictional user. Wrap even just the @ in a PLAIN tag (
The same goes for things that look like website links in your posts that shouldn't be treated as real websites (
Less obviously, what if you want to link to something that normally auto-embeds, like YouTube, without embedding it? This admittedly requires a little more effort:
To explain that: The URL tag without the
In addition, PLAIN tags will suppress most Emoji parsing! So, for example, if you want to write "TL:DR", but keep getting "TL
R"? PLAIN tags are for you (
Back to Tag List
TIME
The TIME tag displays times in the viewing user's time zone (as configured in their preferences). If the time is close enough, it will show a "relative time" such as "1 minute ago", "in 3 minutes", "Today at <time>", "Later today at <time>", "Thursday at <time>". Like with all other site-generated date/time values (including on posts!), you can hover over the value to get the date/time based on your preferences.
The date, time, and time zone can be specified in multiple ways. These all specify the same date/time:
All four will generate the same output:
The easiest way to set the options for the TIME tag is to use the helper in the Advanced bb-codes dropdown.
The TIME tag will take just a date or time, either with a time zone as well, but does not likely do what you want in those cases. If you skip the time zone then UTC is assumed.
This is all useful for telling people when something will happen in their local time zone, but that isn't all that can be done. You can also specify that the output should be formatted in "countdown" or "countup" mode, with an optional limit on the number of nonzero time parts to display. These will, if before the date and time for countdown or after it for countup, show a live timer that updates:
As a static example, that might output (the real tags would count up/down in real time and have the appropriate "adjusted time" icon next to them):
Back to Tag List
For the absolute basics, you can get away with the toolbar on the post box. Bold, Italic, Underline,
Personally, I normally don't use any of those buttons, having toggled the far-right gear icon to go into "BB code" (plain text) mode, so I have to type all of my formatting codes. This is because I frequently paste in from Google Docs or Word and don't want formatting to be broken from those places, in addition to finding that the graphical editor breaks my BB code. A lot.
A basic listing of all BB Codes can be found in the Help interface, linked to at the bottom of every page in the forum. Or you can click here to go straight there. I'll be linking to specific tags there as we go along.
That said, it just shows a bunch of examples. There are things you can do that aren't explained well, if at all, there. Thus, this post where some useful but not obvious BB Code is documented for your benefit.
If you want to play with BB Codes without making a thread or conversation message then you can use the Editor Playground, also available from the sidebar of your preferences and account details. This also allows you to see exactly what some of the BB Codes do without the possibility of accidentally posting. It also has an option to show what the site sees when you paste text into the editor, which helps significantly if reporting issues with copy and paste!
Let's start with the ANCHOR tag! It's essentially a way to use some features of the A tag in HTML.
There are two forms:
- The first one is invisible and makes an anchor point to link to. The value you put inside of it is normalized a bit, in particular it won't be case-sensitive.
- The second one creates an actual link to the anchor point.
Code:
[ANCHOR]Name[/ANCHOR]
[ANCHOR=Name]Link Text[/ANCHOR]message-anchor- prepended to them as well, so you can't use that to link to other things on the page.The Advanced BB codes button () has a helper for ANCHOR tag creation.
Warning: Be careful with your anchor naming as multiple posts can use the same anchor name and only one will work properly if they're on the same page. This can be especially important for story threads, where threadmarks containing anchors may end up on the same page in reader mode!
Why did I cover that first? So that I can use it to link to the rest!
ACCORDION/SLIDER/TABS
The ACCORDION, SLIDER, and TABS tags all work very similarly, creating multiple sets of information that can be displayed one at a time. They display things differently, but at their core they're used the same basic way.
The Advanced BB codes button () has helpers for ACCORDION, SLIDER, and TABS tag creation that will set up the basics for you.
Each content set gets a "slide", defined with SLIDE tags inside of the parent tags. Each slide can have nearly any content you want in them! These have optional headers (defaults are provided for ACCORDION and TABS if not provided) that can be specified in two different ways. The first is to use a SLIDE_HEADER tag before the SLIDE tag, the second is to provide it as a parameter to the SLIDE tag. For ACCORDION and SLIDER, you can also specify one of
left, center, or right options on the SLIDE tag to position the header, and/or the open option to specify which page to show initially. ACCORDION will show everything collapsed by default, SLIDER and TABS will show the first page.For ACCORDION, you can also specify the
left, center, or right options on the opening tag to set the default alignments of the headers.Thus, for headers and initial open page, we can specify the following for all three tags. TABS will ignore the
center option.
Code:
[SLIDE_HEADER]Header 1[/SLIDE_HEADER]
[SLIDE]Content 1[/SLIDE]
[SLIDE title="Header 2"]Content 2[/SLIDE]
[SLIDE title="Header 3" align=center open= 1]Content 3, centered header, open by default[/SLIDE]
[SLIDE_HEADER]Header 4[/SLIDE_HEADER]
[SLIDE align="center"]Content 4 with centered header[/SLIDE]
[SLIDE title="Header 5" align="right"]Content 5 with right-aligned header[/SLIDE]The opening tags for each allow for several options to be specified. Some are easiest to set with special keywords, others are assumed based on content.
Code:
[ACCORDION width=250px] 250px wide
[SLIDER width=100%] 100% wide
[TABS height=250px] 250px tall (px is optional)
[ACCORDION block_align=bleft] Block aligned left
[SLIDER block_align=bcenter] Block aligned center
[TABS block_align=bright] Block aligned right
[ACCORDION block_align=fleft] Float left (May not place nicely on all screen widths, depending on surrounding content)
[SLIDER block_align=fright] Float right (May not place nicely on all screen widths, depending on surrounding content)
[ACCORDION title_align=left] Left-align titles by default (ACCORDION only)
[ACCORDION title_align=center] Center titles by default (ACCORDION only)
[ACCORDION title_align=right] Right-align titles by default (ACCORDION only)These can also be combined by separating them with white space (
). Some are mutually exclusive. If you use fleft or fright then width becomes max width only and everything shrinks to fit.
Code:
[ACCORDION width=250px height=250px title_align=center] 250x250 box, centered titles
[SLIDER width=50% block_align=fright] 50% max width, floating to the right
[TABS width=25% height=250px block_align=fleft] 25% max width, 250px height, floating to the leftNote that SLIDER controls are included in the size. That's the left left/right arrows and dots underneath.
Lastly, there's one more feature for TABS. Unlike with the other two, you can link to other pages with the
[tab=#]link text[/tab].
Code:
[TABS]
[SLIDE title="Header 1"]Content 1
[tab=2]Link to page 2[/tab][/SLIDE]
[SLIDE title="Header 2"]Content 2
[tab=1]Link to page 1[/tab][/SLIDE]
[/TABS]We can combine all of this into examples. The TABS and SLIDER examples have no line breaks between them so that they align vertically.
Code:
[ACCORDION width=75% block_align=bcenter]
[SLIDE_HEADER]Header 1[/SLIDE_HEADER]
[SLIDE]Content 1[/SLIDE]
[SLIDE title="Header 2"]Content 2[/SLIDE]
[SLIDE title="Header 3" align=center open=1]Content 3, centered header, open by default[/SLIDE]
[SLIDE_HEADER]Header 4[/SLIDE_HEADER]
[SLIDE align=center]Content 4 with centered header[/SLIDE]
[SLIDE title="Header 5" align=right]Content 5 with right-aligned header[/SLIDE]
[/ACCORDION]
[TABS width=50% height=100px block_align=fleft]
[SLIDE_HEADER]Header 1[/SLIDE_HEADER]
[SLIDE]Content 1
[tab=5]Link to 5[/tab] [tab=2]Link to 2[/tab][/SLIDE]
[SLIDE title="Header 2"]Content 2
[tab=1]Link to 1[/tab] [tab=3]Link to 3[/tab][/SLIDE]
[SLIDE title="Header 3" open=1]Content 3, open by default
[tab=2]Link to 2[/tab] [tab=4]Link to 4[/tab][/SLIDE]
[SLIDE_HEADER]Header 4[/SLIDE_HEADER]
[SLIDE]Content 4
[tab=3]Link to 3[/tab] [tab=5]Link to 5[/tab][/SLIDE]
[SLIDE title="Header 5"]Content 5
[tab=4]Link to 4[/tab] [tab=1]Link to 1[/tab][/SLIDE]
[/TABS][SLIDER width=50% block_align=bright]
[SLIDE_HEADER]Header 1[/SLIDE_HEADER]
[SLIDE]Content 1[/SLIDE]
[SLIDE title="Header 2"]Content 2[/SLIDE]
[SLIDE title="Header 3" align=center open=1]Content 3, centered header, open by default[/SLIDE]
[SLIDE_HEADER]Header 4[/SLIDE_HEADER]
[SLIDE align=center]Content 4 with centered header[/SLIDE]
[SLIDE title="Header 5" align=right]Content 5 with right-aligned header[/SLIDE]
[/SLIDER]- Header 1
- Header 2
- Header 4
- Header 5
Back to Tag List
COLOR
The COLOR tag is straightforward. Wrap the text you want in
[COLOR=value]text here[/COLOR] (sorry Brits, US spelling only), where value is a color value in one of three forms. A name (red, green, blue), a hex value(#FF0000, #00FF00, #0000FF), or a RGB value (rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)).BE WARNED! Not everyone uses the same theme you do, and not all colors show up well on all backgrounds! When in doubt, avoid using colors at all.
Why, you might ask, is this being brought up if it's so simple? Because this tag is also how you do "invisitext", by setting the value to
transparent. For example: This is invisitext, not visible by default!On SV, including invisitext will cause an eye icon to appear in the upper right corner of your post, so that it can be converted to Inline Spoilers or Quick Spoilers (they function identically on SV) for the benefit of those who can't highlight text to reveal it.
Back to Tag List
ENCADRE
The ENCADRE tag generates a floating box to the right of content, like the one that should be to the right of this text. They default to at most 20% of the width of the area they're in, though that can be changed. To use the tag you wrap your content in the tag, with an optional label and width. If you want both the label and the width then you separate them with whitespace
The Advanced BB codes button () has a helper for ENCADRE tag creation.
The floating box that the Encadre (and for that matter, similar BB Codes, such as the FLEFT and FRIGHT tags) creates does not always play nice with other formatting, so be cautious when using them! People with different screen widths may see very different things in particular, especially when they run into other elements.
The opening tag for ENCADRE supports a number of options.
Code:
[ENCADRE] This will make a default box, with the label "Encadre:" at 20% width and automatic height.
[ENCADRE title="Label"] This will make the box have the label "Label" - Note that a colon is not added automatically!
[ENCADRE width=50] This one makes an Encadre box that's allowed to be extra-wide (50% of the area it's in), though it will "shrink to fit" if you don't provide enough content for it!
[ENCADRE align=left] This aligns the label to the left.
[ENCADRE align=center] This aligns the label in the center.
[ENCADRE align=right] This aligns the label to the right.
[ENCADRE block_align=fleft] This makes the box float to the left instead of the right.
[ENCADRE block_align=bleft] This makes the box not float, and instead be a left-aligned box.
[ENCADRE block_align=bcenter] This makes the box not float, and instead be a center-aligned box.
[ENCADRE block_align=bright] This makes the box not float, and instead be a right-aligned box.You can combine them where they aren't obviously mutually exclusive. For example:
Code:
[ENCADRE width=75 block_align=bcenter title="Author Alert!" align=center]This is a center-aligned author alert box!
Text will not wrap around it.[/ENCADRE]Back to Tag List
LIST
The LIST tag is used to make Bulleted or Numbered lists. It defaults to Bulleted, but if you specify it with the
=1 option then it switches to numbered. You cannot choose the start number.What's less obvious is that lists can be multiple-lines and you can nest lists and get different bullet styles on each level. Well, for the first three levels, anyway. Set any sub-list to an
=1 list to get numbering on that level.- Level 1
- Level 2
- Level 3
- Level 4
- Level 3 Again
- Numbered
- Level 3
- Level 2
Code:
[LIST]
[*]Level 1
[LIST]
[*]Level 2
[LIST]
[*]Level 3
[LIST]
[*]Level 4
[/LIST]
[*]Level 3 Again
[LIST=1]
[*]Numbered
[/LIST]
[/LIST]
[/LIST]
[/LIST]Back to Tag List
PLAIN
The PLAIN tag is very simple, incredibly useful, but frequently overlooked. It suppresses all tag parsing within it, similar to a non-rich CODE tag but without a code box (or the ICODE tag without the formatting around it). This means that you can use it to provide examples of what to enter to get effects (enter [B] and [/B] around your text to make it bold!), but also suppress parsing when you don't want parsing.
For example, Worm fanfics frequently have "PHO Segments", that include people @ing users. Some of those usernames exist on SV, and suddenly you've tagged someone on the forum because your fictional user tagged another fictional user. Wrap even just the @ in a PLAIN tag (
[PLAIN]@[/PLAIN]CmptrWz) and that won't happen anymore! You can also wrap the entire "mention" in a PLAIN tag, of course ([PLAIN]@CmptrWz[/PLAIN]).The same goes for things that look like website links in your posts that shouldn't be treated as real websites (
[PLAIN]https://www.fake.website[/PLAIN] -> https://www.fake.website), or just otherwise ensure that the link you're providing can't be clicked on.Less obviously, what if you want to link to something that normally auto-embeds, like YouTube, without embedding it? This admittedly requires a little more effort:
Code:
[URL=https://some.domain/with/content][PLAIN]https://some.domain/with/content[/PLAIN][/URL]=someurl takes the URL from its contents, but the contents are still parsed for BB Code. To suppress the BB Code (and the embed) we wrap the contents in the [PLAIN] tags. But now it isn't a valid URL! So we have to specify the =someurl component as well, so that the PLAIN tags aren't attempted to be included in the target URL.In addition, PLAIN tags will suppress most Emoji parsing! So, for example, if you want to write "TL:DR", but keep getting "TL
R"? PLAIN tags are for you ([PLAIN]TL:DR[/PLAIN])! They also somewhat work on Unicode-defined Emojis, such as ♥, to suppress the forum's "replace with an image" dance (As seen here: ♥). That said, if you're expecting Unicode emojis to be able to be colored or similar by wrapping the [PLAIN]♥[/PLAIN] in COLOR tags or similar, be aware that mobile devices in particular are likely to be using a font set that has the Unicode Emojis defined as color images already, so your attempt at coloring the basic Unicode Emoji won't work.Back to Tag List
TIME
The TIME tag displays times in the viewing user's time zone (as configured in their preferences). If the time is close enough, it will show a "relative time" such as "1 minute ago", "in 3 minutes", "Today at <time>", "Later today at <time>", "Thursday at <time>". Like with all other site-generated date/time values (including on posts!), you can hover over the value to get the date/time based on your preferences.
The date, time, and time zone can be specified in multiple ways. These all specify the same date/time:
Code:
[TIME]2021-01-01 12:00:00 America/New_York[/TIME]
[TIME]2021-01-01 12:00:00-0500[/TIME]
[TIME]2021-01-01T12:00:00 America/New_York[/TIME]
[TIME]2021-01-01T12:00:00-0500[/TIME]The easiest way to set the options for the TIME tag is to use the helper in the Advanced bb-codes dropdown.
The TIME tag will take just a date or time, either with a time zone as well, but does not likely do what you want in those cases. If you skip the time zone then UTC is assumed.
This is all useful for telling people when something will happen in their local time zone, but that isn't all that can be done. You can also specify that the output should be formatted in "countdown" or "countup" mode, with an optional limit on the number of nonzero time parts to display. These will, if before the date and time for countdown or after it for countup, show a live timer that updates:
Code:
[TIME format="countdown"]2021-02-07 17:31:46 America/New_York[/TIME]
[TIME format="countup"]2021-02-07 11:31:46 America/New_York[/TIME]
[TIME format="countdown" parts="1"]2021-02-07 17:31:46 America/New_York[/TIME]
[TIME format="countup" parts="2"]2021-02-07 11:31:46 America/New_York[/TIME]Once the time has come for countdown or before the time has come for countup the output will be the same as if you hadn't included the countdown or countup formatting.
Back to Tag List
Last edited: