Learning BBCode - Beginner

BBCode is used in various places on the site to allow you to add some flair and style to your postings, recording pages and profile pages. This tutorial will help introduce you to BBCode and all the things you can do with it.

General Tips

All code must be contained within 'tags'.

Tags are your way of letting the browser know where to start and stop reading the code and what kind of code you are wanting to run.

Tags always begin with a word surrounded by square brackets and end with the same word with a backslash before it, surrounded by brackets. The backslash tells the browser that this is where this particular line of code ends.

Example:

[background]http://media.singsnap.com/bg/nothing.jpg[/background]

What the example tells the browser is that you want the image from the link you provide to be shown as the background of the page. Without the [/background] to tell the browser when to stop reading, you run the likelihood of 'breaking' the code and not getting the results you want.

Don't worry if these examples look like gibberish now. Very soon, you will know exactly what they do and how to make them bow to your wishes.

In the Intermediate and Advanced tutorials we will discuss "nesting" tags. It is important to note that when you nest tags that you 'close' them in the reverse order that you applied them, and that the [center] tag remains outside everything else.

Right:

[center][b][color=red]Text Here[/color][/b][/center]

Wrong:

[center][b][color=red]Text Here[/center][/b][/color]
[b][color=red][center]Text Here[/center][color][b]

Spacing
When using BBCode, it is important to ensure that you do not put spaces within any one element, but that you do put one space between elements. (I know... "what are you talking about?" I promise you will understand soon!)

Right:

fontSize=14

Wrong:

fontSize = 14
Font Size = 14
Font Size=14

The browser views the space as the start of a new element, so if you are putting spaces within your element (the part that says fontSize=14 is an element), it can't understand what you are wanting and the code will break and you will not get your desired result.

Capitalization & Spelling
You can write your code in all caps, or all lowercase letters or a mix of the two, however be mindful of the spelling. The element must be spelled correctly for the browser to understand what you are wanting it to do.

Right:

[background FONTSIZE=14]http://media.singsnap.com/bg/nothing.jpg[/background]
[background fontsize=14]http://media.singsnap.com/bg/nothing.jpg[/background]
[background fontSize=14]http://media.singsnap.com/bg/nothing.jpg[/background]

Wrong:

[background fontszie=14]http://media.singsnap.com/bg/nothing.jpg[/background]

Formatting Options Box
This box will be your friend while you start learning how to use BBCode. It will appear as soon as you click inside a comment box, the area you start writing a thread post, the Information boxes on profile pages and recording pages.

If you hover over an icon, it will tell you what it is used for. You can experiment with these buttons to get different looks for your comments, posts and pages, but if you want to take it a step further, keep reading!

Pre-Made Designs
Using a pre-made theme is the fastest and easiest way to quickly get a beautiful page done. If you really aren't interested in creating something from scratch, or you simply don't have the time, these pre-made themes can come in handy.

SingSnap is currently busy creating several styles of themes that you can choose from, and more are being added every day. You can find these on the SingSnap website by clicking on the Help tab, then Page Designs in the sub menu. These designs can be used for either profile pages or recording pages, and are very easy to use. Simply find the design theme that you are interested in by viewing the thumbnail images. There are several categories, so be sure to check out the tabs along left side to find a suitable theme.

The thumbnails are small, but you can see full size examples of recording pages with these themes by clicking the "example recording" link below the image you are interested in. A recording page will appear showing you exactly what the theme will look like.

Once you've found the theme you want to use, simply click on the "Click Here To Get the Code" text on the image and a small box will pop up. Highlight all of the code in the box including all brackets, copy it to your computer's clipboard and then paste that into the "Information" box of either your recording, or your profile page, and click Update. Now go check it out. Pretty fancy and super easy!

You can also find themes in the Profile & Thread Design folder on the Message Board. There are several members creating stunning themes for you to use.

Threads & Comments

You can spice up your thread posts and song comments with BBCode very quickly and easily. You can change the font color or size, add an image, as well as embed an external widget for video (from YouTube), image slideshow (from Imgur or PictureTrail) or audio clip (from SoundCloud). It is very bad form to add these last 3 items on someone's song. You should keep those items to your personal pages or thread posts.

You should note that if someone has created a theme for their page with font colors and sizes, you will not be able to change those in your comment. Your comment will default to the singer's theme. You can still however insert images if you like or center your comment.

Styling the Text
We will be referring to styling your text from here on out as styling the font. This is the common word used in coding to refer to the name of the style of text being used. There are hundreds of thousands of fonts used in print and web applications.

In threads and comments, you do not have a choice as to the font type itself, but you can change characteristics of it such as color, size and emphasis. Each method is demonstrated below. The code will be on the first line, and the result will be on the second. Obviously, you would replace "Text Here" with your own words.

BOLD (B button on toolbar)

[b]Text Here[/b]
Text Here

ITALIC (I button on toolbar)

[i]Text Here[/i]
Text Here

COLOR (multi-colored button on toolbar)

