View previous topic :: View next topic |
Author |
Message |
Captin Simpson
Bug Hunters Team Member
Joined: 03 Nov 2007 Posts: 4612 Location: LOVINGTON
|
Posted: Sat Apr 21, 2012 11:40 pm |
|
|
~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:
- This is first,
- This is second,
- This is third.
- This is A,
- This is B,
- 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 |
|
|
Knyh Risotto
Bug Hunters Team Member
Joined: 05 Jan 2008 Posts: 2358 Location: BACKWARDS
|
|
Back to top |
|
|
Captin Simpson
Bug Hunters Team Member
Joined: 03 Nov 2007 Posts: 4612 Location: LOVINGTON
|
Posted: Sat Apr 21, 2012 11:58 pm |
|
|
_________________ ^captincroc |
|
Back to top |
|
|
Constance Anderson
Joined: 08 Oct 2009 Posts: 1935 Location: World Hacker Organization (WHO)
|
Posted: Sun Apr 22, 2012 3:40 am |
|
|
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 |
|
|
Zeus Simpson
Joined: 06 May 2009 Posts: 1175 Location: The Ceiling.
|
Posted: Sun Apr 22, 2012 4:08 am |
|
|
Huh. So thats what dice does. _________________ Replaying the secret location because I forgot all the passwords |
|
Back to top |
|
|
Rowena Svoltaire
Quizaboom Team Member
Joined: 08 Jan 2007 Posts: 3720 Location: UK, England
|
Posted: Sun Apr 22, 2012 4:02 pm |
|
|
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 _________________
|
|
Back to top |
|
|
Warts Smith
Comic Team Member
Joined: 21 Aug 2007 Posts: 2618 Location: United States
|
Posted: Sun Apr 22, 2012 4:06 pm |
|
|
I must say, this is very informative, I have used BBCode for years and I still learned some stuff from this. Great job Cap! _________________
|
|
Back to top |
|
|
Jonpatrick Smith
Joined: 18 Aug 2007 Posts: 1064 Location: Paradise
|
Posted: Sun Apr 22, 2012 4:10 pm |
|
|
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 |
|
|
Captin Simpson
Bug Hunters Team Member
Joined: 03 Nov 2007 Posts: 4612 Location: LOVINGTON
|
Posted: Sun Apr 22, 2012 6:24 pm |
|
|
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 |
|
|
Jurgen Smith
Quizaboom Team Member
Joined: 19 Aug 2007 Posts: 547 Location: 19th Century Ganymede
|
Posted: Sun Apr 22, 2012 8:14 pm |
|
|
Just because this is a forum guide, and the only sections for the Guides and Help are missions or BTC. |
|
Back to top |
|
|
Funny Lebowski
Bug Hunters Team Member
Joined: 07 Mar 2008 Posts: 2420 Location: In my room, trying to keep my hair down.
|
Posted: Sun Apr 22, 2012 8:28 pm |
|
|
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 |
|
|
Sobchak Lebowski
Translators Team
Joined: 04 May 2007 Posts: 1393 Location: Confirmed. Sending supplies.
|
Posted: Mon Apr 23, 2012 2:14 am |
|
|
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 |
|
|
Leroy Simpson
Joined: 08 Dec 2009 Posts: 1968 Location: Bedtime City
|
Posted: Mon Apr 23, 2012 5:14 pm |
|
|
I never knew what that dice one did... _________________
|
|
Back to top |
|
|
Tango Totoro
Quizaboom Team Member
Joined: 02 Jul 2008 Posts: 1277
|
Posted: Tue Apr 24, 2012 5:41 am |
|
|
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 |
|
|
Ben Lebowski
Moderator
Joined: 04 Apr 2007 Posts: 2073 Location: United States
|
Posted: Thu May 03, 2012 10:03 pm |
|
|
Code: |
[dice][number of dice]d[number of sides on dice]+[any sort of number you want to add to the roll][/dice] |
So
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 ) _________________
|
|
Back to top |
|
|
|