What is BBCode?

Moderators: Community Manager, Moderators, Developers

Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:24

What is BBCode?
BBCode is a special implementation of HTML. Whether you can use BBCode is determined by the administrator. You can also disable it on a per post basis from the posting form. BBCode itself is similar in style to HTML: tags are enclosed in square braces [ and ] rather than < and > and it offers greater control over what and how something is displayed. For more information on BBCode see the guide which can be accessed from the posting page.


Where is this link that will give me more information about BBCode?
Any time you click on NewTopic, PostReply, or Quote your will be taken to the "Post a new topic" or the "Post a reply" window. Under the large box where you are supposed to insert the Message body text you will see a section labeled "Options". This section will, among other things, tell you if BBCode is turned on or off and the text "BBCode" should be a clickable link. If you click on that link, it will give you additional information about how to use BBCode to enhance your posts.

But I don't want to wade through all that text and it's confusing too!
At the very top of the Message body window are two rows of BBCode options which are available for use if BBCode is turned on. You may use them in at least two different ways. Using the first option, BOLD, as an example:

Method #1:
1. Click on the B button to turn BOLD text on.

2. Type in the text you wish to be bolded.

3. Click on the B button to turn BOLD text off.


Method #2:
1. Type all the text you wish to enter.

2. When finished, go back and highlight only those portions you wish to be bolded.

3. Click on the B button to add the BOLD tags to the highlighted text to make it appear in BOLD when displayed.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:25

What are Tags?
Tags are usually used in pairs and they are special codes to let the browser and forum software know how to display onscreen text and images.

As mentioned previously, there are a series of buttons at the top of the posting window. These buttons generate the following tag pairs on either side of your text:

B:

Code: Select all

[b] and [/b]
i:

Code: Select all

[i] and [/i]
u:

Code: Select all

[u] and [/u]
etc.

Notice that the tags are all very similar. They are text information enclosed inside square brackets and they are the same except that the ending tag has a "/" in front of the tag text.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:28

How to change the text color or size
To alter the color or size of your text the following tags can be used. Keep in mind that how the output appears will depend on the viewers browser and system:
Changing the color of text is achieved by wrapping it in [color=][/color]. You can specify either a recognised color name (eg. red, blue, yellow, etc.) or the hexadecimal triplet alternative, eg. #FFFFFF, #000000. For example, to create red text you could use:

Code: Select all

[color=red]Hello![/color]
or

Code: Select all

