Introduction / Basic Effects

I decided to produce a guide to BBCode usage to improve general awareness of how useful it can be around the forum. So basically, all BBCode 'tags' are used in the same way. When using MS Word or a similar program, you highlight the text and apply an effect, such as italics or bold. When using BBCode, the highlighting and the effects are applied at the same time. For example, the most basic applications are underline, bold, italics and strikeout.

bold
italics
underline
strikeout

Translate as:

BBCode tags are placed around the text you want the effect to be applied to.


Colour

Colour tags are slightly more complicated than the basics above, in that the colour needs to be specified in the tags. Example:

Sample text
Sample text
Sample text

Translate as:

(Note the American spelling of 'color') Basic colours such as red, blue, purple, orange, etc. can be used, but for more choice of colour go to the IF Skin Zone Color Chooser, which allows you to specifiy a colour using a hexadecimal code.

Dark Olive Green
Sky Blue
The colour specification is replaced by the hex code.

Font

BBCode can be used to change font also; just about any font can be used, but they are generally not viewed by other users.
They are used like colour tags, in this fashion:

Sample Text
Sample Text

Translated:

A range of fonts can be used, the best way to test whether it is valid or not is to sample it in a post.


Size

Font size can be changed using BBCode. The standard size (the one in which I'm typing the majority of this) is 1. You edit font in the same way as you edit colour and font.

Sample Font
Sample Font

Sizes can be set extremely high (I don't know of any limits), but you can also set them low using negative values. Example:

Sample Font
Sample Font

Hyperlinks and Images


URLs and Email

Various hyperlinks can be manipulated, to allow transportation to websites, images, downloads, etc. I'm going to dive straight into the examples here:

www.mgsforums.com

This is the most basic hyperlink, it transports to a specified URL.

MGSForums

Notice that with this one the same URL is transported to, but it's disguised with a given title. Notice the syntax, the URL is specified within the first tag with the title disguise in the centre.

malachite@hotmail.co.uk

This will open a new email window addressed to the specified email address in your default email software.

My email

An email address can also be disguised like a regular link, using similar syntax.



Images

An image can be displayed using IMG tags:

Alternatively an image can be hyperlinked to as if it were a website (see URLs and Email).

As you might expect, a URL can be attached to an image. This is the syntax:

This is very complicated in comparison to other applications (as it features more than one set of tags.)


Lists

Various methods of listing can be implemented using BBCode. The most basic is a bulletpointed list:

• List Item 1
• List Item 2

Notice the LIST tags are used in conjunction with the *s to indicate a new list item.

More advanced listings are as follows:

1. List Item 1
2. List Item 2

1. List Item 1
2. List Item 2

1. List Item 1
2. List Item 2

Quotes

Quoting is relatively simple. It includes a basic and advanced structure, the latter including who posted the quote. Example:

Code

When attempting to specify code without actually applying the effects, you need to use CODE tags.
I can't show you them for suntax reasons, but they work just like basic QUOTE tags, in that the word QUOTE is replaced with CODE (and /CODE for the closing tag)


Alignment

A tag which is particularly useful (especially in signatures) is alignment. The following syntax is used:

Superscript/Subscript

These are less commonly used, but very useful to know. Eg.

Superscript

Superscript text appears in a higher position than regular text:

Metal Gear Ac!d²

Subscript

Subscript text does the opposite, in that the text appears at the bottom.

x₁ = 3 + x₂

Horizontal Breaks

Useful for recruitment topics or large guides such as this; you can use this:

to create a horizontal break in the page:

---

Activity Inserts

Not sure what this is strictly called; but here goes: using the following code (commonplace on IRC Chat Rooms) will generate an 'Activity Insert'. I'm not sure how to define them, so I'll use an example:

N.B.: in practical use, the underscore between the / and the me is removed. For coding purposes, I've spaced them, as IF immediately converts this code as the following:

You'll understand why when you see the product:

*ADJ writes test code

Thanks to Solide18 for that amazing find, and for the explanation I paraphrased.


HTML Box

This just makes putting HTML in a bit easier. Instead of using the CODE Box, you can use this; different areas are highlighted in different colours, which makes reading it easier. Example:

I'm assuming areas will appear in different colours. You might have to mess about a little with that one, but it should all go fine.

Shortcuts with Copyright, Trademark, etc.

The following:

are shortcuts to these: ™ © ®

Spoiler Tags

Basically makes a wee box which you can toggle as showing or not showing whatever's inside. Useful in the Gaming/Movie Forums, MGS4, etc.

[spoiler]DC > You[/spoiler]

I can't really show you the proper code 'cause it actually makes it into a spoiler tag: it needs to be lower case or it won't work. This doesn't seem to be true of any of the other tags. And bear in mind this is javascript, so it'll be the last thing to load in a thread (maybe wait 'til it's all loaded before you go in an MGS4 topic, yeah?)

Even More Hints and Tips

Something I've noticed recently is the automatic deletion of multiple spaces. Essentially any amount of spaces greater than one in sequence will be defaulted to one. Also, the use of [TAB] (an indentation) will be ignored. Try it, it just doesn't work. In the example below, the first two words are seperated by two spaces; the second and third words are seperated by three.

This is read as:

TEST TEST TEST

The excess spaces are ignored. Something you're not going to frequently have trouble with, but useful to know.

Conclusion

Hope you found the above info useful; if you have any queries or questions, feel free to PM me and I'll be glad to deal with your problem. :)

This would be very helpful to some people. I'll pin this. :)

Yeah thats pretty useful info, half that stuff i didnt know thanks ADJ.

Nice ADJ.

Thanks guys, glad I could be of help. :)

Wicked thanks ADJ :)

