Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Bbcode Guide


  • Please log in to reply
15 replies to this topic

#1 Matthew Alan

Matthew Alan

  • Members
  • 105 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Tennessee
  • Local time:02:18 AM

Posted 20 February 2007 - 06:44 AM

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:

[b]bold[/b]
[i]italics[/i]
[u]underline[/u]
[s]strikeout[/s]

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:

[color=blue]Sample text[/color]
[color=red]Sample text[/color]
[color=green]Sample text[/color]

(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.

[color=#556b2f]Dark Olive Green[/color]
[color=#87ceeb]Sky Blue[/color]


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:

[font=courier]Sample Text[/font]
[font=times]Sample Text[/font]

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

[size=6]Sample Font[/size]
[size=4]Sample Font[/size]

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

[size=-1]Sample Font[/size]
[size=-3]Sample Font[/size]


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:

http://google.com
[URL]www.google.com[/URL]
This is the most basic hyperlink, it transports to a specified URL.

Google
[URL=www.google.com]Google[/URL]
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.

me@domain.com

[EMAIL]me@domain.com[/EMAIL]
This will open a new email window addressed to the specified email address in your default email software.

Contact Me

[EMAIL=me@domain.com]Contact Me[/EMAIL]
An email address can also be disguised like a regular link, using similar syntax.



Images

An image can be displayed using IMG tags:

Posted Image
[IMG]http://utahreach.org/govt/pics/lincoln.gif[/IMG]
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:

Posted Image
[URL=www.google.com][IMG]http://utahreach.org/govt/pics/lincoln.gif[/IMG][/URL]
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
[LIST][*]List Item 1
[*]List Item 2[/LIST]
Notice the LIST tags are used in conjunction with the *s to indicate a new list item.

More advanced listings are as follows:
  • List Item 1
  • List Item 2
  • List Item 1
  • List Item 2
  • List Item 1
  • List Item 2
[LIST=1][*]List Item 1
[*]List Item 2[/LIST]


[LIST=a][*]List Item 1
[*]List Item 2[/LIST]


[LIST=i][*]List Item 1
[*]List Item 2[/LIST]


Quotes

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

I need scissors! 61!

I need scissors! 61!


[QUOTE]I need scissors! 61![/QUOTE]
[QUOTE=Colonel Campbell]I need scissors! 61![/QUOTE]


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:

[align=left]Sample Text[/align]
[align=center]Sample Text[/align]
[align=right]Sample Text[/align]

[align=left]Sample Text[/align]
[align=center]Sample Text[/align]
[align=right]Sample Text[/align]


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!d2
Metal Gear Ac!d[sup]2[/sup]

Subscript

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

x1 = 3 + x2
x[sub]1[/sub] = 3 + x[sub]2[/sub]


Horizontal Breaks

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

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:
/_me writes test code

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:
*[color=green][b]Matt[/b][/color] writes test code

You'll understand why when you see the product:

*Matt 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:

[HTML]<a href="http://www.google.com>Google.com</a>[/HTML]

<a href="http://www.google.com>Google.com</a>


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:
(tm) (c) (r)

are shortcuts to these: ™

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.
TEST  TEST   TEST

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. :thumbsup:

For use on BleepingComputer.com

Edited by Matthew Alan, 20 February 2007 - 06:48 AM.


BC AdBot (Login to Remove)

 


#2 Matthew Alan

Matthew Alan
  • Topic Starter

  • Members
  • 105 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Tennessee
  • Local time:02:18 AM

Posted 20 February 2007 - 06:47 AM

Yes I know about this one but I think this one is better.

#3 jgweed

jgweed

  • Members
  • 28,473 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chicago, Il.
  • Local time:02:18 AM

Posted 20 February 2007 - 10:02 AM

Members using Firefox can simplify the use of most of these codes by installing the extension, BBCodeXtra (2.5.6).
Regards,
John
Whereof one cannot speak, thereof one should be silent.

#4 DSTM

DSTM

    "Bleepin' Aussie Addict"


  • Members
  • 2,649 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SYDNEY-AUSTRALIA
  • Local time:05:18 PM

Posted 20 February 2007 - 10:28 AM

Yes I know about this one but I think this one is better.

Thanks for going to all the effort to help your fellow Members,'Mathew Alan' :thumbsup:















#5 Matthew Alan

Matthew Alan
  • Topic Starter

  • Members
  • 105 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Tennessee
  • Local time:02:18 AM

Posted 20 February 2007 - 02:03 PM

Members using Firefox can simplify the use of most of these codes by installing the extension, BBCodeXtra (2.5.6).
Regards,
John

I use firefox some but I never even skin it :flowers:


Yes I know about this one but I think this one is better.

Thanks for going to all the effort to help your fellow Members,'Mathew Alan' :thumbsup:

NP Man

Note to Mod: dont you think this one should be pinned instead of the other one?

Edited by Matthew Alan, 21 February 2007 - 02:57 AM.


#6 Matthew Alan

Matthew Alan
  • Topic Starter

  • Members
  • 105 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Tennessee
  • Local time:02:18 AM

Posted 29 June 2007 - 03:29 PM

giving this a bump so new users can see it :D

#7 Demon Cleaner

Demon Cleaner

  • Members
  • 1,383 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Chester uk
  • Local time:08:18 AM

Posted 30 June 2007 - 02:28 PM

Excellent tut there Matthew Allan

Demon Cleaner

#8 JohnWho

JohnWho

    Who was running the store?


  • Members
  • 2,611 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Tampa Bay Area, Florida, USA
  • Local time:03:18 AM

Posted 30 June 2007 - 02:50 PM

Nice work, Matt. Thanks for taking the time.

Might I add:


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.

TEST  TEST   TEST

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.


One of the "emoticons" on this board is a "spacer".

so -

TEST   TEST	   TEST

as you point out gives:

TEST TEST TEST

However, when done using the spacer emoticon gives:

TEST   TEST   :spacer:TEST

TEST TEST :thumbsup: TEST


One has to play with the "spacer" a bit to get the right effect, but a least it does provide a way to separate items.

It works between emoticons, too, so instead of them being right next to each other, like this:

:flowers: :inlove:

you can move them apart a bit, thusly:

:thumbsup: :spacer: :thumbup2:

gives:

:trumpet: :cool: :)

You can put more than one "spacer" together to get even more space.

Enjoy!

Edited by JohnWho, 30 June 2007 - 02:51 PM.


I know you think you understand what you thought I said,
but I'm not sure you realize that what you heard is not what I meant!


#9 tg1911

tg1911

    Lord Spam Magnet


  • Members
  • 19,274 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:SW Louisiana
  • Local time:01:18 AM

Posted 30 June 2007 - 03:48 PM

Or you could color your periods:

TEST..........................................TEST

TEST[color=#eef1f6]..........................................[/color]TEST

Edited by tg1911, 30 June 2007 - 03:49 PM.

MOBO: GIGABYTE GA-MA790X-UD4P, CPU: Phenom II X4 955 Deneb BE, HS/F: CoolerMaster V8, RAM: 2 x 1G Kingston HyperX DDR2 800, VGA: ECS GeForce Black GTX 560, PSU: Antec TruePower Modular 750W, Soundcard: Asus Xonar D1, Case: CoolerMaster COSMOS 1000, Storage: Internal - 2 x Seagate 250GB SATA, 2 x WD 1TB SATA; External - Seagate 500GB USB, WD 640GB eSATA, 3 x WD 1TB eSATA

Become a BleepingComputer fan: Facebook

#10 DocSatan

DocSatan

    Bleepin' Wanna-Be


  • Members
  • 2,156 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Boston, Ma.
  • Local time:03:18 AM

Posted 12 October 2007 - 04:33 AM

Or you could color your periods:

TEST..........................................TEST

TEST[color=#eef1f6]..........................................[/color]TEST



tg1911...That was a Sneaky Way of doing it!!! :thumbsup:

I love it! :flowers:

Edited by DocSatan, 12 October 2007 - 04:34 AM.


#11 ksky10081

ksky10081

  • Members
  • 63 posts
  • OFFLINE
  •  
  • Location:A little blue sphere.
  • Local time:03:18 AM

Posted 28 August 2009 - 01:57 PM

Some good stuff here that still works!

#12 RevGAM

RevGAM

  • Members
  • 723 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Milwaukee, Wisconsin, USA
  • Local time:02:18 AM

Posted 17 January 2012 - 10:34 PM

Thank you for this concise and very useful thread!

Glenn

Namaste, Peace & Love,
Glenn


If I have frustrated you, then I must be a student. If I've imparted information or a skill to you, then I must be a teacher. If I've helped you, then I must be a volunteer. If I've touched your life, then I must be happy!
If you had to choose between saving just your family, or saving 10,000 GOOD people (but not your family), what would you choose?


#13 RevGAM

RevGAM

  • Members
  • 723 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Milwaukee, Wisconsin, USA
  • Local time:02:18 AM

Posted 18 January 2012 - 11:35 AM

I thought it might be worthwhile posting the following links about BBCode so members will be able to learn:

What is BBCode and how do I use it? - a VERY brief intro

BBCode - BBCode home page with the following resources:
...BBCode tags reference Not as complete as BC's list.
...BBCode Examples Section
...BBCode Playground
...BBCode Guides
...BBCode Implementation
...BBCode Resources

And the best one: BleepingComputer's BBCode Help


I do have one question: I saw a post that mentioned that all tags can be simultaneously closed with a single command, but the command wasn't stated.
What I mean is something like a line with several BBCode tags at the front end, but only one tag at the end to close them all, sorta like this:
[ b][ i][ sup]This is it.[ /close all]
Does anyone know what that is?

Cheers!
Glenn

Namaste, Peace & Love,
Glenn


If I have frustrated you, then I must be a student. If I've imparted information or a skill to you, then I must be a teacher. If I've helped you, then I must be a volunteer. If I've touched your life, then I must be happy!
If you had to choose between saving just your family, or saving 10,000 GOOD people (but not your family), what would you choose?


#14 Animal

Animal

    Bleepin' Animinion


  • Members
  • 35,905 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Where You Least Expect Me To Be
  • Local time:11:18 PM

Posted 18 January 2012 - 02:07 PM

I do have one question: I saw a post that mentioned that all tags can be simultaneously closed with a single command, but the command wasn't stated.
What I mean is something like a line with several BBCode tags at the front end, but only one tag at the end to close them all, sorta like this:
[ b][ i][ sup]This is it.[ /close all]
Does anyone know what that is?

Cheers!
Glenn

I just tested that theory and for Bleeping Computer it does not work. Add to that not all BBCode commands are enabled either in IPS software or for the site specifically for one reason or another. So you may find references to specific BBCode commands that may work elsewhere but not work here.

The Internet is so big, so powerful and pointless that for some people it is a complete substitute for life.
Andrew Brown (1938-1994)


A learning experience is one of those things that say, "You know that thing you just did? Don't do that." Douglas Adams (1952-2001)


"Imagination is more important than knowledge. Knowledge is limited. Imagination circles the world." Albert Einstein (1879-1955)


Follow BleepingComputer on: Facebook | Twitter | Google+


#15 RevGAM

RevGAM

  • Members
  • 723 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Milwaukee, Wisconsin, USA
  • Local time:02:18 AM

Posted 19 January 2012 - 09:52 AM

Darn, I was hoping. I kinda figured some commands might not exist because BC has been customized. Thanks Animal! (is that from the Muppets, or completely unrelated?)

Glenn

Namaste, Peace & Love,
Glenn


If I have frustrated you, then I must be a student. If I've imparted information or a skill to you, then I must be a teacher. If I've helped you, then I must be a volunteer. If I've touched your life, then I must be happy!
If you had to choose between saving just your family, or saving 10,000 GOOD people (but not your family), what would you choose?





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users