Learning BBCode - Advanced

General Tips

Designing a Profile Page
It's all right if you want to just put up a background and add some images and text and be done. There is nothing wrong with that at all, and with the tips and tags already shared earlier in this tutorial, you can create some really cool pages. If you really want to dive into the world of profile and recording page design, keep reading.

Images obtained from the web
The first thing you should always do before putting together a profile page is to sketch it out on a piece of paper first. Label each section so you know exactly what goes where, and what to code first. The code reads top to bottom, so if you have a header, for instance, that will be the first line of code on your page AFTER the background/foreground/font styling. The last thing you will code, then would be the footer.

Where to share your creations
It's a good habit to get into of using your sketch to make notes of the tags you will use. This is especially true if you plan on using nested tags. This will help you in writing the code more quickly with less error

Designing for Others
You may get to a point in your skill level, that you will want to branch out and create designs for friends, or even the community in general. This is a great way to show off your new found design skills. There are a few things you need to know before you venture into that area.

Images obtained from the web
You can, of course, design your own background images if you are skilled in graphic design or photography. Mostly, though, you will likely obtain your images from the internet. This is perfectly OK, but keep in mind that certain sites claiming to offer free images, are in fact, themselves infringing on the rightful owner's copyright by distributing the work.

Please read the brief information on copyright materials in the Beginner Tutorial for help on this topic. We encourage you to do your own research as well into the use of images from the web or anywhere else when creating designs for others.

Even on legitimate sites, there are often rules about how you can use a particular image, or whether you need to provide credit to the owner, or whether you can alter the image in any way. In the Reference section, we'll provide some links to legitimate photo and image sharing sites, but always read the terms of service, and always check the copyright rules for each image, as they can vary from image to image even within the same service.

If you offer your themes to the SingSnap community, keep in mind that they are subject to alteration by the person using them. Please do not contact Support to have us take down someone's page because they changed the colors or fonts of your theme. We will not do so.

Where to share your creations
The best place for people to discover your themes is in the Profile & Thread Design forum on the Message Board. You can start your own thread and showcase your themes there and share your code. It's a good idea to look at some of the other threads that have been started to see how others are organizing their collections.

You can, of course also offer your themes right on your own profile page with thumbnail images, and in this way you can change or alter your layout and add and remove themes easily.

Some people even have their own websites for organizing their themes. You can do this as well, but keep in mind that it is a violation of the Terms of Use to link to your site if it is a "for profit" site. This means you cannot charge money nor accept donations in exchange for your work. If you decide to share your themes, it must be because you want to help others, not to try to make a buck or two.

How to share your theme codes

SingSnap has provided a nifty little code to allow you to display the code without causing it to be executed. With the [code] tag, you can show an image example of your theme, and then provide the code for it for others to copy and paste.

CODE

[code][background font=Gabriel fontcolor=red]http://media.singsnap.com/bg/nothing.jpg[/background][/code]

Whatever is typed between the opening and closing [code] tag will be seen as plain text within a box making it easy to identify as your code sample.

CODE + IMG

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

This method will insert your image AND place the code for the image below it. Great for contest and challenge banners!

Profile Pages

Headers, Footers & Large Images
You should be aware that the working space for any content on your profile page is 920px wide. There is no limit in length. Any images that you create including a header or footer should be 920px wide or less. Anything over 920px wide will be automatically altered to fit within the 920px space. (Just a note: The full width of the foreground is 940px, but there are 10px of padding added to each side to avoid items butting directly up to the side of the foreground.)

If you use an image that is less than 920px wide and you want to use it for a header or footer, be sure to use the [center] tag, otherwise it will default to align to the left. (That is, if you want your header centered.)

Creating buttons
If you want to create buttons to link to different parts of your profile such as Recordings, or a specific recording, your Gallery, etc., you can do this with the use of the [url] and [img] tags.

The first thing you want to do is decide how many buttons you will want/need. This is why sketching your profile page out on paper first is a good idea. You will want to determine what direction you want your buttons in (horizontally or vertically) and then create an image for each one.

When making buttons lay out side by side across the width of the foreground, you will need to do some calculations to determine what size your images will need to be. If you have 10 buttons, and you want them all to line up across the page, you'll need to divide 920 (the width of the page) by 10 for a total of 92px wide. Keep in mind that if you want spaces between each button, you will have to subtract at least 1 px from each image to account for the spaces.

Once you know what size your buttons need to be, it is time to make them. You can create your buttons in any general image software. GIMP is a free image editing/creating software that you can download, but unless you are already familiar with graphic design and using robust software to create images, you might be better off with something like Pixlr which has 3 different modes and is all online.

Your button images can be actual images, or they can be blank resembling actual web buttons. You will need to make a separate image for each button and include the text on the image.

Making the buttons work
When you are ready to actually code your profile page, you will have to treat your buttons a little differently than regular images in order to make them clickable for your viewers. To do this, you are going to nest the [url] and [img] tags for each of your button images. If you want a horizontal display, type out your code one after the other. You can place a space or two between each image to space them out if you like, or butt them up next to each other.

Clickable Images/Buttons

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

When you view your page, the mouse should change from a pointer to a hand when you hover over the button. It's a good idea to test each button to make sure that the url is typed correctly.

You can use this method for any image. You can create an 'album cover' and have it linked to open one of your Playlists, for example.

Aligning Elements
While BBCode does not allow for tables or columns, there is a handy tool you can use to align elements on your page the way you would like them. When you are placing elements next to each other or one on top of the other, you can control the spacing with the   element. This stands for non-breaking space, but that's not important. What is important is that you can use this little tool to align images, text, buttons, anything both horizontally and vertically. You can add one, two or as many as you need.

To place 4 spaces between elements, for example:

Element 1         Element 2

To place 4 lines between elements, for example:

Element 1
 
 
 
 
Element 2

Happy Coding!

That is it for this tutorial. With the information provided here, a bit of practice, and some creativity, you will be creating beautiful pages, comments, and posts in no time. As always, if you have problems, check out the Profile & Thread Design forum on the Message Board, and if you can't find an answer, our support team is always happy to assist.