Author Topic: using BBcode to add style to your comments  (Read 12437 times)

Offline ericd543

  • Red Shirt
  • **
  • Posts: 490
    • View Profile
using BBcode to add style to your comments
« on: March 16, 2010, 11:16:01 AM »
I've had a couple of questions about how to use BBcode so here's a quick, strike that, it's a tutorial.

What is BBcode?

BBcode is a way to add style to your text. Some examples of text styles are bold, italics, even colors. It can also be used to display an image, a hyperlink, or display quoted text. There's more but that is a good start.

BBcode works by using tags to define the text that you want to apply a style to. Tags work in pairs. There is an opening tag and a closing tag.

Let's say I want the word 'island' bolded in a sentence.

Code: [Select]
  This [b]island[/b] sure is mysterious.

Is displayed like this:

  This island sure is mysterious.

If you want a word or phrase to be italicised just enclose it with the italics tag like this.

Code: [Select]
  This [i]island[/i] sure is mysterious.

Is displayed like this:

  This island sure is mysterious.

Note that for bold the letter b is used within the tag, and for italics it is the letter i.
opening tags are: openbracket  letter  closebracket
  closing tags are: openbracket  slash  letter  closebracket

You can use two tags in a row to make text bold and italicised.

Code: [Select]
  This [b][i]island[/i][/b] sure is mysterious.

Which is displayed like this.

  This island sure is mysterious.