[color=red]Text Here[/color]
OR
[color=#FF0000]Text Here[/color]
Text Here

SIZE (A button on toolbar)

[size=20]Text Here[/size]
Text Here

Inserting an Image
Do you have an image that you would like to use to emphasize your point in a post, or add some flair to your comment? You can easily insert an image by using the [img] tag. This section is a little long, but it will cover everything you need to know about getting images for your designs for any area you post them on. (When using images to insert into posts or comments, be sure that is an appropriate size and is not too large as to dominate the entire thread or comment section.)

IMAGE (tiny picture button on toolbar)

[img]http://media.singsnap.com/bg/nothing.jpg[/img]

Where to find images
You can find images on the internet by doing a Google search or using your favorite image site. You can also save an image that you have taken or created to an account on places like Photobucket.com or Flickr.com and use those as well.

A note about web images
While there are literally billions of images all over the web that you can grab for your backgrounds and such, this does not mean that they are up for grabs for you to use any way you like, or even that they are free.

Just like written text, song lyrics, music, or any other type of creation, images are copyrighted by the owner/creator. This does not need to be stated on or near the image for it to be true. Image piracy is a huge problem on the internet, so we encourage you to use caution when grabbing a photo for your use. There are many, many places to get public domain or creative commons images, or even purchase images for a nominal fee.

It is beyond the scope of this tutorial to go into finding reputable image sites, the proper copyright information or attribution requirements, but understand that SingSnap absolutely respects copyright and if notified of copyright infringement, we will remove the infringing image immediately. This could lead to your profile or recording page looking blank.

Image file types
Depending on the characteristics of the image itself, it can be one of 3 of the main image file types. (JPG, PNG, GIF). Again, it is beyond the scope of this tutorial to explain the differences, but know that if you are creating your own images that do not require transparency, JPG is the best format to use for these purposes.

The file type will almost always be the last 3 letters of the image's address on the web (the URL).

Getting the link into your code
Since we do not have a way for you to upload and store graphics on SingSnap you have to use another site for that. Popular choices are PhotoBucket, imgur and Flickr.

Once you've uploaded the graphic to one of these sites they will provide you with the URL for it. How to get the URL varies from site to site but on PhotoBucket for example they call it "Direct link" and display it in the right column when you view a graphic (you can tell that it's a graphic URL since it starts with "http" and ends with ".jpg", ".gif" or ".png").

Inserting a Clickable Link
Making text clickable

[url=http://www.singsnap.com/]SingSnap Is Awesome![/url]
SingSnap Is Awesome!

Note the difference in the use of this tag: The tag itself contains the URL because what you are actually styling is the text.

Design Tips
You may be tempted to throw caution to the wind and style anything and everything you can get your hands on once you realize how easy it actually is. A few words of caution, however: "Less is more", and "Just because you can, doesn't mean you should".

Colored text is difficult to read, and may even be impossible for some. Use font styles as points of emphasis rather than as an entire post or comment, and it is the VERY rare occasion that you should use more than one color in a post. Making sure that the color that you are using has enough contrast against the background is important as well. For example, light pink is extremely difficult to read on a white background, but would be very stunning on black.

Keep images at a reasonable size. A reasonable size for any thread post or comment would be around 300px X 300px with the exception of a banner in an opening post which can be much larger. Animated images are annoying. I'm sorry if you like them, but I'm just being honest. Most people don't. If you want animated images on your own pages, go to town! However, courtesy would dictate that you do not leave them on others' pages unless you've received specific permission. Keep in mind though that others visit the recording as well and would be subject to the flashing.

Recording & Profile Pages

Styling the Background
Getting the best looking background
Images for backgrounds should be large. A good rule of thumb is that it should fit your screen. So if your screen resolution is set at 1280x960, an image that size would work perfectly for you and should size nicely for others.

A large background with a high resolution will also ensure that it looks crisp and clear when it is displayed. If you are using a small image, it will need to be stretched in order to fill the browser window. When this happens, the image can become distorted, grainy and blurry. It may even become unrecognizable if the image was very small.

Most modern monitors are wider than they are tall, which means that your image should be as well. In order to fit the image into the browser window, certain accommodations have to be made, and this is generally done by cropping the top and bottom of the image, so if your image is very tall, you may lose more than you bargained for.

This brings me to the image itself. Because the image will look differently and be cropped differently on every monitor, be sure that the focal point of the image is not near the edges to ensure that it does not get cut off when rendered onscreen.

Displaying the background image
To display that big beautiful image in the background of your recording page or profile page, you will use the [background] tag. This tag is very versatile and there are a lot of things you will be able to do with it. For now, we're just going to concentrate on that background image.

BACKGROUND (overlapping blue/white squares button)

[background]http://media.singsnap.com/bg/nothing.jpg[/background]

Styling the Information Comment
Whether you put a background on your page or not, you can use the tools in the section on Threads & Comments to style your information comment on your recording. If you do use the background tag, it's good to get in the habit of adding any additional styling and text after it.

Example:

[background]http://media.singsnap.com/bg/nothing.jpg[/background]
[b]I hope you enjoy this rendition of my favorite song.[/b]

Design Tips
One last word on design (for now); when choosing an image for your background, be sure that it won't compete with the foreground (comments, images, your recording!). A background should add ambience, not steal the show.

That's it! That's all there is to putting an image up in the background. All you need is the opening and closing background tags and the URL to your image, and you have already created a stunning page. But there is a lot more you can do. When you are comfortable with what has been covered in this section, move onto the Intermediate Tutorial and take your skills up a notch!