Learning BBCode - Intermediate

General Tips

Color and Color Combinations
In the design world, there is a saying: "There are no bad colors, only bad color combinations". This is certainly true in the land of the internet. Choose colors that work well with each other. If you are not sure about what colors may look well together, there are several tools on the internet to help you with color schemes. One tool that you may find helpful is paletton. Remember that when choosing colors, you can use the color name or the HEX code for that color (HEX codes are the six digit number preceded by a # sign. These are more versatile than color names). You can also get a list of color names that will work on all browsers from the W3Schools website.

Readability
You will want to be able to read your comments on your recording page, and you will want others to be able to read them as well as the information on your profile page. Test out your color choices using the Preview button. The Preview button on comments and Profile Pages lets you see what you are doing before you commit to doing it.

If you are still not quite sure, make a sample recording and put it in an Inner Circle for a friend to give you their opinion. At the end of the day, SingSnap is about your singing, and if people are turned off by your background or it is too jarring on their eyes, your recording won't get the attention it likely deserves.

Threads & Comments

Styling Text
You can center your text within the post/comment by using the [center] tag. One word of caution on using this option. It is difficult to read an entire paragraph that is centered. Try using center only for headings or points of emphasis.

CENTER (centered lines button)

[center]Text Here[/center]

Text Here

Nesting Tags
Nesting tags refers to the act of putting tags within each other. In this way, you can have BOTH bold and italic text, or colored, bold, italic text, or any combination you like. NOTE: If you center anything that has additional tags, the [center] tag needs to be the outermost pair.

All tags must be closed in the opposite order that they are opened. In other words, each pair of tags (open and closing) must be contained within another pair and so on. See the examples below to understand how nesting works.

NESTED TAGS

[b][i]This text will be bold and italicized.[/i][/b]

This text will be bold and italicized.

[color=red][b][i]This text will be bold, italicized and red.[/i][/b][/color]

This text will be bold, italicized and red.

[center][b][color=green]This text will be centered, bold and green.[/color][/b][/center]

This text will be centered, bold and green.

Embedding Video, Audio, Slideshows
You can add special items like YouTube videos or the SingSnap player to your thread posts (and even comments, but please don't add them to comments unless you have special permission from the singer). Often, these items are far too large for the area you want to place them, so you can also modify your tag to size them to your liking.

YouTube

[youtube]WKSuhB9y0Ck[/youtube]
[youtube width=200 height=300]WKSuhB9y0Ck[/youtube]

The short code between the tags can be found in the address bar of the YouTube video, or under the Share tab beneath the video.

SoundCloud

[soundcloud]5078696[/soundcloud]
[soundcloud width=200 height=100]5078696[/soundcloud]

The SoundCloud short code can be found by clicking the Share button beneath the player on the SoundCloud site. Then look at the "WordPress Code" and copy the number immediately following "/tracks/".

Imgur

[imgur]UakCJ[/imgur]
[imgur width=300 height=300]UakCJ[/imgur]

The easiest way to get the imgur short code for the image album that you want to base the slideshow on is to copy the last letters/numbers at the end of the URL in the address bar (when you are viewing the image album).

PictureTrail

[picturetrail]pic20.picturetrail.com/VOL1359/13583889/flicks/1/8902193[/picturetrail]
[picturetrail width=300 height=300]pic20.picturetrail.com/VOL1359/13583889/flicks/1/8902193[/picturetrail]

To find the PictureTrail short code you can click on "get code" when viewing your Photo Flicks on the PictureTrail site and then look for the part of the code that resembles the example above.

SingSnap

[ss]cc9767a72[/ss]
[ss width=200 height=400]cc9767a72[/ss]

The recording id can be found when you open up the recording. You can copy the id number from the very top of the Song Information section on the right (or copy it out of the URL in the address bar)

If you want the SingSnap player to maintain its natural shape, you can calculate the width and height manually by dividing each dimension by the same number (For instance, if you want it to be 1/3 the size, you would divide the normal width (357px) by 3 and the height (458px) by 3 to get your width and height. If you want an exact width for the player, simply divide the width you want by 0.78 to get the correct height to maintain aspect ratio.

Using the sizing modification, you can make some nice collages of images or videos without having to display them in varying sizes up and down your page.

Recording & Profile Pages

Styling Text
We're going to use the background tag to add a few more style options to your page. Now that you have a beautiful background, you'll want to style the font and colors to add even more depth to the overall look of the page. (If you style your font within your code as we will show you, others will not be able to change the font scheme on your recordings. If you leave this part blank, they can change colors and emphasis and even size.)

To style the font, you will add modifiers to the background tag. These modifiers will sit right within the tag itself. Be sure to spell them correctly and add spaces only between modifiers, not within them. You can use one, two, or all of the modifiers within the tag to create the font style for your page.

Until very recently, web designers have had a hard time making sure that their text was displayed the way they intended it. This is because not everyone has the same fonts installed on their computers. In the past, the only way to ensure that an uncommon font would be rendered properly for everyone was to turn the text into an image.

Today, there are "web fonts". These fonts reside on the internet, and are hosted by companies like Google, so that any font you choose from their large library can be used and will be rendered the same way on everyone's machine.

SingSnap references the Google Fonts library for displaying fonts for your themes. Simply go to the Google Web Fonts site and find the font you are interested in and make note of the name. Type that name after the font= portion of your code. If the font contains more than one word in its name, you need to use the + sign between the words, and not a space as in the first example below. You can also modify the color and size of the font.

FONT

[background font=Noto+Sans]http://media.singsnap.com/bg/nothing.jpg[/background]

If you don't want a background image, but still wish to use the font styles, you can simply leave the area between the background opening and closing tags empty.

[background font=Gabriela][/background]

FONT COLOR

[background fontColor=#FF0000]http://media.singsnap.com/bg/nothing.jpg[/background]

FONT SIZE

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

Font Size can be any number between 10 and 29.

You can use one, all, or any combination of the above font stylings to create an overall theme.

Example:

[background font=Gabriela fontSize=14 fontColor=#FFFFFF]http://media.singsnap.com/bg/nothing.jpg[/background]

Styling the Foreground
The foreground on a recording page will be the boxes for the recording information that sits to the right of the player, your song information section, and all comments. On the profile page, it will be a continuous colored box overlaying the background image.

You can specify a color (the default is black) as well as how dark (opaque) it appears, to allow more or less of the background image to show through. The higher the number of opacity, the darker the foreground color will appear.

The codes for styling the foreground also are contained within the background tag and can be used in conjunction with the font styles from earlier. Just remember to put a space between each element.

CONTENT COLOR (Foreground)

[background contentColor=#FF0000]http://media.singsnap.com/bg/nothing.jpg[/background]

You can also use the color name such as red, green, blue or any of the options on the color list on W3Schools.

Example:

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

OPACITY

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

Opacity can be any number between 0 and 100; 0 being invisible and 100 being completely opaque.

A fully styled theme would look something like this:

[background font=Gabriel fontSize=16 fontColor=#FFFFFF contentColor=#FF0000 opacity=40]http://media.singsnap.com/bg/nothing.jpg[/background] You would add your song information comments or and style those comments here.

Inserting Images
You can place an image in your song information section on your recording page, if you like; perhaps something complementary to your background. You would use the [img] tag as previously pointed out, but you would put it directly behind the background tag (not within it). In the next section on Profile Pages, we'll talk about how images are displayed and how you can manipulate the layout.

Example:

[background font Gabriel fontsize=16 fontcolor=#ffffff contentcolor=#ff0000 opacity=40]background image url[/background]
Some comments, if you like. 
[img]image url[/img]

Profile Pages

There are some things that are unique to profile pages, and we'll go over a few of those now. In the Advanced Tutorial, we'll talk about designing and styling your profile page and combining elements to get a professional look. For now, we will just discuss how to get certain elements onto your page.

Inserting Images
There are two ways of getting images onto your profile page. If you have just a few to share, you can use the [img] tag as previously discussed. If you place the codes for images next to each other, they will display side by side until they run out of room. You can put spaces in between them to separate them.

You can also line them up vertically by placing one image code per line. If you want to have some space between them, be sure to add an extra line between each image code.

If you have a lot of images to add, such as contest and challenge banners of varying sizes, there is an awesome code you can use to easily create a horizontally and vertically aligned grid that will make your images look neat and tidy.

GRID

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

You can add as many images as you like between the grid tags, and when you open your page, they will magically be lined up nice and neat. You can use a modifier to change the width of the grid, reducing its columns from 3 to 2.

[grid columnWidth=270]
[img]http://media.singsnap.com/bg/nothing.jpg[/img]
[img]http://media.singsnap.com/bg/nothing.jpg[/img]
[img]http://media.singsnap.com/bg/nothing.jpg[/img]
[/grid]

Congratulations!

By now, you have the tools to create some pretty amazing recording page and profile page themes and are able to place some content on them. In the Advanced Tutorial, we are going to go over how to put all of this together and give you one more tag for when you want to share your coding talents with the world of SingSnap.