[color=#FF0000]Hello![/color]
will both output Hello!

Changing the text size is achieved in a similar way using [size=][/size]. This tag is dependent on the template you are using but the recommended format is a numerical value representing the text size in pixels, starting at 1 (so tiny you will not see it) through to 29 (very large). For example:

Code: Select all

[size=9]SMALL[/size]
will generally be SMALL

whereas:

Code: Select all

[size=24]HUGE![/size]
will be HUGE!
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:29

Can I combine formatting tags?
Yes, of course you can; for example to get someones attention you may write:

Code: Select all

[size=18][color=red][b]LOOK AT ME![/b][/color][/size]
this would output LOOK AT ME!

We don't recommend you output lots of text that looks like this, though! Remember that it is up to you, the poster, to ensure that tags are closed correctly. For example, the following is incorrect:

Code: Select all

[b][u]This is wrong[/b][/u]
This is wrong ... even though it seems to work. If you use incorrectly paired tags it could lead to problems later.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:31

Quoting and outputting fixed-width text

Quoting text in replies:
There are two ways you can quote text: with a reference or without.
When you utilize the Quote function to reply to a post on the board you should notice that the post text is added to the message window enclosed in a quote block. This method allows you to quote with a reference to a person or whatever else you choose to put. For example, to quote a piece of text Mr. Blobby wrote, you would enter:

Code: Select all

[quote="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]
Mr. Blobby wrote:The text Mr. Blobby wrote would go here
The resulting output will automatically add: Mr. Blobby wrote: before the actual text. Remember that you must include the quotation marks "" around the name you are quoting -- they are not optional.

The second method allows you to blindly quote something. To utilise this enclose the text in quote tags without the equal sign or double quote marks. When you view the message it will simply show Quote: before the text itself.

Code: Select all

[quote]When you view the message it will simply show [b]Quote:[/b] before the text itself.[/quote]
When you view the message it will simply show Quote: before the text itself.
Note:
While using quotes is useful, there is almost never any reason to quote an entire passage as this simply duplicates information already in the forum. If you quote a long section of text made by another user, it is preferable to remove all text you don't need and replace it with ellipses (...) to indicate some text was removed. There is usually no need to retain more than a few words or a single sentence. If anyone wishes to read the original, all they need do is refer back to the original post.

I.E.:
Picard wrote:...

Quoting text in replies: ...
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:32

Outputting code or fixed width data
If you want to output a piece of code or in fact anything that requires a fixed width with a Courier-type font, you should enclose the text in code tags, eg.

Code: Select all

[code]echo "This is some code";
[/code]

Code: Select all

echo "This is some code";
/* Make a copy of this, make it read-only, and save it somewhere before editing this style sheet. */

/* If you play with the scrollbar colors, remember to save what is here already just in case. */
/* Its fairly hard to get a good combo that does not make the scrollbar look flat. You can delete */
/* them all to get the standard browser scrollbar. These only work in Internet Explorer 5.5 and */
/* up and Galeon for Linux and make the whole style sheet technically (though not really) */
/* invalid according to the w3c standards */
body {
	font-family: "verdana", sans-serif;
	font-size: smaller;
	color: #090161;
	background-color: White;
}

/* Useful for making notations that will displayed on the page, like footnotes or credit for a */
/* quote or something */
small { font-family: verdana, sans-serif; font-size: 9px; color:#000000; background-color:#afc6db }

/* These define how header levels look. I did not like the browser defaults and made these to my */
/* personal preferences. You can edit, but remember that if you change one you will have to */
/* change all of them to maintain the relative sizes */
h1 { font-family: verdana, sans-serif; font-size: 24px; color:#000000; background-color:#afc6db }
h2 { font-family: verdana, sans-serif; font-size: 20px; color:#000000; background-color:#afc6db }
h3 { font-family: verdana, sans-serif; font-size: 18px; color:#000000; background-color:#afc6db }
h4 { font-family: verdana, sans-serif; font-size: 16px; color:#000000; background-color:#afc6db }
h5 { font-family: verdana, sans-serif; font-size: 14px; color:#000000; background-color:#afc6db }
h6 { font-family: verdana, sans-serif; font-size: 12px; color:#000000; background-color:#afc6db }

hr { color:#003963; background-color: #afc6db }

/* Menubar buttons */
div.menuBar,
div.menuBar a.menuButton {
  font-family: "Times New Roman,Verdana,Tahoma,Arial";
  font-size: 8pt;
  color: #000000;
}

div.menuBar {
  background-color: #117DBC;
  padding: 10px 2px 10px 2px;
  text-align: left;
  margin-left:0px;
}

div.menuBar a.menuButton {
  background-color: #afc6db;
  border: 1px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  color: #000000;
  cursor: pointer;
  left: 0px;
  width: 130px;	/* Button fixed width */
  margin: 1px;
  padding: 2px 10px 2px 10px; /* top, left, bottom, right */
  position: relative;
  text-align: center;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

div.menuBar a.menuButton:hover {
  background-color: #afc6db;
  border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  color: #000000;
}

/* This is what you use for the main content area */
.main { font-family: "verdana", sans-serif;
	font-size: smaller;
	background-color: #afc6db;
	color: #090161;
	border-left-style: solid;
	border-top-style: solid;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: #000000;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 5px;
	padding-bottom: 5px
}

/* This is the style for the banner area */
.banner {
	font-family: "verdana", sans-serif;
	font-size: medium;
	background-color: #afc6db;
	color:#000000;
	border-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-color: #000000
}

/* This is the style for the entire right sidebar. */
/* Try not to edit this or the sidebar may be damaged. */
.rightside {
	font-family: "verdana", sans-serif;
	font-size: smaller;
	font-weight: normal;
	color: #090161;
	text-decoration : none;
	background-color: #afc6db;
	border-right-style: solid;
	border-right-color: #003366;
	border-left-style: solid;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-left-color: #6394bd;
	border-width: 1px;
	padding-bottom: 10px
}

/* This is for any text that goes in the right sidebar */
.right {
	font-family: "verdana", sans-serif;
	font-weight: normal;
	font-size: smaller;
	color: #090161;
	background-color: #afc6db;
	padding-right: 5px;
	padding-left: 5px;
}

/* This is for the section headers, used, for instance, on the Navigation text at the top of the */
/* right sidebar. Do not get this mixed up with the button style which looks very similar */
.section {
	font-family: "verdana", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FEAC3C;
	background-color: #117DBC;
	border-bottom-style: solid;
	border-bottom-color: #003366;
	border-right-style: solid;
	border-right-color: #003366;
	border-top-style: solid;
	border-top-color: #6394bd;
	border-left-style: solid;
	border-left-color: #6394bd;
	border-width: 2px
}

/* This is a style that determines how form submission buttons look. */
.button {
	font-family: "verdana", sans-serif;
	color: #003366;
	border-width: 2px;
	border-bottom-color: #003366;
	border-right-color: #003366;
	border-top-color: #6394bd;
	border-left-color: #6394bd;
	font-size: 11px;
	font-weight: bold;
	background-color: #AFC6DB;
	cursor: pointer
}

/* This is the style for the Project Honeypot tag */
.sefrur{color:#ffffff; font:bold 10px arial,sans-serif; text-decoration:none;}

/* This is what I use when I want to do example text in a span within a div container. */
/* Makes the example stand out against the normal text */
.example {
font-family: "verdana", sans-serif; font-size: 12px; background-color: #afc6db; color: #0000ff
}

a:link, a:visited, a:active {
color :#090161 ; font-weight : normal;  background : none
}

a:hover {
	color :#090161;
	font-weight : normal;
	text-decoration : none;
	background : #ffffff
}

a.hidden:hover { text-decoration : none; }

/* Use this for any transparent images used as a link to keep the browser from displaying the */
/* mouseover color. Note: Square brackets used as angle brackets cause a validation error. */
/* Example: [a class="img" href="http://www.link.com"][img src="link.gif" alt="link"][/a] */
/* The Opera browser does not perform properly, so it will still do the background color */
/* behind the graphic when the mouse is over it. */
a.img:hover {
	color : Red;
	font-weight : normal;
	text-decoration : none;
	background : none
}

/* For the links on the sidebar */

a.rightlinks:link, a.rightlinks:visited, a.rightlinks:active {
	font-family: "verdana", sans-serif;
	color: #090161;
	font-size: small;
	font-weight: bold;
	background : none;
	text-decoration: none;
}

/* Right side navigation bar */
/* End of navbar */
All formatting used within code tags is retained when you later view it. As you can see from my code tag sample above, long code lists are placed in a scrolling window to help conserve forum space.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:34

Generating lists

Creating an Un-ordered list:
BBCode supports two types of lists, unordered and ordered. They are essentially the same as their HTML equivalents. An unordered list ouputs each item in your list sequentially one after the other indenting each with a bullet character. To create an unordered list you use list tags and define each item within the list using [*]. For example, to list your favorite colours you could use:

Code: Select all

[list]
[*]Red
[*]Blue
[*]Yellow
[/list]
This would generate the following list:
  • Red
  • Blue
  • Yellow


Creating an Ordered list:
The second type of list, an ordered list gives you control over what is output before each item. To create an ordered list you use list=1 to create a numbered list or alternatively list=a for an alphabetical list. As with the unordered list items are specified using [*]. For example:

Code: Select all

[list=1]
[*]Go to the shops
[*]Buy a new computer
[*]Swear at computer when it crashes
[/list]
will generate the following:
  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes
Whereas for an alphabetical list you would use:

Code: Select all

[list=a]
[*]The first possible answer
[*]The second possible answer
[*]The third possible answer
[/list]
giving
  1. The first possible answer
  2. The second possible answer
  3. The third possible answer
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 00:35

Creating Links

Linking to another site:
phpBB BBCode supports a number of ways of creating URIs, Uniform Resource Indicators better known as URLs.

The first of these uses the url= tag; whatever you type after the = sign will cause the contents of that tag to act as a URL. For example, to link to phpBB.com you could use:

Code: Select all

[url=http://www.phpbb.com/]Visit phpBB![/url]
This would generate the following link, Visit phpBB! You will notice the link opens in a new window so the user can continue browsing the forums if they wish.

If you want the URL itself displayed as the link you can do this by simply using:

Code: Select all

[url]http://www.phpbb.com/[/url]
This would generate the following link: http://www.phpbb.com/
Additionally phpBB features something called Magic Links which will turn any syntactically correct URL into a link without you needing to specify any tags or even the leading http://. For example typing http://www.phpbb.com into your message will automatically lead to http://www.phpbb.com being output when you view the message.
Note:
When using Microsoft's Internet Explorer, your cursor will turn into a hand with a pointing finger when it is over what it thinks is an active link so, when your computer gives you the finger, it may send you to another website if you click!
The same thing applies equally to email addresses; you can either specify an address explicitly, like:

Code: Select all

[email][email protected][/email]
which will output [email protected] or you can just type [email protected] into your message and it will be automatically converted when you view.
Note:
You should never insert any email address in any message that is viewable by the public! There are enough problems with SPAMMERS without you giving them live addresses.
As with all the BBCode tags you can wrap URLs around any of the other tags such as (see next entry), , etc. As with the formatting tags it is up to you to ensure the correct open and close order is following. For example:

Code: Select all

[url=http://www.phpbb.com/][img]http://www.phpbb.com/images/phplogo.gif[/url][/img]
is not correct which may lead to your post being deleted so take care.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 09:45

Showing images in posts

Adding an image to a post:
phpBB BBCode incorporates a tag for including images in your posts. Two very important things to remember when using this tag are:
  1. many users do not appreciate lots of images being shown in posts and
  2. the image you display must already be available on the Internet (it cannot exist only on your computer, for example, unless you run a webserver!).
There is currently no way of storing images locally with phpBB (all these issues are expected to be addressed in the next release of phpBB). To display an image, you must surround the URL pointing to the image with img tags. For example:

Code: Select all

[img]http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_zps3bittjfu.png[/img]
Which would generate the image: Image

As noted in the URL section above you can wrap an image in a url tag if you wish, eg.

Code: Select all

[url=https://us1.magoia.com/][img]http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_zps3bittjfu.png[/img][/url]
would generate the image link: Image
Note:
Please note that while Microsoft windows in case insensitive, Linux, which is what most Internet websites use for hosting, is not. Any time you enter a link, you should be very careful to use the exact case and spelling or you may not get what you expect.
Picard
Squishem
Posts: 62
Joined: 10. Aug 2016, 09:41

11. Aug 2016, 10:05

Creating thumbnails

The above two sections lead inevitably to using url and image tags to create clickable thumbnails that will open a full sized picture in a new window. This can be useful if you wish to display a large number of images yet still have the page load sometime within the same year.

To do this, you will need two copies of each image, one will be the thumbnail or smaller sized picture to actually display in your post. The second will be the full sized picture that will display in the new window when you click on the thumbnail.

Usually, the thumbnail is much smaller in both size and dimensions compared to the original. That's why they are called thumbnails. In order for it to work, both images in each pair need to be available on the Internet.

Below you will find an example using some pictures I have on this website.

Why not use thumbnail pictures in posts to link to your larger pictures in the main Album?

Image

The thumbnail could be created much larger so that it was actually possible to see what it was without opening the main picture. Now, how did I do that!?

The link to the thumbnail is:

Code: Select all

http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_tn_zpsr1encz0l.png
To make it come up as a picture without showing the link, use image tags:

Code: Select all

[img]http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_tn_zpsr1encz0l.png[/img]
The link to the main picture is:

Code: Select all

http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_zps3bittjfu.png
To give a text link to the picture:

Code: Select all

[url=http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_zps3bittjfu.png]Magoia Logo[/url]
Then just replace the words with the image of the thumbnail!

Code: Select all

[url=http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_zps3bittjfu.png][img]http://i1314.photobucket.com/albums/t579/OceanHero1/Magoia_logo_tn_zpsr1encz0l.png[/img][/url]
Q.E.D.
Locked