The tags are not displayed. When the forum software (this system we're using) runs into a Bold tag it starts displaying text in bold from that point forward, and when it sees the closing Bold tag it stops displaying text in bold.

This is why it is important that for each opening tag there is a closing tag. Otherwise the system gets confused.

The system also provides a convenient feature that makes it easier to do this kind of text styling. You may have noticed a bunch of buttons above the smileys in the comment editor. These can be used to quickly add style tags to your text.  To use them you select the text you want to apply a style to and then click on the appropriate button. The system will put the corresponding opening and closing tag around the selected text.

There is one exception to this "for every opening tag there is a closing tag" rule, and that's the Horizontal Rule tag. It does not require a closing tag. You can put the Horizontal Rule tag in your comment and it will draw a horizontal line across the screen.

Code: [Select]
..and that's how Richard escaped from his chains.
[hr]
in this next scene we see Hurley propose to Kate...

is displayed like this:

..and that's how Richard escaped from his chains.

in this next scene we see Hurley propose to Kate...

The Horizontal Rule tag is the only exception to the rule that I know of. If you want to skip ahead you can check out this article about BBcode at wikipedia.

http://en.wikipedia.org/wiki/BBCode

Note that when you provide a naked URL like I did above the system recognizes the h t t p / / : and knows that you are providing a link to another web page. So it automagically displays it that way. It's convenient and you don't have to provide any tags for this to happen. (I had to put spaces between the letters h t t p : / / because the system thought I was starting to provde a link, so I tricked it with the spaces, otherwise it would be a link to nowhere.)

There is also a way to make a word or phrase into a hyperlink, which is just a fancy way of saying a link to another web page. It uses the URL tag and looks like this.

Code: [Select]
check out [url=http://en.wikipedia.org/wiki/BBCode]this article about BBcode at wikipedia[/url].

is displayed like this

  check out this article about BBcode at wikipedia.

Again, it's easy when you use the button for Insert Hyperlink. Select the text you want to be linked to a URL and click on the hyperlink button. The system will insert the opening and closing tags.

If you let your mouse hover over a button for a second it will display a little message telling you what the button is for. You don't have to use the buttons. Once you've done this a few times you may prefer to just type the tags in manually. The tags are just text that the system uses to style the text in your coment.

URL stands for Uniform Resource Locator. It's a fancy way of saying "web address". It's what is displayed in your web browser's address bar.

There are two parts to providing a hyperlink -- the text you want to be displayed as the link, and the URL itself. Notice that you also need to supply an equal sign for the opening URL tag. So it's like, "URL equals this, and display this text for the link". The equal sign is very important. If you forget to include the equals sign it will be messed up.

The Preview button that is below the edit box, next to the Send Message button is useful for taking a look at your comment before you post it to see if anything is messed up. If a bracket it missing, or backwards when it should be forwards, or there is an extra space, or there is a forward slash instead of a backslash, etc. There are lots of little ways to mess up a tag, and if you are typing them in manually it's an easy to make a mistake. The buttons help a lot to get the syntax correct. But if you are previewing your post and see that everything got bolded just go back and see where the mistake was made. It's always something and the system can get picky.

If you want to insert an image into your comment use the Image tag.

Code: [Select]
[img]http://imgur.com/zPJ85m.jpg[/img]

And voila! An image is displayed.



The Image tag is expecting a URL of an image somewhere on the web. This can be the URL of any image found on the web, but it is considered bad nettiquette to link to someone else's image. This is called hotlinking. Whoever you are linking to has to pay for the bandwidth for serving that image. If they get a lot of traffic they may be upset and let you know. So if you have a lot of images, or you want to link to images often, you will want to get your own image hosting from a place like imgur.com which is what I use for posting screencaps to SWLS.

Note that the img tag does not use an equals sign like the url tag does. This can be confusing until you get used to it. I still mess this up quite often. The preview button is your friend when doing this kind of stuff.

When I post screencaps in the forum here I will provide a clickable image. When a user clicks the small pic they get to see a bigger version of the pic. This works by combining the url tag with the img tag, just like we combined bold with italics earlier. It looks complicated but the buttons make it easier.

Code: [Select]
[url=http://imgur.com/zPJ85.jpg][img]http://imgur.com/zPJ85m.jpg[/img][/url]

It looks like this.



This is a linked image. It's an image within a hyperlink. The hyperlink is to a bigger version of the image.

Notice that the two URLs are slightly different. imgur has a nice feature. When you upload a picture they also store smaller versions of the image. In this case the original image that I uploaded is called zPJ85.jpg and this is the big pic that I am linking to. I can just add an m to that to get the URL for the medium sized version.  Add a t for tiny, m for medium or l for large. That is an awesome feature for posting images in forums like SWLS.

It's getting kinda complicated, I know, almost done.

You can also add text to the linked image. In this example I will put it after the pic. The image and the text are between the opening and closing url tags.

Code: [Select]
[url=http://imgur.com/ZDwrk.jpg][img]http://imgur.com/ZDwrkm.jpg[/img]
What motivates this man?[/url]



What motivates this man?



Just so you know. The pics don't have to be small and big version of each other. That's just handy for the screencap thread.

You could display one image (using the img tag) that links to a completely different image (using the url tag). Like this below.



Or you could display an image that links to a web page URL. Like this below.



or you could just link to text within your comment. Like this below.

This is not a pipe

There! I think I Lostified that a bit.  ;D

Just want to mention two more things for now. I am using the Code tag to display text within a code box.  The Code tag tells the system to not interpret the tags. All text, including tags, is displayed with a monospaced font. And again, tags are not expressed. The Code tag is who useful for giving example of BBcode like this, but it's called Code because programmers use brackets and braces when they are writing programs and they need it to display source code examples in a forum.

And finally, when the system runs into the quote tag it puts everything in a box with a background color to offset it from other text. When you hit the Quote button to make a comment the system automagically puts the entire message you are quoting between quote tags. There are special extras that the quote tag uses to provide an author label and links. And these quotes can be nested one within the other as you've seen on the site.

Code: [Select]
[quote author=brainyquote.com]
[i]"If we open a quarrel between past and present, we shall find that we have lost the future."[/i] -- Winston Churchill
[/quote]

Quote from: brainyquote.com
"If we open a quarrel between past and present, we shall find that we have lost the future." -- Winston Churchill


In summary,

  • SWLS uses forum software that supports BBcode in comments
  • BBcode is a system of tags that can be used for styling text, provding hyperlings, embedding images, and more
  • users can put BBcode tags in comments to enhance the displayed text
  • tags are commands to the system
  • tags are not displayed
  • tags come in pairs, there is a closing tag for each opening tag
  • the system has buttons that makes it easier to use tags

I used the list tag to add bullet points to that list. But the system is buggy! It doesn't tag list items correctly. So be careful using this button for list items. You will have to manually enter the tags for making a bulleted list.

To start a list begin with the List tag. Then each item on the list is enclosed between List Item tags. And finally don't forget to close the list.  Like this.

Code: [Select]
[list]
[li]SWLS uses forum software that supports BBcode in comments[/li]
[li]BBcode is a system of tags that can be used for styling text, provding hyperlings, embedding images, and more[/li]
[li]users can put BBcode tags in comments to enhance the displayed text[/li]
[li]tags are commands to the system[/li]
[li]tags are not displayed[/li]
[li]tags come in pairs, there is a closing tag for each opening tag[/li]
[li]the system has buttons that makes it easier to use tags[/li]
[/list]

Whew!  That got longer than I thought. I hope you find it useful.

Offline JBRam

  • Island Native
  • *
  • Posts: 30614
    • View Profile
Re: using BBcode to add style to your comments
« Reply #1 on: March 18, 2010, 11:40:16 AM »
Hey, thanks! Excellent post, eric!

Offline Ladybug

  • Dharma VIP
  • *******
  • Posts: 20841
    • View Profile
Re: using BBcode to add style to your comments
« Reply #2 on: March 21, 2010, 11:57:29 AM »
also, if you would like deep pink text all you have to do is this (take the spaces out):

[ color=deeppink]THERE YOU GO[ /color]