Warbears.com
Warbear
Bedtime City Missions Shop Forum
 Forum Rules   FAQ   Search   

The Handy BBCode Style Guide

 
Post new topic   Reply to topic     Forum Index : Warbears -> Website and Forum
View previous topic :: View next topic  
Author Message
Captin Simpson
Bug Hunters Team Member


Joined: 03 Nov 2007
Posts: 4612
Location: LOVINGTON

PostPosted: Sat Apr 21, 2012 11:40 pm Reply with quote

~A Quick Guide to BBCode~

The Warbears forum using a special type of code for formatting and making text look pretty and fancy! In this guide I shall explain how to use each of the different tags in the WB forums along with some nifty examples.

~Some Basics~

There are some rules to BBCode which apply to all of the tags. The main one is that all code must start with the opening tags and end with the closing tags. The opening tags look like this:
Code:
[b]
[i]
[u]
[quote]
...

Opening tags are basically the tag's name in-between two square brackets and this tells the site that from that tag, until it reaches a closing tag, all of the text will hold that attribute. I will go through these attributes further down.

The closing tags look like this:
Code:
[/b]
[/i]
[/u]
[/quote]
...

They are similar to the opening tags except they have a forward slash in front of the tag's name. This tells the site where you want the code to end. To make it easier to understand all BBCode follows this rule:
Code:
[tag]The text you want formatted[/tag]

Let's look over the different tags shall we...


~Let's Code!~

The [ B ] Tag


This tag makes text go bold and can be used to emphasise something to other users. To use the [b] properly, look at the example below:
Code:
[b]The bold text goes here![/b]

Notice the rule that we looked at earlier is used in this bit of code. The text that I want to change does in-between the opening and closing tags.
If you were wondering, that code will create this post:
The bold text goes here!

The [ I ] Tag

This tag turns the text on it's side; what we in the biz call italics. Let's create a post using this code:
Code:
[i]Italic text goes here![/i]

...and it would look like this:
Italic text goes here!

The [ U ] Tag

We don't need rulers and pencils in Internet-land to create lines under our writing; we get the computer to do that! With BBCode, we use the [ U ] tag:
Code:
[u]Underlined text goes here![/u]

...and voilá:
Underlined text goes here!

The [ QUOTE ] Tag

Hey, don't you ever wonder what that quote button on each of our posts are for? Well, if you wanted to refer back to a user's comment you'd click that and respond away. We use the [ QUOTE ] tag in BBCode to do this:
Code:
[quote]Your quote goes here![/quote]

...which makes this:
Quote:
Your quote goes here!

We can also attribute quotes to people, or websites or just about anything you can type with a keyboard making a little adjustment to that code:
Code:
[quote="A wise man once"]Your quote goes here![/quote]

...gives you a properly attributed quote:
A wise man once wrote:
Your quote goes here!

Well... I think that's what he said...


The [ CODE ] Tag

I'll tell you a secret; I've been using a special BBCode tag to teach you how to code it yourself! It's called the [ CODE ] tag and it's the what has been making the example codes all green and fugly. Basically, everything written inside the [ CODE ] tags won't be formatted or even affected by BBCode. You could write any code and it won't format. It's useful for showing off your coding skills or, in my case, help explain how to do it. And for that, I am thankful!

The [ LIST ] Tag

When creating lists it's always helpful if we had some bullet points to show the different demands for your birthday gifts. For this we use the [ LIST ] tag:
Code:
[list][*]This is a list item [*]This is another[/list]

...we use an asterisk in square brackets [*] to show the bullet points; That's a nice easy way of looking at it. This code will make this:
  • This is a list item
  • This is another

What if we didn't want bullet points, what if we wanted a numbered list or a lettered list? Never fear, we'll use our trusty equals sign like we did from the [ QUOTE ] tag:
Code:
[list=1][*]This is first, [*]This is second, [*]This is third.[/list]
[list=a][*]This is A, [*]This is B, [*]This is C.[/list]

...and we get our ordered lists:
  1. This is first,
  2. This is second,
  3. This is third.

  1. This is A,
  2. This is B,
  3. This is C.


The [ IMG ] Tag

A picture paints a thousand words apparently and you can include them in your posts when you post more than 100 times. It's simple:
Code:
[img]The URL of your image[/img]

...or in other words...
Code:
[img]http://i.imgur.com/FfEJg.jpg[/img]

...Which after being approved by a moderator, you'll see your image grace our eyes:


The [ URL ] Tag

If it weren't for the hyperlink, the world wide web would cease to exist so it's important to know how to insert a clickable link into your posts. So you can, y'know, rick-roll. Again, you'll need 100 posts for this to work:
Code:
[url]http://www.warbears.com/[/url]

