BBCode overview (default and custom ones)

[Selene310187]

The first part of the text is about what a BBCode is. Then I link to the list with the default BBCodes options of the site and in the last part I explain the custom BBCodes (align, gallery, youtube, etc.) and give examples.


What is BBCode?

From the main FAQ of the board:

BBCode is a special implementation of HTML, offering great formatting control on particular objects in a post. The use of BBCode is granted by the administrator, but it can also be disabled on a per post basis from the posting form. BBCode itself is similar in style to HTML, but tags are enclosed in square brackets [ and ] rather than < and >. For more information on BBCode see the guide which can be accessed from the posting page.

You can either write each code manually or mark the text in your post and click on the respective BBCode button in the posting button bar.

Please note that not every available BBCode is listed in the bar. From time to time, I will add new BBCodes to the bar but also remove others which are used very rarely on occasion. This ensures that the posting buttons bar looks less cluttered.



Default BBCodes

The list with the default BBCodes and their explanations can be found here.
(The spoiler BBCode is not default. The Simple Spoiler BBCode extension added the explanation to the list itself)



Custom BBCodes
(added by extensions or written by myself)

These are the BBCodes which you can find in the posting button bar on the right side of the "Normal" dropdown list (font size) in the posting editor.

Index of available custom BBCodes:
url2
InlineSpoiler
TextWidth
Hashtag
Non-breaking space ("nbsp")
Inline Code BBCode ("c")
"anchor" and "goto"
imgc - insert image with custom image dimension
hide content to guests
indent (paragraph)
hr (horizontal line)
floatl - float image to the left (and wrap the text around it)
floatr - float image to the right (and wrap the text around it)
box forces a line break after a paragraph that contains a floated image or other content that needs an additional line break like the gallery BBCodes
spoiler
align text
strikethrough ("s")
gallery - multiple images are shown in a two column layout; further explanation
image - is used to insert images from the (user) galleries
video link BBCodes ("youtube", "vimeo", "spotify")


url2
(not listed in the posting buttons bar)

Code: Select all

[url2=link]name of the link[/url2]

Opens a link in the same tab

> go back to Index



InlineSpoiler
(not listed in the posting buttons bar)

Code: Select all

[InlineSpoiler]your hidden text[/InlineSpoiler]

inline spoiler buttons with custom titles:

Code: Select all

[InlineSpoiler=Title of the spoiler]your hidden text[/InlineSpoiler]

The

your hidden text

button is displayed within the line. If you unhide the text, the hidden text can appear on the next line depending on the length of the hidden text. You can insert inline spoilers with custom titles like "Show hidden content" which is displayed as

Lorem ipsumdolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt...

.

> go back to Index




TextWidth
(not listed in the posting buttons bar)

Code: Select all

[TextWidth=number]your text[/TextWidth]

Limits the max width of a text in pixels.

Sample (text width of 500 pixels):

Code: Select all

[TextWidth=500]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/TextWidth]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Bonus tip:
Combine it with [align=justify][/align] to match the width of an image that is embedded with imgc:

Code: Select all

[TextWidth=500][align=justify]your text[/align][/TextWidth]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

> go back to Index



Hashtag
(not listed in the posting buttons bar)

Code: Select all

[hashtag]your tag[/hashtag]

The # is set automatically.
When a user clicks on a hashtag, the forum search will be executed listing all posts that match the hashtag.
Sample:
#Skyrim

> go back to Index


Non-breaking space
(not listed in the posting buttons bar)

Code: Select all

[nbsp]

It inserts a fixed space preventing an automatic line break in the wrong place. You can use it for example for a group of words, where its parts should stay in one line, or in combination with numbers.

> go back to Index



Inline Code BBCode

Code: Select all

[c]inline code[/c]

This is an inline code which is displayed within the line.

> go back to Index



Anchor and GoTo BBCodes
If you wrote a long post (like this one), you can make the navigation for your reader easier by putting a table of contents (or index) at the beginning of a post or a greater passage. In the table of contents, you can list all passages and put each item of the list inside a goto tag each. Then put the heading of the target passage inside the anchor tag. Last but not least, you connect the anchor with the goto tag by inserting the name of the target passage heading after the "[goto=" part.

Code: Select all

[goto=Target passage heading]table of contents item[/goto]

Code: Select all

[anchor]Target passage heading[/anchor]

> go back to Index



Imgc BBCode
(the c stands for custom image dimension)
Yes, you can finally set the max width (in pixels) of an embedded image (direct link) and open it in a lightbox like the other image BBCodes. The embedded image is responsive as well.

Code: Select all

[imgc=number]image URL[/imgc]

Sample (embed an image from Nexus Mods and set the max width to 1000 px):

Code: Select all

[imgc=1000]https://staticdelivery.nexusmods.com/images/1151/287627-1612995239.jpg[/imgc]

> go back to Index



Hide BBCode
(lock button in the posting buttons bar)

Hide certain content in a post to guests.

Code: Select all

[hide]hidden text[/hide]

Sample:
Hello, this is my greatest secret:

Exclusive content for logged in users.

What logged in users see:

What guests see:

> go back to Index



Indent BBCode

Code: Select all

[indent=number]indented text[/indent]

Sample (indent paragraph 200 pixels from the left):

Code: Select all

[indent=200]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/indent]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

> go back to Index



hr BBCode
(horizontal line)

Code: Select all

