Register | Sign In


Understanding through Discussion


EvC Forum active members: 63 (9161 total)
3 online now:
Newest Member: popoi
Post Volume: Total: 915,581 Year: 2,838/9,624 Month: 683/1,588 Week: 89/229 Day: 61/28 Hour: 0/3

dBoard: What are dBCodes?

dBCode Descriptions

dBCodes are a variation on the HTML tags you may already be familiar with. They allow you to add functionality or style to your message that would normally require HTML. You can use dBCodes even if HTML is not enabled for the forum you are using. You may want to use dBCodes as opposed to HTML, even if HTML is enabled for your forum, because there is less coding required and the preview panel includes syntax checking. In the following examples the dBCodes and their arguments are in this color.

Contents:

[B], [I], [EMP], [S], [ST], [U], [UL]Bold, Empasis, Italic, Strikethrough and Underlining
[BGCOLOR]Text Background Color
[BLOCKCOLOR]Block of Background Color
[CODE]Explicit Formatting
[COLOR], [FACE], [SIZE]Face, Color and Size
[EMAIL]Email Links
[EMP]Emphasis
[FID]Linking to Forums
[FORUM]Linking to Forums
[HTML]Including HTML Code in Messages
[IMG]Adding Images
[INDENT]Indentation
[LATEX]Latex
[LIST]Bullets/Lists
[MBRID]Linking to Members
[MID]Linking to Messages using Message ID's
[MSG]Linking to Messages using Message Numbers
[NOPARSE]Including dBCodes in Messages
[QUOTE], [QS]Quoting from Messages and Other Sources
[TABLE], [ROW, [COL]Creating Tables
[THREAD]Linking to Threads
[THUMB]Adding Thumbnails
[TID]Linking to Threads
[TWEET]Adding Tweets
[URL]URL Hyperlinking
[UTUBE]YouTube Videos
[YOUTUBE]YouTube Videos

URL Hyperlinking
There are four ways to include a link in your message:

  • The simplest way to include a link is to simply type the URL. Called autolink mode, it works with URLs that begin with "http://", "https://" and "ftp://":
    http://www.mywebsite.net
    It would appear like this in your message:
    http://www.mywebsite.net
  • If the URL begins with "http://www" then you don't even need the "http://" portion:

    www.mywebsite.net
    It would appear like this in your message:
    www.mywebsite.net
  • You can instead give your link a name using the [url] code. For example, if you wanted the URL "http://www.mywebsite.net" to display as "My Web Site" then just use the following format which places the desired name after the "=" sign inside the [url] code:
    [URL=http://www.mywebsite.net]My Web Site[/url]
    It would appear like this in your message:
    My Web Site
  • If you do not include a name by using the "=" sign then the displayed link name will be the same as the URL:
    [url]www.mywebsite.net[/url]
    It would appear like this in your message:
    www.mywebsite.net
When clicked on, links created in the above ways will be opened in a new window. Note that you should NOT use quotation marks inside the URL tag.
Bold, Italics, Strikethrough and Underlining
You can make text bold, italicized, emphasized, struckthrough or underlined by surrounding it with the [b], [i], [e] , [emp] , [s], [st], [u], or [ul] tags. The [s] and [st] tags are synonyms, and the [u] and [ul] tags are also synonyms. This text:

Hello, [b]James[/b]
Hello, [i]Mary[/i]
Did you forget [s]Scott[/s]
Be sure to remember [u]Heathcliff[/u]
And most importantly there's [emp]Reginald[/emp]

Would display like this:

Hello, James
Hello, Mary
Did you forget Scott
Be sure to remember Heathcliff
And most importantly there's *Reginald*

The [e] dBCode allows you to combine any of the font modifiers by entering [e=<font-modifiers>]. Each modifier is represented by a single character:

asterisk a
bold b
italicized i
struckthrough s
underlined u
For example, this combines asterisks, bold and underlined:
Goodbye, [e=abu]James[/e]

It would display like this:

Goodbye, *James*

The order of the modifier characters does not matter.

Face, Color and Size

You can make text in any font, color or size by using the [face], [color] and [size] tags.

A size of 1 means 1 times the current size, of 2 means 2 times the current size, and so forth. Decimal values are permitted. For example this:

[face=monotype corsiva][color=lightgreen][size=1.5]This text should display using the Monotype Corsiva font with a size 1.5 times larger than the current font size and light green in color. [/size][/color][/face]

Would display like this:

This text should display using the Monotype Corsiva font with a size 1.5 times larger than the current font size and light green in color.
Text Background Color
You can change the background color of the text to any color you like using the [bgcolor] tag.

[bgcolor=green]The text in this paragraph should be white with a green background color.[/bgcolor]
Block of Background Color
The [bgcolor] dBCode only changes the background of text. Wherever text doesn't appear the original background color is still present. The [blockcolor] dBCode changes the background color of a rectangular block.

[blockcolor=green]
The text of these two paragraphs should be white with a green background color.

The green background should fill the entire rectangular area behind all text and images.

[/blockcolor]
To add a hyperlinked email address within your message, just encase the email address as shown in the following example:

[email]admin@evcforum.net[/email]

This will result in a link like this that starts your email tool to send a message:

admin@evcforum.net

You can also use this form to provide text different from the email address:

[email=admin@evcforum.net]Contact Us[/email]

The resulting link will look like this:

Contact Us
Bullets/Lists
You can make bulleted lists or ordered lists (by number or letter).

Unordered, bulleted list:

[list]
[*] This is the first bulleted item.
[*] This is the second bulleted item.
[/list]

This produces:

  • This is the first bulleted item.
  • This is the second bulleted item.

Note that you must include a closing [/list] when you end each list.

The bullet symbol can be changed to circle outline or a square by using either [list=circle] or [list=square], for example:

[list=square]
[*] This is the first bulleted item.
[*] This is the second bulleted item.
[/list]

This produces:

  • This is the first bulleted item.
  • This is the second bulleted item.

Making ordered lists is just by adding a numeric or alphabetic starting value such as [list=A] or [list=1]. Typing [list=A] will produce a list from A to Z. Using [list=1] will produce numbered lists. You can also begin a list at any value, such as [list=E] or [list=27]. Changing the starting letter to lowercase generates a list using lower case letters.

Here's an example:

[list=A]
[*] This is the first bulleted item.
[*] This is the second bulleted item.
[/list]

This produces:

  1. This is the first bulleted item.
  2. This is the second bulleted item.

Lists can also use uppercase and lowercase Roman numbers by adding the "R" or "r" parameter as in [list=1,r] or [list=5,R], for example:

[list=1,R]
[*] This is the first bulleted item.
[*] This is the second bulleted item.
[/list]

This produces:

  1. This is the first bulleted item.
  2. This is the second bulleted item.

Lists can also skip values by assigning the asterisk a value as in [*=5], for example:

[list=1]
[*] This is the first bulleted item.
[*] This is the second bulleted item.
[*=5] This is the third bulleted item but it is numbered 5.
[*] This is the fourth bulleted item but it is numbered 6.
[*=13] This is the fifth bulleted item but it is numbered 13.
[*] This is the sixth bulleted item but it is numbered 14.
[/list]

This produces:

  1. This is the first bulleted item.
  2. This is the second bulleted item.
  3. This is the third bulleted item but it is numbered 5.
  4. This is the fourth bulleted item but it is numbered 6.
  5. This is the fifth bulleted item but it is numbered 13.
  6. This is the sixth bulleted item but it is numbered 14.
Adding Images
Include images in your messages using the [img] dBCode is very similar to the [img] dBCode. The default width of the displayed image in your message is its actual width until it approaches the width of your message. Hovering over an image that is being displayed smaller than its actual size will display a little magnifying glass icon. Clicking on it will expand the image to its full size. You can optionally specify the width of image by including a numeric argument. This will display an image in your message width of 300 pixels:

[img=300]http://www.mysite.com/images/dbExample.gif[/img]

You can supply multiple images to the [img] dBCode by separating them with commas. It will display the images on a single line. This example includes a line break after the comma so it fits in the browser window, but do not do this in actual use:

[img]http://www.mysite.com/images/dbExample.gif,
http://www.mysite.com/images/editExample.gif[/img]

The [img] dBCode can accept optional case-insensitive arguments:

  • <value> - the width of the displayed image in pixels
  • center - center the images on the page (default)
  • left - left justify the image on the page
  • right - right justify the image on the page
  • floatleft - left justify the image on the page and allow text to flow around the image
  • floatright - right justify the image on the page and allow text to flow around the image
  • backwards - display the image backwards
  • upsidedown - display the image upside down
  • caption - include a caption for your image by following the word "caption" with a colon and then with the text of your caption, e.g., "caption:This is my caption, my caption"
  • width - this is a numeric value for the width in pixels of the images. The default is 100.
  • height - If you specify the width then you can also specify a height by following the width with an "x" followed by the height in pixels, e.g., 100x200. The default is a height that maintains the aspect ratio.
  • spin - Causes the image to spin. Accepts several properties in any order separated by colons:
    • Time for one rotation in s (seconds) or ms (milliseconds), e.g., 10s.
    • Number of times it should spin, e.g. 10 or infinite
    • Direction of spin, default is cw (clockwise), or use cc (counter-clockwise)
    • Example: spin:5s:infinite:cw

For example:

[img=200,right]http://www.mysite.com/images/dbExample.gif[/img]
Adding YouTube Videos
To include a YouTube video in your message, just include the URL of the video in the [youtube] or [utube] dBCode like this:

[utube=http://www.youtube.com/watch?v=YRxS8IVQRcs&feature=related]

All that is actually required is the code. This will also work and is much shorter:

[utube=YRxS8IVQRcs]

By default the YouTube video will be left justfied, but it can be centered by including the center argument:

[utube=center,YRxS8IVQRcs]

You may also specify a width and height separated by commas. Their order in relation to the YouTube code or URL is unimportant, but the width is assumed to be first. If you only specify a single numeric value then it is assumed to be the width and the height is scaled to match to provide a 16:9 aspect ration. All of these examples (using just the YouTube code for brevity) will work:

[utube=520,450,YRxS8IVQRcs]
[utube=520,YRxS8IVQRcs,450]
[utube=YRxS8IVQRcs,520,450]
[utube=520,YRxS8IVQRcs]

You may also specify a start time for the video by using the "t=" construct specifying the hours, minutes and seconds:

[utube=520,450,YRxS8IVQRcs,t=23s]
[utube=520,450,YRxS8IVQRcs,t=5m23s]
[utube=520,450,YRxS8IVQRcs,t=1h5m23s]
[utube=520,450,YRxS8IVQRcs,t=1h5m]
[utube=520,450,YRxS8IVQRcs,t=1h]

Though the YouTube code is all that is really necessary, for completeness note that YouTube also offers a short form of their URL:

[utube=http://youtu.be/YRxS8IVQRcs]

Adding Thumbnails
The [thumb] dBCode is a synonym for the [img] dBCode.

Adding Tweets
You can add tweets to your messages using the [tweet] dBCode. Every tweet on twitter has a little down arrow in the upper right hand corner. Click on the arrow and select "Copy link to Tweet". Now paste it into your [tweet] dBCode so that it looks like this:

[tweet=https://twitter.com/Oprah/status/1149543001569427461]

The full URL is not required. You only really need the ID. For example this would work just as well:

[tweet=1149543001569427461]

By default tweets are left justified, but they can be centered using the 'center' option. Separate it from the URL or ID with a comma. It doesn't matter which comes first:

[tweet=1149543001569427461,center]

Your tweet should look like this:

By default tweets are light, but they can be made dark using the 'dark' option. Separate it from the other parameters with a comma, it doesn't matter which comes first:

[tweet=1149543001569427461,center,dark]

Your tweet should now look like this:

Quoting from Messages and Other Sources
To quote any text, just enlose the text in [quote] dBCodes as shown below:

[quote] Ask not what your country can do for you....
ask what you can do for your country.[/quote]

This produces this result:

quote:
Ask not what your country can do for you....
ask what you can do for your country.

You can optionally include the quote's author, by default appearing at the top, or at the bottom using the bottom property. For example, this places the author at bottom. The property can appear before or after the author, separated by either a comma or semicolon:

[quote=John F. Kennedy,bottom] Ask not what your country can do for you....
ask what you can do for your country.[/quote]

This produces this result:


Ask not what your country can do for you....
ask what you can do for your country.
  —John F. Kennedy

But by default the quote's author appears at the top. Though a "top" property exists, it isn't needed:

[quote=top,John F. Kennedy] Ask not what your country can do for you....
ask what you can do for your country.[/quote]

This produces this result:

John F. Kennedy:
Ask not what your country can do for you....
ask what you can do for your country.

If you include multiple arguments and they will appear as a comma separated list. Also, commas can be included by escaping them with a backslash, e.g.:

[quote=New York Times\, Inc., bottom] All the news that's fit to print.[/quote]

This produces this result:


All the news that's fit to print.
  —New York Times, Inc.

Though it isn't illustrated here, quotes can be nested within one another.

There is also a shaded version of quoting:

[qs] Ask not what your country can do for you....
ask what you can do for your country.[/qs]

This example yields this appearance:

Ask not what your country can do for you....
ask what you can do for your country.

And you can optionally provide the name of the person being quoted:

[qs=John F. Kennedy]Ask not what your country can do for you....
ask what you can do for your country.[/qs]

Which would look like this:

ILikeHistory writes:

I was thinking about what John F Kennedy said over half a century ago.

You can instead provide the message number you're quoting from if it's in the same thread:

[qs=241]I was thinking about what John F Kennedy said over half a century ago.[/qs]

Which would look like this:

ILikeHistory in Message 19 writes:

I was thinking about what John F Kennedy said over half a century ago.

Creating Tables
You can create tables using the [table], [row] and [col] dBCodes. The table codes can accept any CSS. The [table] code additionally accepts the "borders" and "center" arguments. The "borders" argument puts borders around all the cells of the table. The "center" argument centers the table.

The [row] code additionally accepts the "header" argument, which causes all the cells of the row to be bold, centered horizontally within the cell, and aligned at the bottom of the cell. Extraneous white space in a table is ignored.

Here is an example of using dBCodes to create a simple table:

[table=borders; color: blue; background-color: tan; width: 400px]
  [row=header]
    [col]
      Animal
    [col]
      Males
    [col]
      Females
    [col]
      Total
  [row=text-align: center]
    [col]
      Cats
    [col]
      22
    [col]
      15
    [col]
      37
  [row=text-align: center]
    [col]
      Dog
    [col]
      51
    [col]
      53
    [col]
      104
[/table]

This produces this result:

Animal Males Females Total
Cats 22 15 37
Dogs 51 53 104
As can be seen in the example, CSS rules (a property and a value separated by a colon) can be used as values for the [table], [row] and [col] dBCodes. Separate multiple rules with semicolons. [col] inherits the CSS property values from [table] and [row], and both [col] and [row] inherit the CSS property values from [table].

Linking to Messages using Message Numbers
Messages in threads are assigned numbers in increasing order. The first message of a thread is message 1, the second message is message 2, and so forth. A link to a message can be created using the [msg] dBCode and the message number.

Imagine a thread has a message 19 with the subtitle "The Rest of the Story". Entering this dBCode will create a link to message 19:

[msg=19]

The link would look like this and have a hoverbox. Just hover over the link to see the hoverbox:

Message 19
Linking to Messages using Message ID's
All messages are assigned a unique ID. A link to a message can be created using the [mid] dBCode and the unique ID number. The message ID for any message can be found by hovering the mouse over the link to any message. This will bring up a hover box containing information about the message, including its ID. Also, in the display of any message it can be found next to the message number text, for example, "Message 16 of 25 (12604)". The "12604" is the message ID. Just include the message ID in the mid code like this:
[mid=12604]
The link would look like this:
Message 126

Hovering over links to messages created in this way produces hover boxes with more information. You can hover over the link now to see this behavior. The link itself is only for illustration and is disabled.

Linking to Threads
A link to a thread can be created using the [tid] or [thread] dBCode and the thread's ID number. The thread ID for any thread can be found by hovering the mouse over the link to any thread or message of the thread. This will bring up a hover box containing information about the thread or message, including the thread's ID. Just include the thread ID in the tid code like this:
[tid=186]
Links to thread are displayed as the thread's title and would look like this:
Caves I've Known and Loved

Hovering over links to threads created in this way produces hover boxes with more information. You can hover over the link now to see this behavior. The link itself is only for illustration and is disabled.

Linking to Forums
A link to a forum can be created using the [fid] or [forum] dBCode and the forum's ID number. The Forum ID for any forum can be found by hovering the mouse over the link to the forum, or over the link of any thread or message of the forum. This will bring up a hover box containing information about the forum, thread or message, including the forum's ID. Just include the forum ID in the fid code like this:
[fid=7]
Links to forums are displayed as the forum name and would look like this:
Outdoor Activities

Hovering over links to forums created in this way produces hover boxes with more information. You can hover over the link now to see this behavior. The link itself is only for illustration and is disabled.

Linking to Members
A link to a member's information page can be created using the [mbrid] dBCode. Mbrid stands for Member ID. The Member ID for any member can be found by hovering the mouse over any link to the member. This will bring up a hover box containing brief information about the member, including the member's ID. Just include the member ID in the mbrid code like this:
[mbrid=724]
Links to a member's information page are displayed as the member's name and would look like this:
Robert Smith

Hovering over links to members created in this way produces hover boxes with more information. You can hover over the link now to see this behavior. The link itself is only for illustration and is disabled.

Indentation
A region of indented text can be created using the [indent] dBCode.

[indent]This line will be indented.[/indent]

Latex
Equations can be rendered using the Latex langauge and the [latex] dBCode. Just place a Latex expression between the open and close [latex] codes. Some on-line help for Latex can be found here: LaTeX Help. The binomial equation would be expressed like this. Notice the bold option:

[latex=bold]\frac{-b\pm\sqrt{b^2-4ac}}{2a}[/latex]

And it would appear like this:

Latex has a limited color palette. Equations can be displayed using these colors:

black blue cyan green magenta red white

The equation could be displayed in cyan using the cyan argument in the Latex dBCode:

[latex=cyan,bold]\frac{-b\pm\sqrt{b^2-4ac}}{2a}[/latex]

And it would appear like this:

Explicit Formatting
Messages are processed into HTML, which is free form. This means that all spacing is lost. The [code] dBCode preserves all formatting by displaying what you type precisely as entered, including all spacing. This is useful for displaying programming code and tables of data, for instance:

[code]
if ($ipRecorded) {
   if (&CheckBannedIPs($thisIP)) {
      &RefuseEntry;
   } else {
      $loggedIn = true;
      &ProcessLogin;
   }
   $guestLogin = true;
   &ProcessGuest;
}
[/code]

The result maintains the original formatting, including the indentation:

if ($ipRecorded) {
   if (&CheckBannedIPs($thisIP)) {
      &RefuseEntry;
   } else {
      $loggedIn = true;
      &ProcessLogin;
   }
   $guestLogin = true;
   &ProcessGuest;
}

This code can also accept an argument of the number of lines that should be displayed. If the number of lines of code is greater then a scrollbar appears, for example:

[code=5]
if ($ipRecorded) {
   if (&CheckBannedIPs($thisIP)) {
      &RefuseEntry;
   } else {
      $loggedIn = true;
      &ProcessLogin;
   }
   $guestLogin = true;
   &ProcessGuest;
}
[/code]

The result contains only 5 lines and has a scrollbar on the right:

if ($ipRecorded) {
   if (&CheckBannedIPs($thisIP)) {
      &RefuseEntry;
   } else {
      $loggedIn = true;
      &ProcessLogin;
   }
   $guestLogin = true;
   &ProcessGuest;
}
Including HTML in Messages
Use the [html] dBCode to include HTML tags in your message. By including HTML tags between [html] dBCodes they will not be processed by the browser (when HTML tags are enabled) or removed (when HTML tags are not enabled).
[html]This example <a href=http://www.mywebsite.com>link</a> is a good illustration.[/html]
Which would appear in your message like this:
This example <a href=http://www.mywebsite.com>link</a> is a good illustration.
Including dBCodes in Messages
Use the [noparse] dBCode to include dBCodes in your message. By including dBCodes between [noparse] dBCodes they will not be processed by the software and will appear verbatim in your text. The [np] code is a briefer synonym.
[noparse]This example [url=http://www.mywebsite.com]link[/url] is a good illustration.[/noparse]
Which would appear in your message like this:
This example [url=http://www.mywebsite.com]link[/url] is a good illustration.

Note:
You must not use both HTML and dBCodes to do the same function. Also note that the dBCodes are not case-sensitive (thus, you could use [URL] or [url]).

Incorrect dBCodes Usage:

[url] www.google.com [/url] - Do not put spaces between the bracketed code and the URL.

[email]admin@evcforum.net[email] - the end brackets must include a forward slash ([/email])


Copyright 2001-2023 by EvC Forum, All Rights Reserved

™ Version 4.2
Innovative software from Qwixotic © 2024