BBCode Guide

Here you will find any important info about the game and the forum!

Moderator: Game Administrators

Locked
User avatar
LostKnight
Posts: 6399
Joined: Sat Sep 09, 2017 8:02 pm
Location: Rockhiem nord i Steinhus nær Kedington

BBCode Guide

Post by LostKnight »

This is a highly edited version of the BBCode Guide directly from the phpBB site since outside links are not allowed here.

Edited because this is a "post" not an html page at the site

I put it here in the hope and Admin or GM will move everything below the dotted line to "General Information" - I can't it is locked. Then delete this post.
...............................................................................................................

What is BBCode?
BBCode is a special implementation of HTML. Whether you can actually use BBCode in your posts on the forum is determined by the administrator. In addition you can disable BBCode on a per post basis via the posting forum. BBCode itself is similar in style to HTML, tags are enclosed in square brackets [ and ] rather than < and > and it offers greater control over what and how something is displayed. Depending on the template you are using you may find adding BBCode to your posts is made much easier through a clickable interface above the message area on the posting form. Even with this you may find the following guide useful.

The "clickable interface" referred to above is the blue bar above the text box when writing a post.

→ The BBCode Bar: Show
Menu.jpg
Menu.jpg (11.01 KiB) Viewed 4613 times

Since we are here, let's talk about the "Spoiler", seen above hiding the image of the BBCode Menu Bar. The Blue Menu Bar: Spoiler button has an OOPS! - it does not include the "=" sign that is not an option, it must be used.

Code: Select all

[spoiler][/spoiler]
so add it

Code: Select all

[spoiler=][/spoiler]
See:
: Show
by itself just shows ":Show" and ":Hide" - then something hidden from view.

And now if you add quote marks you can add descriptive text:

Code: Select all

[spoiler="Do NOT peak!"]by itself just shows ":Show" and ":Hide" - then something hidden from view.[/spoiler]

Do NOT peak!: Show
HEY I said no peaking ... I'm taking a shower!


Text Formatting

How to create bold, italic and underlined text
BBCode includes tags to allow you to quickly change the basic style of your text. This is achieved in the following ways:

To make a piece of text bold enclose it in

Code: Select all

[b][/b]

Code: Select all

[b]Hello[/b]
Or highlight the text and tap the B on the Menu Bar and hello will become Hello


To italicize text use

Code: Select all

This is [i]Great![/i]
or highlight the text and tap the I and it becomes: This is Great!


For underlining use

Code: Select all

[u][/u]

Code: Select all

[u]Good Morning[/u]
or highlight the text and tap the U and it becomes Good Morning

Doesn't take a rocket scientist to figure out "bold-italic-underlined text" would be:

Code: Select all

[b][i][u]bold-italic-underlined text[/u][/i][/b]
bold-italic-underlined text by highlighting text and hitting: B I U


How to change the text colour or size

To alter the colour or size of your text the following tags can be used. Keep in mind that how the output appears will depend on the viewers browser and system:

Changing the colour of text is achieved by wrapping it in:

Code: Select all

[color=][/color]
You can specify either a recognized colour name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, e.g. #FFFFFF, #000000. For example, to create red text you could use:

Code: Select all

[color=red]Hello![/color]

