Post: **Ultimate BBcoding Thread!**
Options
07-18-2010, 06:39 PM
#1
-Smithy-
Call Me Sherminator !
So here is another thread to help you guys with BBcoding. This is helpful as it makes you more independent on coding and will increase you knowledge on forums and other website coding material.
[multipage=Beginners Guide]
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 form. BBCode itself is similar in style to HTML, tags are enclosed in square brackets [ and ] rather than triangular headed brackets < 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 above the message area on the posting description form. Hopefully even with the extra help on modern forums and websites you will still find this informative thread usefull.
Creating bold, italic and underlined text:
Originally posted by another user
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 [b] [/b], e.g.
[b]NextGenUpdate[/b]
will become NextGenUpdate
For underlining use [u][/u], for example:
[u]Good Morning[/u]
becomes Good Morning
To italicise text use [i][/i], e.g.
What an awesome [i]Thread![/i]
would give 'What an awesome Thread!'
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 [b] [/b], e.g.
[b]NextGenUpdate[/b]
will become NextGenUpdate
For underlining use [u][/u], for example:
[u]Good Morning[/u]
becomes Good Morning
To italicise text use [i][/i], e.g.
What an awesome [i]Thread![/i]
would give 'What an awesome Thread!'
How to change the text colour or size:
Originally posted by another user
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 [color=][/color]. You can specify either a recognised 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:
[color="red"]Hello![/color]
or
[color=#FF0000]Hello![/color]
They should both turn out to be 'Hello!'
Both will output Hello!
Changing the text size is achieved in a similar way using [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. For example:
[size="2"]SMALL [/size]
will generally be SMALL
whereas:
[size=7]MASSIVE![/size]
will be MASSIVE!
Changing the colour of text is achieved by wrapping it in [color=][/color]. You can specify either a recognised 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:
[color="red"]Hello![/color]
or
[color=#FF0000]Hello![/color]
They should both turn out to be 'Hello!'
Both will output Hello!
Changing the text size is achieved in a similar way using [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. For example:
[size="2"]SMALL [/size]
will generally be SMALL
whereas:
[size=7]MASSIVE![/size]
will be MASSIVE!
Quoting text in replies:
Originally posted by another user
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
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:
[quote="-Smithy-"]The text -Smithy- wrote would go here[/quote]
The resulting output will automatically add "-Smithy- 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
tags. When you view the message it will simply show the text within a quotation block.
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
Originally posted by another user
[quote="-Smithy-"]The text -Smithy- wrote would go here[/quote]
The resulting output will automatically add "-Smithy- 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
Originally posted by another user
Outputting code or fixed width data
Originally posted by another user
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
All formatting used within [code][/code] tags is retained when you later view it. PHP syntax highlighting can be enabled using [code = php][/code][noparse] and is recommended when posting PHP code samples as it improves readability.[/quote]
[B][U][COLOR="red"]Creating an Unordered list[/COLOR][/U][/B]
[quote]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 [noparse][list][/list] and define each item within the list using [*][noparse]. For example to list your favourite colours you could use:
[noparse][list]
[*]Red
[*]Blue
[*]Yellow
[/list]
This would generate the following list:
[ / code ] tags, e.g.
[noparse][code]echo "This is some code";
[/noparse]All formatting used within [code][/code] tags is retained when you later view it. PHP syntax highlighting can be enabled using [code = php][/code][noparse] and is recommended when posting PHP code samples as it improves readability.[/quote]
[B][U][COLOR="red"]Creating an Unordered list[/COLOR][/U][/B]
[quote]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 [noparse][list][/list] and define each item within the list using [*][noparse]. For example to list your favourite colours you could use:
[noparse][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 [list=1][/list] to create a numbered list or alternatively [list=a][/list] for an alphabetical list. As with the unordered list, items are specified using [*]. For example:
[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]
This will generate the following:
- Go to the shops
- Buy a new computer
- Swear at computer when it crashes
- Whereas for an alphabetical list you would use:
[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
This would give:
- The first possible answer
- The second possible answer
- The third possible answer
Linking to another site
Originally posted by another userphpBB BBCode supports a number of ways of creating URIs (Uniform Resource Indicators) better known as URLs.
The first of these uses the [url=][/url] tag, whatever you type after the = sign will cause the contents of that tag to act as a URL. For example to link to phpBB.com you could use:
[url=https://www.nextgenupdate.com/] Visit NGU![/url]
This would generate the following link, You must login or register to view this content.! Please notice that the link opens in the same window or a new window depending on the users browser preferences.
If you want the URL itself displayed as the link you can do this by simply using:
[url=https://www.nextgenupdate.com/forums/]NextGenUpdate - Glitches, Cheats, Reviews, Discussions for the Latest and Hottest Video Games[/url]
This would generate the following link, You must login or register to view this content.
Additionally, phpBB features something called Magic Links, this will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading [url]https://.[/url] For example typing You must login or register to view this content. into your message will automatically lead to You must login or register to view this content. being output when you view the message.
The same thing applies equally to e-mail addresses, you can either specify an address explicitly for example:
[email][email protected][/email]
which will output [email][email protected][/email] or you can just type [email][email protected][/email] into your message and it will be automatically converted when you view.
As with all the BBCode tags you can wrap URLs around any of the other tags such as [img][/img] (see next entry), [b] [/b], etc. As with the formatting tags it is up to you to ensure the correct open and close order is following, for example:
Adding an image to a post
phpBB BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are: many users do not appreciate lots of images being shown in posts and secondly the image you display must already be available on the internet (it cannot exist only on your computer for example, unless you run a webserver!). To display an image you must surround the URL pointing to the image with [img][/img] tags. For example:
[img][url]https://www.google.com/intl/en_ALL/images/logo.gif[/url][/img]
As noted in the URL section above you can wrap an image in a [url][/url] tag if you wish, e.g.
[url=https://www.google.com/][/url][img]https://www.google.com/intl/en_ALL/images/logo.gif [/img ][/url]
would generate:
You must login or register to view this content.
If not taken care with, it may lead your post to be deleted, so please take care, and be sensible.
[multipage=Slightly advanced BBcoding]
Okay. This part of the thread has a bit more info and may be a bit more complex to some users.. I have got some of this info from thecodingforum.com and taken screen shots. This was simply because putting spaces between every character may confuse people. And I cannot not put spaces between them otherwise the thread will follow the bbcode's demand. I thought that taking screen shots may make it even easier for some people to learn !
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
Thank you for reading my thread ! I hope it helped you !=D
The following 8 users say thank you to -Smithy- for this useful post:
.
The following 2 users say thank you to AgentJon for this useful post:
Haa.
The following user thanked -Smithy- for this useful post:
07-19-2010, 05:46 PM
#8
DEREKTROTTER
You're Goddamn Right
:tits:
Copyright © 2026, NextGenUpdate.
All Rights Reserved.
