Help
How to use BBCode in your Listings.
Overview
BBCode stands for Bulletin Board Code. BBCode is a very simple markup language used to format text in many forums. You may have used it previously.
On our website however, we use it to allow our customers to format text within their Listings, allowing them to customise the look.
Tags
BBCode consists of many
Tags, used to state what you want the text to look like.
A Tag must have:
- An opening tag and a closing tag
- The opening tag indicates where you want the text effect to start.
- The closing tag indicates where you want the text effect to finish.
Syntax - How to "write" BBCode
As mentioned above, the
opening tag must be used to indicate the beginning of the text effect. The opening tag always takes the following form:
[tagname]
Example, a bold tag would look like this: [b]
Notice the two square brackets, these together with the tag name indicate an
opening tag is present.
Closing tags are similar to opening tags except closing tags always use a forward slash / to indicate that it is indeed a closing tag. They take the following form:
[/tagname]
Example, to end our bold tag we would write: [/b]
Example, a full bold tag would look like this:
1. [b]the text you want to appear bold goes here, between the opening tag and the closing tag[/b]
2. [b]this text would appear bold[/b]. This text which is outside the tags would not appear bold.
Tags that require parameters
Some tags require parameters. If you wanted to change the colour of some text, you would need to indicate a colour.
Some examples:
[color="#123456"]text here[/color]
[color="red"]red text here[/color]
[color="rgb(70, 140, 255)"]red, green, blue values[/color]
or perhaps you wanted to change the size of some text?
[size="30px"]this text will appear 30 pixels in size.[/size]
Parameters must always be indicated by an equals sign and be enclosed in double quotes as shown above.
"Nested" tags - Tags within tags
Let's say you wanted to make some text
bold, underlined and blue. You would need 3 tags for this, as shown in the following example:
[color="blue"][b][u]this text is blue, bold and underlined.[/u][/b][/color]
Result: this text is blue, bold and underlined.
Important Note: Tags must be closed in the same order as they are opened.
In the above example notice how the [color] tag is opened on the outside of the text and the other tags, and closed on the outside.
Below are some examples of correct ways to declare tags and some incorrect ways:
Correct ways:
1. [size="24px"]fairly [b]large[/b] text[/size]
Result:
fairly large text
2. [color="#123ff1"]i am blue and [i]italic[/i] text[/color]
Result:
i am blue and italic text
3. [link="http://google.com"]i am a hyperlink[/link]. Some normal text.
Result:
i am a hyperlink. Some normal text.
Incorrect ways:
1. [size="24px"]fairly [b]large text[/size][/b]
Notice the bad order of the tags, this would create invalid markup.
2. [i][color="#123ff1"]i am blue and [i]italic[/i] text[/color]
Where is the closing tag for the first [i] tag?
This would make the entire text from that point onward italic.
A note on case sensitivity.
The BBCode we use on our is not case sensitive however you cannot use a mix.
For example:
1. [color="red"]red text[/COLOR] - this will work.
2. [COloR="red"]red text[/CoLoR] - this will not work.
Practice
There is a
practice page available to use if you wish to practice using BBCode.
There is also a complete reference on the practice page of all the tags you can use to manipulate text on our website.
Enjoy.