[hr]

> go back to Index



Float (floatl, floatr) and Box BBCodes

The float BBCodes float any image (including images that are uploaded as attachments) to the left or right and wrap the text around it. Put the paragraph, which contains the floated image*, inside a box BBCode tag to force a line break after this paragraph.
* or other content that needs an additional line break like the gallery BBCodes

Float left:

Code: Select all

[box][floatl]your image[/floatl]text[/box]

Sample image with sample text:

Code: Select all

[box][floatl][img]https://staticdelivery.nexusmods.com/images/1704/287627-1664559997.jpg[/img][/floatl]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/box]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

> go back to Index

Float right:

Code: Select all

[box][floatr]your image[/floatr]text[/box]

Sample image with sample text:

Code: Select all

[box][floatr][img]https://staticdelivery.nexusmods.com/images/1704/287627-1664559997.jpg[/img][/floatr]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/box]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

> go back to Index



Spoiler BBCode
(crossed-out eye button in the posting button bar)

Code: Select all

[spoiler title=Sample spoiler]Sample text[/spoiler]

Sample spoiler

Sample text

> go back to Index





Align BBCode
(for aligning text)

Code: Select all

[align=center]Centered text[/align]

Centered text

Further explanation

> go back to Index


Strikethrough text BBCode

Code: Select all

[s]strikethrough text[/s]

strikethrough text

> go back to Index


Gallery BBCodes
(not listed in the posting buttons bar)

Multiple images are shown in a two column layout; Further explanation

Code: Select all

[gallery]images[/gallery]

Code: Select all

[gallery2=center]images[/gallery2]

> go back to Index



Image BBCode
(not the img one; not listed in the posting buttons bar)
Use this BBCode to add an image from the gallery into your post.

Code: Select all

[image]image_id[/image]

Sample image:

Code: Select all

[image]23[/image]

> go back to Index



Video link BBCodes

Youtube, normal links (youtube.com):

Code: Select all

[youtube]videolink[/youtube]

> go back to Index


Youtube, short links (youtu.be):
(not listed in the posting buttons bar)

Code: Select all

[youtube_be]videolink[/youtube_be]

> go back to Index



Vimeo:
(not listed in the posting buttons bar)

Code: Select all

[vimeo]videolink[/vimeo]

> go back to Index


Spotify:
(not listed in the posting buttons bar)

Code: Select all

[spotify]videolink[/spotify]

> go back to Index

[Selene310187]

I added a strikethrough text BBCode

Code: Select all

[s]sample text[/s]

sample text

[Selene310187]

New BBCodes:

• hr creates a horizontal line
• indent indents a paragraph any number of pixels from the left
• floatl floats an image to the left and floatr floats an image to the right; the text is wrapped around the image (this BBcode is not listed in the posting buttons bar)
• box forces a line break after a paragraph that contains a floated image (this BBcode is not listed in the posting buttons bar)

You can find sample codes for each new BBCode in the first post (oldest one) of this thread (I listed them at the beginning of the Custom BBCodes section).

Furthermore, I removed the Spotify and Vimeo BBCodes from the posting buttons bar to tidy up the bar (some of the newly added BBCodes are not part of this bar as well to make the bar look less cluttered). Don't worry, the BBCodes in question can still be used by typing them.


As a side note, I adjusted the layout of the code boxes so that you don't need to scroll anymore when a line of code is too long.

[Selene310187]

I added the "hide" BBCode created by Alfredo Ramos (allows certain content inside a post to be hidden to guests). Go to hide BBCode sample.

On top, I wrote the imgc BBCode which lets you embed an image (direct link) with a customizable image dimension. So images which are embedded with this BBCode are not limited to the default max width of 400px!

Sample (embed an image from Nexus Mods and set the max width to 1000 px):

Code: Select all

[imgc=1000]https://staticdelivery.nexusmods.com/images/1151/287627-1612995239.jpg[/imgc]

[Selene310187]

I updated every post in this thread with the new "anchor" and "goto" BBCodes to make the navigation in long posts easier. An index with all available custom BBCodes has been added to the Custom BBCodes section for faster access.

[Selene310187]

I added an inline code BBCode ("c") that displays the code within a line. Go to Inline Code BBCode

[Altbert]

A nice new feature! I can already see use for the new story (stories) I'm writing!

[Selene310187]

I'm glad you like it .


I updated the main post adding a > go back to Index link to each custom BBCode subsection to make the navigation within this long post even more comfortable.

[Altbert]

When I'm going to publish the new story, I'm certainly going to use those new codes. Since my stories won't be as large as the ones Steve posts, I can join the various parts in one post and have a different thread for those. But first, the backstory.

[Selene310187]

Our newest custom BBCodes are hashtag and nbsp (non-breaking space)

Hashtag: It's popular social media feature to enable crosss-referencing of content (see Wikipedia). As soon as a user clicks on a hashtag in a post, the forum search will be executed which lists all posts matching the hashtag.
(And yes, the forum search does now work for guests as well .)

Non-breaking space: You can use this feature to prevent an automatic line break in the wrong place. I implemented it because I wanted that all parts of certain terms in the board index (like the term "The Elder Scrolls" or "The Witcher Series") stay in one line on smaller screens.

I applied the nbsp BBCode to this post by the way to demonstrate it . This is how it looks in the posting editor: (like the term "The[nbsp]Elder[nbsp]Scrolls"