...will become clickable like this:
http://www.warbears.com/
You can add your hyperlink to a bit of text so everything looks a little cleaner. For this, again, we'll use the equals sign:
Code:
[url=http://www.warbears.com/]I'm text you can click[/url]

...and we get this:
I'm text you can click
Hey, I bet you didn't know that this can also work with email addresses:
Code:
[email]yourname@yourdomain.com[/email]

...you can drop me a line at:
yourname@yourdomain.com

The [ DICE ] Tag

I don't know what this one does. It's best you don't touch it, it might bite. If you understand it, please do explain it to me!

The [ COLOR ] Tag

You can change the colour of the text using the [ COLOR ] tag and this one's a little easier because it creates the code for you using some preset colours:
Code:
[color=red]C[/color][color=orange]O[/color][color=yellow]L[/color][color=green]O[/color][color=blue]U[/color][color=violet]R[/color]

...and you get:
COLOUR
But that's not it, you can use HTML colour codes to create your own custom colour scheme:
Code:
[color=#6A0888]I'm Purple[/color]
[color=#868A08]I'm (a horrible shade of) Yellow[/color]

...and we get custom colours:
I'm Purple
I'm (a horrible shade of) Yellow

The [ SIZE ] Tag

I wish I was BIG. With BBcode, you can change the size of your text to. It's easily done with the drop down menu at the top of the text box though you can code it yourself:
Code:
[size=9]I'm only diddy[/size]
[size=24]I'm only big[/size]

...The higher the number, the larger the text; Simples:
I'm only diddy
I'm only big

Using More Than One Tag

Great! We know how to format our text using BBCode but what if we wanted to have bolded and coloured text? Or we wanted our image to be hyperlinked? We can still use use the same BBCode except we need to be a little bit more careful.

When we start coding with one tag inside another things can get a little tricky and it's where BBCode can stop working! Never fear though, as long as we keep our coding clean and structured, we'll come across no problems. I'll show you an example.

I want to make this text red, have a size of 18 and to be bold. We'd structure it out like this:
Code:
[color=red][size=18][b]This is my text![/b][/size][/color]

Notice how the [ B ] tags close themselves INSIDE our [ SIZE ] tags which also close themselves inside the [ COLOR ] tags. We can expect our coding to have out desired result:
This is my text!

~BBCode Etiquette~

BBCode can be great but it's only good when people use it properly. For example having all of your text in red writing or having it all in bold isn't as easy to read as the unformatted text. Please use it sparingly

Another point is one of pet peeves: Not hyperlinking your [ IMG ] tags. Not only does it make it harder for your image to be seen before it has been validated but it puts a lot more work into validating it in the first place.
Code:
[url=http://i.imgur.com/FfEJg.jpg][img]http://i.imgur.com/FfEJg.jpg[/img][/url]

This saves time folks!

If there are any more, feel free to post below. I might even add it on!

~Conclusion~

There we have it. That's all there is to know about BBCode for use on these forums. I hope you've found everything clear and easy to understand but if you haven't, feel free to post a question and someone will help you with your problem!

Thanks, and Don't Forget To Be Awesome
_________________
^captincroc
Back to top
View user's profile Send private message Visit poster's website
Knyh Risotto
Bug Hunters Team Member


Joined: 05 Jan 2008
Posts: 2358
Location: BACKWARDS

PostPosted: Sat Apr 21, 2012 11:49 pm Reply with quote

<3 Well done!
_________________
Back to top
View user's profile Send private message Visit poster's website
Captin Simpson
Bug Hunters Team Member


Joined: 03 Nov 2007
Posts: 4612
Location: LOVINGTON

PostPosted: Sat Apr 21, 2012 11:58 pm Reply with quote

Knyh Risotto wrote:
<3 Well done!
Shocked
_________________
^captincroc
Back to top
View user's profile Send private message Visit poster's website
Constance Anderson



Joined: 08 Oct 2009
Posts: 1935
Location: World Hacker Organization (WHO)

PostPosted: Sun Apr 22, 2012 3:40 am Reply with quote

Knyh Risotto wrote:
<3 Well done!


Lol the irony. BTW, where did you get it?

Dice Roll:
Original Roll String: FREE INTERNET
REE-Sided Dice Results: 1
Original Roll String: FREE INTERNET
NTERNET-Sided Dice Results: 1


Last edited by Austinaria on Sun Apr 22, 2012 4:13 am; edited 1 time in total
Back to top
View user's profile Send private message Visit poster's website
Zeus Simpson



Joined: 06 May 2009
Posts: 1175
Location: The Ceiling.

PostPosted: Sun Apr 22, 2012 4:08 am Reply with quote

Huh. So thats what dice does.
_________________
Replaying the secret location because I forgot all the passwords
Back to top
View user's profile Send private message
Rowena Svoltaire
Quizaboom
Team Member


Joined: 08 Jan 2007
Posts: 3720
Location: UK, England

PostPosted: Sun Apr 22, 2012 4:02 pm Reply with quote

This is swell Captin but debating whether to move it to guides. Either way it gets a sticky!

PS loved the strategically placed bolded u's Kawaii
_________________
Back to top
View user's profile Send private message
Warts Smith
Comic Team Member


Joined: 21 Aug 2007
Posts: 2618
Location: United States

PostPosted: Sun Apr 22, 2012 4:06 pm Reply with quote

I must say, this is very informative, I have used BBCode for years and I still learned some stuff from this. Great job Cap! Applause
_________________
Back to top
View user's profile Send private message
Jonpatrick Smith



Joined: 18 Aug 2007
Posts: 1064
Location: Paradise

PostPosted: Sun Apr 22, 2012 4:10 pm Reply with quote

Wow somehow I never noticed there was a list tag. Nice one Cap.
_________________
"Common citizens? Wisdom? Is this some kind of a joke?" - Kristoph Gavin
Back to top
View user's profile Send private message Visit poster's website
Captin Simpson
Bug Hunters Team Member


Joined: 03 Nov 2007
Posts: 4612
Location: LOVINGTON

PostPosted: Sun Apr 22, 2012 6:24 pm Reply with quote

Rowena Svoltaire wrote:
This is swell Captin but debating whether to move it to guides.
I had spoken to Jurgen beforehand and he suggested that I put it in Website and Forum rather than Guides and Help.
_________________
^captincroc
Back to top
View user's profile Send private message Visit poster's website
Jurgen Smith
Quizaboom
Team Member


Joined: 19 Aug 2007
Posts: 547
Location: 19th Century Ganymede

PostPosted: Sun Apr 22, 2012 8:14 pm Reply with quote

Just because this is a forum guide, and the only sections for the Guides and Help are missions or BTC.
Back to top
View user's profile Send private message
Funny Lebowski
Bug Hunters Team Member


Joined: 07 Mar 2008
Posts: 2420
Location: In my room, trying to keep my hair down.

PostPosted: Sun Apr 22, 2012 8:28 pm Reply with quote

Well, in the BTC Guides and help, there's John's "Boredom ~ A State of Mind". That's got nothing to do with BTC, really.
_________________
Twitter
Back to top
View user's profile Send private message Visit poster's website MSN Messenger
Sobchak Lebowski
Translators Team


Joined: 04 May 2007
Posts: 1393
Location: Confirmed. Sending supplies.

PostPosted: Mon Apr 23, 2012 2:14 am Reply with quote

I think it should go in [uninteresting follow-up]
_________________
TUB THREAD.
For more threads of the week, visit www.warbears.com in like seven days or something
Back to top
View user's profile Send private message MSN Messenger
Leroy Simpson



Joined: 08 Dec 2009
Posts: 1968
Location: Bedtime City

PostPosted: Mon Apr 23, 2012 5:14 pm Reply with quote

I never knew what that dice one did...
_________________
Back to top
View user's profile Send private message Visit poster's website
Tango Totoro
Quizaboom
Team Member


Joined: 02 Jul 2008
Posts: 1277

PostPosted: Tue Apr 24, 2012 5:41 am Reply with quote

Nice guide.

I'm so glad that you've taken it upon yourself to inform your fellow Brits that they've been spelling color incorrectly, all these years.



heck yeh 'merica
_________________
Back to top
View user's profile Send private message
Ben Lebowski
Moderator


Joined: 04 Apr 2007
Posts: 2073
Location: United States

PostPosted: Thu May 03, 2012 10:03 pm Reply with quote

Code:
[dice][number of dice]d[number of sides on dice]+[any sort of number you want to add to the roll][/dice]


So
Code:
[dice]2d6+3[/dice]

comes out as
Dice Roll:
Original Roll String: 2d6+3
6-Sided Dice Results: (3, 1) + 3 (Total = 7)


yuuuupppp, extremely useful back in the days when we had a real legit roleplay section (oddeh's BTC:BN2 is pretty much like my first real memory from this site Kawaii)
_________________
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic     Forum Index : Warbears -> Website and Forum All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group   skin based on xand created by spleen.
Home | Bedtime City | Missions | Garage | About | Privacy
Warbears © 2005-2021 Gionatan Iasio, Warbears Ltd
This site requires Flash Player (ver. 9). Get it here