OK, here is an idea I've had for a while and finally decided to make real. This thread aims to comprehensively explain how to use the various BBCode tags available with the SMF (Simple Machines Forum) software.Contents
-What is BBCode?
-Common BBCode tags
-Uncommon BBCode tags
-Image linking to URL
-Tags not currently workingWhat is BBCode?
BBCode, or BulletinBoard Code as it's fully known, is a set of tags, much like HTML, that tells the software how to display things. It is used very commonly on forums, and when responding to posts (not using quick respond) you have a set of buttons that fill in the tags for you. BBCode is not just limited to forums posts though, it is also acceptable to use in PMs (Personal Messages) sent to other users.
Every tag has an opening and closing tag, telling the software where to begin and end formatting text. The opening tag is simply the text (plus any extra data needed in the case of some tags), while the closing tag is simply the tag name with a forward slash in front of it. While it is not always necessary to include a closing tag, failing to do so will result in any text afterwards being formatted the same.
It is possible to have multiple tags inside of each other. If you do this then please remember to close off the last one you used before closing off others. In other words, if you have [tag1][tag2] then you must close with [/tag2][/tag1]. If you were to close of tag1 first, then it would automatically close off tag2 anyway, however this is bad practice and is not recommended by this experienced programmer.Common BBCode examples
All these tags have buttons in the reply menu which format the basic code for you inside the post. All you have to do is fill in the blanks and you have text formatted how you want.Bold text
Sometimes you want to stress a point and making the text bold is a great way to do it. The code is very simple. You simply use [b] and [/b] to make the text in between them bold, for example to make the word 'text' bold you would use the code [b]text[/b] to give text
Just like I have, you may wish to underline text, again maybe to stress a point or to separate out points. The code is more or less the same as with the bold, just replacing the b with a u. So, [u]text[/u] will give text
Italics are also a commonly used way of formatting text for certain purposes. Again, it is similar to the underline and bold tags, but with the letter being an i instead. So, [i]text[/i] will give text
URLs, or Uniform Resource Locators, are what you type into your web browser to display a web page. It is easier then typing the IP address of the website, and is often useful in passing on information to others. The tag is different to the others shown so far, and this is a prime example of a tag that needs extra data to function. The tag is as follows: [url=http://http://docs.simplemachines.org/index.php?topic=57]SMF BBCode list[/url]
Lets break it down. The first part declares the tag type, in this case URL. The equals then points the tag to the URL specified by the user. If no URL is provided then the forum defaults to 'http:///', which returns an error in the web browser if followed. After the opening tag is closed, any text is placed which is what the other users see and click on. It is perfectly acceptable to simply put the URL in letting everyone know exactly where it goes to. Finally, the closing tag is used which simply is a forward slash followed by the tag name, in this case 'url'.
So, know knowing how it works, lets see what it looks like using the code above: SMF BBCode list
Now, here is where it gets confusing. There is another way you can post URL tags. It means that only the URL is displayed as text, but it works just the same. Instead of putting the URL in the opening tag, simply put it where the text would go and close it off as normal. In other words, [url]http://http://docs.simplemachines.org/index.php?topic=57[/url] which displays as http://http://docs.simplemachines.org/index.php?topic=57
This is the tag type the software defaults to, but I personally prefer the one above for the extra flexibility it gives you when posting the link.Images
Many people want to show images in their posts. The software provides the ability to upload your own images, meaning no BBCode is necessary, but sometimes that isn't enough (especially when you have more then 2 images to upload, which is what the limit has been set at per post).
In order to use the image tag you must have uploaded your image to a website and have the URL ready. There are many sites where you can upload for free, and I won't go into listing them as that's not the point of this topic.
Like the default URL tag, you put the URL between the tags. So, to see one of the 'link here' logos available on the front page, you would use the code as follows: [img]http://www.clonecommandos.net/linkhere/brothersall50x50_1.jpg[/img] to display:
Please remember when posting images to remember the file extension on the end. If you don't then the image simply won't display.Strikethrough
Sometimes, you may wish to put a strike through your text rather then simply deleting it. The code is rather simple, just like the bold, italics and underline ones really. You use [s]text[/s] to give
One of the newest features tinkered with here, the spoiler tag is very useful for obvious reasons. All you simply do is use [spoiler]text[/spoiler] to then display [spoiler]text[/spoiler]Quote
Generally you are better off using the forums software to automatically format the quotes for you, but sometimes it is necessary to code a quote yourself. This is probably the most complicated single tag (not to be confused with single most complicated tag
) due to the multiple data needed to display correctly. A typical quote tag will be like [quote author=flyboy424 link=topic=1084.msg48669#msg48669 date=1232752750]
So, lets break it down. The first part declares the tag as a quote. Then, the author part refers to who made it. It doesn't refer to a set list of users so whatever you type it will display. If the author has spaces in their name then don't worry, the tag will read whatever you type until it hits the next part of the tag. The next part is the link to the topic and specific post so that any other users may follow the link to the specific post. It is pretty complex, and is the main reason why using the forums software to do it automatically is a good idea. The final part is the date. It is in the software's own time format (or timestamp), and so is not very easy to understand.
Now, where as with the URL tag you must
place a URL in for it to work, with a quote tag that isn't the case. If you simply use [quote]text[/quote] then all you will get is
However, if you used the fully formatted tag above you get
Some text from 'the Aviation thread'
Another thing to note is that it isn't an 'all or nothing' thing when it comes to the data you include. You can make a quote with just the author field in and the software will still accept it. Also note that you may use BBCode within the quote tags.Emails
OK, maybe not a common tag, but it does have a button in the reply menu. It is just like the URL tag, with the address going inside the opening tag and any text placed between the opening and closing tags. In other words, you use [email=] (or just [email]) and [/email] to place a link to an email address inside a post. You have the same options of tags as the URL tags. Due to how some spambots work, I'm not going post any email addresses inside this post, however the result is exactly
the same as the URL tag.Uncommon BBCode tags
These tags are ones you may not even be aware of existing. If you follow the link in my signature to the BBCode list (also linked to above) you will see a long list of all the BBCode tags that the SMF software has. However, not all are used often enough to be worth getting to work and so many do not work properly. I will simply leave these ones out, so only the tags listed in this post will work.Font colour
There are a few different colours available and like HTML you can simply enter the name. The basic colours are: black, red, yellow, pink, green, orange, purple, blue, beige, brown, teal, navy, maroon, lime green. Like HTML, you can use the hexadecimal code for a colour instead of the name, but you have to put a '#' in front of the number to declare it as a hexadecimal number. A good resource for these is the w3 schools HTML colour list.
So, if we wanted to make some navy blue text, we simply use the colour tag as follows: [color=navy]Text here will appear as normal, but in navy blue instead.[/color]
To give: Text here will appear as normal, but in navy blue instead.
Please note that, like HTML, it uses the American spelling of 'color', rather then the British spelling (that I'm used to using).No BBCode tag
This tag is useful for posts like this where you need to show off how to do some BBCode, and so you need the software to not format it. The tag is rather simple. You simply use [nobbc] and [/nobbc], with any BBCode tags you want to show inside.
It is important to note that if you leave off the closing tag then all BBCode afterwards will not work.Code tag
For programmers like me, it is useful to be able to show off code sometimes. There is a tag provided to do it and it is more or less the same as the quote tag, just much simpler. All you do is put [code] and [/code] with any code in between. So, here is what it looks like when you put some simple Java code in.
System.out.println("Hello World");Timestamp conversion
System.out.println("This is some simple code");
If you were a little confused by the time format used in the quote tags then have no fear, there is a way to convert it. Using a time tag provided by SMF, you can turn a timestamp like 1232752750
into January 22, 2009, 06:19:10 PM
. So, if you do wish at some point to convert a timestamp then you simply use [time] and [/time] to convert it. So, for example, to covert the timestamp I used earlier you use [time]1232752750[/time].
In reality, the only advantage to using this over simply typing out a time is that by converting the timestamp, it will display in the timestamp of whoever views it as the software converts it each time the page is loaded. Of course, it is hard to work out what the time is in timestamp, but if you can then it is a very powerful BBCode tag to use.Image linking to URL
Sometimes people, myself included, wish to have images in their signature linking to a webpage. Sometimes you may wish to put one ina post when advertising something. If so, then it is useful to know how to make an image link to a URL. As the tags have been explained already, you should know how to do this, but if you are still wondering then let me show you how.
As has been said before, you can happily put a BBCode tag inside another one. in fact, I'm not sure of any limits to how many you can use, other then the number of tags available. For this trick, you simply need the URL and image tags.
So, take the image in my signature linking to this thread as an example. if you click on it you will be redirected here in a new window/tab. The code is pretty simple. [url=http://forum.clonecommandos.net/index.php?topic=1243.0][img]http://www.x-plane.org/home/flyboy424/BBCode_ubar.png[/img][/url]
Lets break it down. First, you have a standard URL tag with the URL provided in the opening tag. This trick won't work with the other type of tag unless you want to link to where the image is itself. In between the opening and closing tags is a standard image tag. Then, you close off the URL tag as normal.
As I said at the start, you must remember to close the tags off in the correct order or you will mess up your post. In this case, you open the URL tag, then the image tag, then close the image tag first before finally closing the URL tag. If you close the tags in the wrong order then you will simply have a closing image tag showing in your post which will obviously look bad.Tags not currently working
Here is a list of tags that currently are available in the forum software but have not been made to work just yet.
=Glow - This tag simply adds a glowing outline to any text within the tags. You have control over the colour, strength and width of the glow when making the tag.
=Shadow - This tag adds a shadow to each character inside the tags. You have control over the colour and direction when declaring the tag.
=Marquee - This tag allows for text or images to scroll across the screen repeatedly.
=Pre-formatted text - This tag simply formats your tag in the default SMF way using the monospace font.
=Left align - Simply aligns all text within the tag to the left hand side of the screen.
=Right align - Left align, but for the right.
=Centre align - Left align, but in the centre.
=Right to left text - This tag displays all text inside it from right to left.
=Left to right text - Right to left, but left to right instead.
=Horizontal rule - Draws a horizontal line across the page. Useful for separating points in a post, for instance.
=Font size - Simply changes the font size to whatever you desire.
=Font type - Changes the font to any you desire. Please note that the only fonts that work are those of whoever is viewing the post. You may have a font installed ans as such see your post correctly but someone else may not.
=Flash image - Displays a flash image from the url you provide of a flash image.
=Table - Inserts a table into the post. The tags are exactly the same as in HTML, except for the replacement of < and > with [ and ] respectively.
=Superscript - Changes text inside the tag to superscript.
=Subscript - Changes text inside to subscript.
=Teletype - Changes all text inside the tag to monospace font.
=List - Simply allows a properly formatted list to be created (much better looking then the workaround I'm having to do).
=Abbreviation. Acronym - Both tags work the same way. You put a full word(s) into the opening tag and the abbreviation/acronym in between the opening and closing tags and in the final post you see the abbreviation/acronym and get the full word(s) when you put your mouse cursor over it.
OK, that's all. This list will likely remain like this until such time as either new BBCode tags are added by SMF or existing tags that currently don't work are changed so that they do.