Jump to content

BBCode 101
   (1 review)

soggymuse
  • Want to make your character's speech stand out or place emphasis on all the yelling instead of CAPSING IT ALL OVER THE PLACE? Find out how to be bold with BBCode. :D

    Type: Other

What is BBCode?

Well, without getting all technical (because honestly I don't understand that part of it), BBCode is a dumbed down version of HTML that lets admins let their members fancy up their posts without also letting them get up to no good and install bad scripts.

In other words, BBCode gives you a few wonderful options without giving you the entire list of HTML codes to work from. Nifty, right? Clear as mud, right?

Thankfully, you don't really need to know what BBCode is to use it. Otherwise, you'd need a whole other guide from someone far more knowledgeable than me.

How do you use BBCode?

DF and other sites with upgraded software have a rich text editor that means you don't need to worry about all that ugly code because you can just click a button and et voilé, your text is pretty.

Older sites (like the ever-popular JCINK) don't have that option so you have to use the tags. You've probably seen a bunch of <HTML> tags knocking around in your travels, and might even have used them yourself if you've installed skins or whatnot (and if you're a coder yourself, I have to wonder what you're doing here, unless you're here to judge my tutorial skills, in which case leave me alooooooone you big meanie). BBCode is a lot like HTML in the way that it isn't really like HTML at all.

To use BBCode, you surround the content you want to style (eg. "does my butt look big in this") with BBCode tags. With the exception of link tags (because they're speshul snowflakes), every BBCode needs an OPEN and a CLOSE, and the tags are enclosed in square brackets [ ].

Like this:

 
[open]
[/close]

(And no, there are no cookies for the Harry Potter reference because I ate them all.)

The brackets [ ] tell your browser "yo dude, it's clobbering coding time" so it can read the next bit as instruction rather than content. The forward slash / in the last tag tells your browser "oh hey, I'm done with the coding stuff, you can go back to your regularly scheduled awesome".

The full BBCode should then look something like this:

 
[b]This text will be bold.[/b]

What can BBCode do?

BBCode (and any code, really) is basically just an instruction so your browser knows what you want it to do. BBCode keeps these instructions very bare-bones (unless you add a ton of customs) and (usually) only affects the text, but there's still a nifty list of things you can do.

You'll notice that for the most commonly used, the tag inside the square bracket is made up of the initial of the style effect:

 
[b]Bold[/b]
[i]Italic[/i]
[u]Underline[/u]
[s]Strike-through[/s]

You can also do the following:

  • Make a link (see Links below)
  • Insert an image (see Images below)
  • Align your text left, center, right (see Alignment below)
  • Change the font type (see Fonts below)
  • Change the font size (see Fonts below)
  • Change the font colour (see Fonts below)
  • AND you can combine them for super mega spectacular spiffy overkill awesome!!!! (see Super Mega Spectacular Spiffy Overkill Awesome at the bottom)

Links

The tag for links is . You can use that as it is to actually show the full link :

 
[b][i]
[url]http://distant-fantasies-net[/url][/i][/b]

which will give you an active link like this: http://distant-fantasies-net, or you can use the option within the tag to pretty your links up instead:

 
[b][i]
[url=http://distant-fantasies-net]Distant Fantasies[/url]
[/i][/b]

which will give you a neater Distant Fantasies.

Images

You can add images the same way you use the first tag:

 
[b][i]
[img=http://images.distant-fantasies.net/public/style_emoticons/default/asmile15.png]
[/i][/b]

That particular link will give you a kiss! :* But you can use anything, really, so long as it's an image file and it's hosted somewhere on the internet.

Alignment

Do you want a title for your post? Are you writing a traditional format letter? Well, with alignment, you can!

NOTE: There are two schools of "thought" among the makers of forum software. On the one hand, you have places like IPB (on which DF is built) and Proboards, which use the simple style. On the other hand, you've got places like JCINK and... JCINK... who use the more complicated style. (I'm sure other forum softwares do too, I just can't think of any.)

Simple Style alignment tags are:

 
[b][i]
[center] Text goes here [/center]
[left] Text [/left]
[right] Text [/right][/i][/b]

That's all! It's just like using the bold, italic and underline tags.

Complicated Style isn't really that complicated, it just means more typing:

 
[b][i]
[align=center] Text goes here [/align]
[align=left] Text [/align]
[align=right] Text [/align][/i][/b]

Whichever you (have to) use, you can do nifty things like this:

Quote

Piper Kin

128 Borrowmore Lane

Alexandria

Elysia

Penteminas 28, 10015 XADear John,

I am writing this letter in order to prove to you how amazing and spifftacular the alignment tags are. How cool is this?!

Yours sincerely,

Piper Kin

Fonts

You can also change your font type, colour, and size if you don't like the site's default (especially useful if the site's default is 8px Comic Sans).

 
[b][i]
[font=Verdana] Teeeeeext [/font]
[color=purple] Purple text is purple [/color]
[size=12] HUUUUUUUGE [/size]
[/i][/b]

NOTE: The style of size depends on the forum software again. Some have x-small or xx-small or xx-large, etc, while some start at 0 and work up to 7, or even go into double digits. I've used 12 in this case, but you'll need to check with your chosen forum for actual "numbers".

To change the font colour, you can use either colour names (like purple or goldenrod, for which you can find a list here on Wikipedia, along with HTML and CSS and various other comparisons) or you can use hex or RGBA codes instead (though I don't recommend using codes if you're going to change the font colour on a regular basis because "#DC143C" is much harder to remember than "crimson").

 

Super Mega Spectacular Spiffy Overkill Awesome

 

You can combine BBCode tags the same way you can combine HTML and...other things that can be combined!

 

[center][b][u][size=24][font=courier new]Super Mega Spectacular Spiffy Overkill Awesome!!![/font][/size][/b][/center]

which would give you:

 

 

 

 

 

 

Pretty great for a title, huh?

 

Congratulations!

 

You are now the proud owner of new knowledge and a toolbox of nifty tricks! Don't abuse it. (Seriously. Rainbows are funny in out-of-character posts but not in IC ones.) Go forth and make me proud! :D


  • I read this! 1
  • Like 1



User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Lady Isadorabelle

   2 of 2 members found this review helpful 2 / 2 members

I've actually saved the link to this article to give to members who aren't familiar wit BBcode or in general have trouble remembering it. I liked how it was laid out and how you thoroughly explained open/close and put it in language that most people shouldn't have a hard time understanding.

 

My only recommendation would be to put software examples of simple and complicated styles but all in all, this is a very well written article! Thank you for sharing it.

Share this review


Link to review

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.