[color=#FF0000]Hello![/color]
Both will output Hello!

OK Too confusing - use the Tear Drop just to the left or [Normal] on the Menu Bar for a little popup colour picker. Highlight the test you want to add colour to and pick one or two or three


Changing the text size is achieved in a similar way using:

Code: Select all

[size=][/size]
This tag is dependent on the template the user has selected but the recommended format is a numerical value representing the text size in percent, starting at 20 (very small) through to 200 (very large) by default.

Forgotten Tales only has 3 size options: from the Menu Bar [Normal] gives tiny, small, that do not work, Normal, Large (=150) and Huge (=200)

NORMAL <<-- nothing need doing ... it is after all the normal text.

Code: Select all

[size=150]Large[/size]
will be Larege

Code: Select all

[size=200]Huge![/size]
will be Huge!

Can we combine formatting tags?
Yes, of course you can, I mentioned that above but another to get someones attention you may write:

Code: Select all

[size=200][color=red][b]LOOK AT ME![/b][/color][/size]
this would output LOOK AT ME!

We don’t recommend you output lots of text that looks like this though! Remember it is up to you, the poster, to ensure tags are closed correctly. For example the following is incorrect:

Code: Select all

[b][u]This is wrong[/b][/u]
Incorrect because they do not follow the proper order for coding.
both of these are correct:

Code: Select all

[b][u][/u][/b]
[u][b][/b][/u]
and give the same results.

Quoting and outputting fixed-width text

Quoting text in replies
There are two ways you can quote text, with a reference or without.

When you utilise the Quote function, to reply to a post on the board you should notice that the post text is added to the message window enclosed in a

Code: Select all

[quote=""][/quote]
block. This method allows you to quote with a reference to a person or whatever else you choose to put! For example to quote a piece of text Mr. Blobby wrote you would enter:

Code: Select all

[quote="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]
The resulting output will automatically add "Mr. Blobby wrote:" before the actual text. Remember you must include the quotation marks "" around the name you are quoting, they are not optional.

The second method allows you to blindly quote something. To utilise this enclose the text in

Code: Select all

[quote][/quote]
tags. When you view the message it will simply show the text within a quotation block.
Are you there?
You can also do something like this:

Code: Select all

[quote][b]LK was know to have written:[/b]

My forgetter is getting better.[/quote]
LK was know to have written:

My forgetter is getting better.

Outputting code or fixed width data

If you want to output a piece of code or in fact anything that requires a fixed width, e.g. Courier type font you should enclose the text in:

Code: Select all

[code ]without the spaces between the "e" and closing ][/code ]

Code: Select all

echo "This is some code";
or of course you can use the "code" button on the the Blue Menu Bar: </> after highlighting the text

All formatting used within code tags is retained when you later view it.

This one I love because I do 95% of my personal stuff as text files. For example:
Normal text:
This has three spaces between the words.
Quoted Text:
This has three spaces between the words.
and in code blocks:

Code: Select all

This   has   three   spaces   between   the   words.
Use [ code ] blocks when formatting is "important". Be aware that long lines do NOT word wrap:

Code: Select all

The quick brown fox jumped over the lazy brown fox. Now is the time for all good men to come to the aid of their country.



Generating lists

Creating an Unordered list
BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. An unordered list outputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use:

Code: Select all

[list][/list]
and define each item within the list using [*].

For example to list your favourite colours you could use:

Code: Select all

[list]
[*]Red
[*]Blue
[*]Yellow
[/list]
This would generate the following list:
  • Red
  • Blue
  • Yellow

Creating an Ordered list
The second type of list, an ordered list, gives you control over what is output before each item. To create an ordered list you use:

Code: Select all

[list=1][/list]
to create a numbered list or alternatively:

Code: Select all

[list=a][/list]
for an alphabetical list. As with the unordered list, items are specified using [*]. For example:

Code: Select all

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]
will generate the following:
  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes
Whereas for an alphabetical list you would use:

Code: Select all

[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
giving you
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
there is also alpfa in caps: "A" or roman numerals "i" or "I"

Code: Select all

[list=A]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
giving
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer

Code: Select all

[list=i]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[*]The fourth possible answer
[*]The fifth possible answer
[/list]
giving
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
  4. The fourth possible answer
  5. The fifth possible answer

Code: Select all

[list=I]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[*]The fourth possible answer
[*]The fifth possible answer
[/list]
giving
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
  4. The fourth possible answer
  5. The fifth possible answer
And lastly if you want to get fancy, you can nest list in lists in lists

Code: Select all

[list=1]
[*]Swordsman
[list=i][*]use swords
[*]wear armour
[*]uses HP Potions
[list][*]for PvP
[list=A][*]throwing knives[/list][/list][/list]
[*]Mages
[list=i][*]use wands
[*]wears robes
[*]uses Mana Potions
[list]for PvP
[list=A]nothing - has 5 spells[/list][/list][/list]
[/list]
to get:
  1. Swordsman
    1. use swords
    2. wear armour
    3. uses HP Potions
      • for PvP
        1. throwing knives
  2. Mages
    1. use wands
    2. wears robes
    3. uses Mana Potions
      • for PvP
        1. nothing - has 5 spells
Links .... The Forgotten Tales forum do not allow outside links, only internal links. Like to the thread that got this started: viewtopic.php?f=4&t=17113 Notice how you do not see the entire link, just the internal link, the entire link looks like this:

Code: Select all

https://forum.dmgamestudio.com/viewtopic.php?f=4&t=17113
But it looks messy, undone. Let's give it a description with Blue Menu Bar URL linker button, the three little chain links to the left of the teardrop, and we get:

Code: Select all

[url][/url]
OH OH ... missing the "=" that is not an option > add it

Code: Select all

[url=][/url]
Now all you need is the "internal" part of the link above: viewtopic.php?f=4&t=17113 and some discriptive text. Normally the name of the thread:

Code: Select all

[url=viewtopic.php?f=4&t=17113]LostKnight help![/url]

LostKnight help!

I have yet to play with font= and table= td tr

But align= is a good one. Since the default is left - not needed but center and right work nice

Code: Select all

[align=center]I am centered[/align]
[align=right]I am Right[/align]
I am centered
I am Right
Hmm does that make me not centered and wrong?
I was always AFK!
I was LK, A Friendly Knight.
User avatar
ryaca_
Posts: 1276
Joined: Sun Feb 10, 2019 4:32 am

Re: BBCode Guide

Post by ryaca_ »

Excellent post LostKnight!

Great contribution!:ghost:
Locked