How to use BBCodes

by **Daniël** » Sat Feb 14, 2015 11:38 am

Knowing how to use BBCodes is a rather essential step from turning from a rookie to less of a rookie in the forum-world. To be fair, you can't really blame judging you when you place document locations between image-tags or even when you uploaded your animation as a attachment. It's the snobbishness that this website is all about and here I'll try to guide you through it and allow you to be just as, if not more, snobby as the rest of us. That's why I present to you...

How to use BBCodes

What are BBCodes?

BBCodes are the utterly simple coding language that is used on a lot of forums. It's a lot like HTML, but with much fewer options that are all there for visual reasons. The general rule for BBCodes goes [tag]*text or link goes here*[/tag]. It's used for making text bold, italic, underlines, but also for embedding images and video's into your animations.
So basically it's pretty useful to know a bit of BBCoding when you post on here a lot.

Text-editing

There aren't a whole lot of text editing functions, but the ones available are probably all you need anyway. The available tags you can use on DarkDemon are:

NONE

Code: Select all: NONE

BOLD

Code: Select all: [b]BOLD[/b]

ITALIC

Code: Select all: [i]ITALIC[/i]

UNDERLINED

Code: Select all: [u]UNDERLINED[/u]

COLORED

Code: Select all: [color=#00BFFF]COLO[/color][color=RED]RED[/color]

Small

Code: Select all: [size=75]Small[/size]

BIG

Code: Select all: [size=150]BIG[/size]

CENTERED

Code: Select all: [center]CENTERED[/center]

All sorts of combinations are also possible.

Code: Select all: [b][i][u][center][color=#FF0000]All sorts of combinations are also possible.[/color][/center][/u][/i][/b]

There are some interesting feats in the color coding, for example:

Placing the underline-tags inside the color tags, gives a different result than when you add the underline-tags outside of the color-tags.

You can use this website if you want to add gradients to your text.

Select the area next to this with your mouse: you can even make text transparent by writing 'color=transparent' in the opening color-tag!

Embedding

You can very easily embed a post with an image (or often more relevant here, an animation you made) by uploading the designated image to a hosting site. For this we have MyFiles on this website, but you can just as well use the free alternative imgur.
Once you've uploaded an image, you can embed it by right-clicking it and copying the image URL. You know you've probably copied the link correctly if the URL ends with a image file extension like '.gif', '.jpg' or '.png'. It's important that you copy the direct link to the image (not the page that it is on), otherwise the embedding won't work. Another way to tell if you did it correctly is by opening the link in a new tab and have only the image showing there without any website layout around it.
If you have correctly copied the image link, you can paste it inbetween the image-tags and post away.
Code: Select all
[img]http://thedarkdemon.com/download/file.php?avatar=1084_1403197942.png[/img]

So again, for doing this I simply right clicked my avatar and pressed 'Copy image URL', which it should be an option on most images, varying slightly, depending on your browser or language setting.
If you want an image to be smaller or bigger than its original, you can use tn-tags and write the preferred width of the image and it'll scale the whole image to that size.
Code: Select all
[tn=200]http://thedarkdemon.com/download/file.php?avatar=1084_1403197942.png[/tn]

This image will always be linking to its original image.

For embedding video's you simply need the YouTube or Vimeo video URL and paste that between video-tags. Sometimes YouTube links have a very messy URL however, but you'll always be able to get the URL you need under the 'Share' option of the video-page, where there's always a short link to the video.
Code: Select all
[video]http://youtu.be/vkqDoAYKG4A[/video]

phpBB [video]

You can also embed music from SoundCloud very easily by going to the page of the track and copying the URL of the page. Then just paste it into soundcloud-tags and you're set.
Code: Select all
[soundcloud]https://soundcloud.com/frazer-franklin/demoncast-1[/soundcloud]

https://soundcloud.com/frazer-franklin/demoncast-1

Linking

Links are often rather essential on this website. Luckily you can just paste a URL in your post and you don't really have to do anything with it for it to work. For example, this URL will link you to its destination, even though I didn't use a single tag on it: https://www.youtube.com/watch?v=vkqDoAYKG4A
If you want to link to a place on DarkDemon you can also just put down the URL and it will cut out the biggest part of the URL and boil it down to the part that makes them URL's differ from eachother. Again, no tags are used here: index.php

Now you might be thinking that URL-tags are useless now. Well, if you are, you're entirely wrong.
You can use URL-tags to cover up the link with text you want it to have, as is shown here:
Code: Select all
[url=https://www.youtube.com/watch?v=vkqDoAYKG4A]DarkDemon[/url]

DarkDemon

By adding color tags inside the URL-tags you'll also be able to color your links.
Code: Select all
[url=https://www.youtube.com/watch?v=vkqDoAYKG4A][color=#0080FF]DarkDemon[/color][/url]

DarkDemon

You can also use URL-tags to add a link to an image, simply by putting the image-tags in-between of the URL-tags.
Code: Select all
[url=http://thedarkdemon.com/memberlist.php?mode=viewprofile&u=1084][img]http://thedarkdemon.com/download/file.php?avatar=1084_1403197942.png[/img][/url]

Other stuff

So there are still a few basic tags left that are worth explaining.

If you feel like uploading something that would be better of not being shown immediately, because of a large amount of images or literal spoilers when discussing a show or something, there are the very useful spoiler-tags. You simply put whatever you wanted to post between those tags and there'll be an option for other members to either open them or not.
Code: Select all
[spoiler]Snape kills Dumbledore![/spoiler]

Spoiler:
Snape kills Dumbledore!

When you want to reply to a specific comment, it's very common practice to quote that person. This often doesn't require any BBCode skill as the quote button will automatically put the previous post between quote-tags, but I wouldn't be doing my job right if I didn't at least mention them. You can also use them to quote something or someone that isn't actually posted on this website.
Code: Select all
[quote]To be or not to be, that is the question.[/quote]

To be or not to be, that is the question.

You can specify who said what by putting it in the opening quote-tag.
Code: Select all
[quote="William Shakespeare"]To be or not to be, that is the question.[/quote]

William Shakespeare wrote:To be or not to be, that is the question.

You can quote a maximum of 3 quotes within eachother.
Code: Select all
[quote]So[quote]no[quote]more[/quote][/quote][/quote]

So
no
more

than that.

Also, if you want to quote a specific part of what someone posted here, but don't feel like editing it yourself. Select that part and press the quote button. It will only quote the part you have selected. This counts for both in the thread as the post editor (provided you're not just editing the post and the other comments are shown below it).

There's also an option to make lists, by using, you guessed it, list-tags. The basic format for this is putting all the points you want to cover in those text and have a bullet-tag ([*]) in front of every point of the list.
Code: Select all
[list][*]butter [*]eggs [*]milk[/list]

butter
eggs
milk
You can change to list format to an abc or 123 list by specifying in the opening tag with a 1 or an a.
Code: Select all
[list=1][*]butter [*]eggs [*]milk[/list]

butter
eggs
milk
Code: Select all
[list=a][*]butter [*]eggs [*]milk[/list]

butter
eggs
milk

Well, that wraps up this tutorial. I very much hope it was useful to you and if you have any questions or suggestions, feel free to leave them below or shoot me a PM.