*UPDATE*

I'm adding a section on Superscript and Subscript tags. :)

Cool, but it kinda confused me. Are you just doing examples of the small numbers?

Yeah, I should probably clarify that; superscript text appears near the top (like the index of a number), and subscript is at the bottom. :)

I'm also adding the horizontal break, and shortcuts with copyright, trademark, etc.

Great job. Also, you can use the Photoshop teardropper tool for custom colors.

---

Sweet, great job ADJ.

Thanks. :)
Coincidently I put in an Even More Hints and Tips section which deals with the use of multiple spaces; hopefully I'll think of more to go there in the future.

I noticed that if you type code like this in IF forums, the result is samelike in IRC chat.

example...

it will shown like this:

*Solide18 goes to home...


EDIT: type the / and me with no space!!!!

Ooh nice!

*Ocelot05 congratulates Solide18 :P

*Puppy likes to eat popcorn. ^_^

Nice find.

Awesome; I'll go add it to the guide now. :)

Thanks, now i got some respect from MGSforums.com! Yay! :haha:

I didn't know anything of this

Well, that's why I wrote it. :D

In terms of updates, I think that's all of the basic Invision tags. If anyone finds another please tell me. :)

Hey ADJ i'm not sure if i missed it, but are spoiler tags available on this forum?

Nope, they slowed the board down to a crawl, if I remember.

I use / me code on MSN Plus.

---

Thanks ADJ, if this forum had rep, after I was done you'd be drowning in rep points :)

*JCC slaps ADJ on the back.

*Sigint pushes JCC away and slaps ADJ on back

cool it works.

Great list !

*JCC cries, but in a manly fashion, then throws handbag at Sigint

:P

Okay okay. No need to keep going on with them :)

Thanks guys; I'm just going to put in an HTML bit, which probably won't be used much, but's nice anyways.

Thats great, but isnt HTML OFf on MGSF? Which is a shame to be honest, some things are much simpler to do.

Yes; but that's used for providing a section of HTML coding, it doesn't execute. Just if you were providing a hack or something. ;)

I'm having trouble Quoting other peoples posts.. I mean, everytime i do it, i have to go through the long and painfull process of writing all the quotes out... How do i quote other peoples posts? :unsure:

EDIT: What i meant to say was how do you break up other peoples posts, so you can write stuff in between what they've written...

Sorry for bumbing...

You bumped an eight month topic to ask a question answered by looking at the button that clearly says quote on it?

Meh hes still young, besides the topic is pinned.

Young? He was born in '85!! That's 6 years older than you, and 8 years older than me.

I think this topic should be locked to prevent anything like this happening again.

Its a valid question. So no.

To quote with many different parts. you can either click the quote button. (Top right side of the post theres a few buttons)

Or in the big post screen, Click the quote tab. Copy and paste the test in. then close the quote tag. Repeat however many times.

Sorry you must've misunderstood, well different perspective anyway. Like young to the fourms I mean.

Hi, sorry to cause you guy's more trouble, but I'm having trouble downloading my Avatar from my Computer.. I've downloaded the image and it's on my computer.. So from there I click on browse, click on the image, and then open it.. Then i go to update avatar, and a message appears saying: "you are not allowed to upload that file as an Avatar".. If sombody could kindly explain to me in detail what i'm doing wrong, i'lld really appreciate it. :thumb:

File Type? File Size?
Its better to just post a URL in there than upload one.

God.. I'm sorry.. How do i do that? :unsure: .. I have been reading the Help section, but i'm still alittle confused.. How do i post a URL?.. Say, i wanted an Avatar from www.iconator.com, how would i get one from there.. I am new to all this.. Do i have to pay for the Avatar?.. Do i have to be a member of the website that the Avatar is on?.. So many questions... So confusing..

Find the image you want, Make sure its suitable and not over sized.
Right click the image and click on properties.
Where it says Address URL, Copy the URL and paste it into the part where it says "Enter a URL to an online avatar image".

Alternatively, you can save the file to you computer, and then upload it using IsaraPIX. Then just copy the direct image link and paste it into the appropriate field.

YESSSSSSSSS!!! I HAVE DONE IT! Thanks for the help the_cobbinator and Fierce deity...