vB Code Tutorial

[Lindon]

I've noticed that several of the CF refugees have been asking how to format their posts. I thought I'd give a few pointers, starting with the most basic, and working up from there. At the moment, this is a direct cut-and-paste from a similar tutorial I presented elsewhere (a screenwriters' board, so ignore any references to scripts, drafts, and whatnot.) I'll try to customize it for use here, as I'm able.

[Lindon]

Using Bold Text

To make text bold, simply insert it between the [b] and [/b] tags.


[b]This is bold text.[/b]

causes the text to appear as

This is bold text.


Bold text is not recommended for use in scripts. It is, however, a useful tool when reviewing a script. An example might be the correction of a frequently misused or misspelled word.

You may need to tell someone "The word is their, a possessive." or "It's spelled 'separate.'"


You would do this by putting the tags around the part you want bolded:

"The word is [b]their[/b], a possessive."

"It's spelled 'sep[b]a[/b]rate.'"


The culture on some messageboards is to bold posters' names the first time they're mentioned in a post. For instance, you may want to say "Hey David! I don't understand your tutorial at all!"


You'd do it like so:

Hey [b]David[/b]! I don't understand your tutorial at all!

[Lindon]

Using Italic Text

To italicize text, use the [i] and [/i] tags. Other than that, it's done the same way as bolding.


[i]This is italic text.[/i]

causes the text to appear as

This is italic text.


You can also italicize a single word or even a single letter, just like with bolding.

Using italics in scripts is frowned upon, but in any other type of post, italics can be used to indicate titles, foreign words, or special emphasis.

[Lindon]

Using Underlined Text

To underline text, insert it between the [u] and [/u] tags.


[u]This text is underlined.[/u]

causes the text to appear as

This text is underlined.


Underlining has many uses. In screenplays and manuscripts, it is used to indicate italic text, such as book titles, television shows, and foreign words. In other kinds of posts, it is used for emphasis.

[Lindon]

Using Strikethroughs (Strikethroughs)

To strike text, insert it between the [s] and [/s] tags.


[s]This text is on strike.[/s]

causes the text to appear as

This text is on strike.


Naturally, strikethroughs should never be used in a script. They are very useful, though, for editing and reviewing a script.

[Lindon]

Using Preformatted Text

under construction

[Lindon]

Aligning Text to the Left

Use the [left] and [/left] tags to left-align your text.


[left]This is on the left.[/left]

shows as

This is on the left.

This is, of course, the default setting, so it's rarely used.

[Lindon]

Centering Text

Use the [center] and [/center] tags to center text.


[center]This is in the middle.[/center]

shows as

This is in the middle.

[Lindon]

Aligning Text to the Right

Use the [right] and [/right] tags to right-align your text.


[right]This is way over here.[/right]

shows as

This is way over here

Right-aligning can be useful for transitions, keeping always in mind that many transitions such as "CUT TO:" have fallen out of style.

[Lindon]

Colored Text

To color your text, use the [color] tags.


This should be red.

is made by typing

[color=red]This should be red.[/color]


And this is blue.

is the result of

[color=blue]And this is blue.[/color]


There are many different colors available:

This should be green.
This should be yellow.
This should be blue.
This should be orange.
This should be gray.
This should be pink.
This should be brown.
This should be purple.


Not enough colors for you? Use RGB (Red / Green / Blue) values, instead. These values are in hexidecimal, so they'll use the numbers 0-9, but also the letters A-F (giving a total of 16 "numerals".) Most graphics programs can show you the RGB value of any color you want to use.


This is red.
This is a different red.
This is another different red.
Another red.
Yet another.

are made by typing in

[color=red]This is red.[/color]
[color=FF2020]This is a different red.[/color]
[color=C34F4F]This is another different red.[/color]
[color=B01414]Another red.[/color]
[color=DEC0C0]Yet another.[/color]

[Lindon]

Inserting a Horizontal Rule (a line)

under construction

[Lindon]

Changing the Size of the Text

If you need to make your text larger or smaller, you can use the [size] tags. This is one of those tags which take a modifier -- a number in this case -- to customize how large or small the text will be.


Typing

[size=4]This is size 4 text.[/size]

will show as

This is size 4 text



And typing

[size=1]This is size 1 text[/size]

will result in

This is size 1 text


You can use several different sizes.

Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7

[Lindon]

Changing Fonts

You can change fonts by using the [font] tags. I think the default font is Verdana, but you can display your text in any font you have on your computer -- but be warned, any user who doesn't have the same font installed will only see it as the default font.


If you type

[font=Courier]This is Courier[/font]

it will show your text as Courier

This is Courier.



Typing

[font=Arial]This is Arial.[/font]

will show as

This is Arial.


You can use all sorts of fonts.

This is Courier New.
This is Times New Roman
This is Wingdings (This is Wingdings)
This is Tahoma
This is Small Fonts
This is Arial Black
This is Marlett (This is Marlett)
This is Impact
This is Tengwar Quenya. (you should see this as Verdana unless you have a font installed named "Tengwar Quenya".)

I would recommend against using some oddball font in a script. You should probably post it using either the board default or some form of Courier.

[Lindon]

Linking to Websites

So you want to make a link to a webpage. It's the easiest thing in the world -- just type the URL:

http://www.google.com



If that doesn't work, you can create a link with the [url] tags.


[url]http://www.google.com[/url]

and it will show up in your post as a link

http://www.google.com



Want to make a link without showing the URL? Use the [url=] tags.

[url=http://www.google.com]Click Here[/url]

will show up as

Click Here

and yes, it'll take you to the Google site.


In general, use whichever method you like best. In cases where the URL is so long that it creates a scrollbar on the page or wraps to a second line, the [url=] method is usually preferred.

[Lindon]

Displaying an Image

Found a pretty picture on the web that you'd like others to see? Use the [img] tags around the image's URL.


For instance, to display the smiley face image from this board, type this in:

[img]http://talkrational.org/images/icons/icon7.gif[/img]

and the image will be shown directly in the post:




Be warned, though -- some sites do not allow "hotlinking" to their graphics files. In such a case, some sort of "You're not allowed to do that" image will be displayed, instead.

Also, please respect both the copyrights of the image owners and the rules of this board.

[Lindon]

Superscripts

No, these aren't the kind of super scripts that will bring you a multi-million dollar deal with New Line Cinema. These superscripts are normally found only in scientific and engineering formulae.

For example, the familiar formula E=mc2 is more properly written as

E=mc²

Do that by superscripting the 2 with the [sup] tags:

E=mc[sup]2[/sup]

[Lindon]

Subscripts

The opposite of a superscript. Subscripts are normally used in chemical and molecular analysis.

H2O -- water -- may be better written as

H₂O

Just subscript the 2 with the [sub] tags:

H[sub]2[/sub]O

I'm not sure what the rules are for using subscripts and superscripts in screenplays. In other types of posts, some people use them to quickly write in smaller fonts without using the [size=#] tags, such as "I'll give you a thousand _Monopoly dollars to read my script!"

[snooch]

This should be stickied.

Awesome, I didn't know the pre tag either, and that'll come in handy!

[Lindon]

Quoting Someone

under construction

[Lindon]

Typewriter font

under construction

[Lindon]

Making a List

An automated list is a bit more complicated than most of the other tags we've covered so far.

Let's say you want to make a bulleted list of your favorite David Lynch films. It might look something like this:

• Twin Peaks
• Eraserhead
• Mulholland Dr.
• Lost Highway

You'd make the list (or have the board software make it) by using the [list] and [/list]tags. Between them, you'll use the [*] tag to indicate a new item on the list:

[list]
[*]Twin Peaks
[*]Eraserhead
[*]Mulholland Dr.
[*]Lost Highway
[/list]

To make a numbered list, simply change the first tag to [list=1]. To make a lettered list, change the first tag to [list=a].

For a numbered list, this:

[list=1]
[*]Twin Peaks
[*]Eraserhead
[*]Mulholland Dr.
[*]Lost Highway
[/list]
becomes this:

1. Twin Peaks
2. Eraserhead
3. Mulholland Dr.
4. Lost Highway

For a lettered list, this:

[list=a]
[*]Twin Peaks
[*]Eraserhead
[*]Mulholland Dr.
[*]Lost Highway
[/list]
becomes this:

1. Twin Peaks
2. Eraserhead
3. Mulholland Dr.
4. Lost Highway

[Lindon]

Using Multiple vB Codes

You can certainly use more than one code to affect a bit of text. You can make a word both bold and italic. You can change the font type and the font size at the same time. You can mix and match to your little heart's content.

Do the Quotes seem too small to you? Change 'em!

An apple a day keeps the doctor away.

An apple a day keeps the doctor away.

An apple a day keeps the doctor away.

Originally Posted by Poster X:

An apple a day keeps the doctor away.

The first example is a simple [quote] - [/quote] pairing:

[quote]An apple a day keeps the doctor away.[/quote]


In the second example, we also increased the size (the quote feature seems to default to size=1, but we're gonna raise it to 2.)

[quote][size=2]An apple a day keeps the doctor away.[/size][/quote]


In the third one, we not only increase the size, but we also turn the quoted text blue:

[quote][size=2][color=blue]An apple a day keeps the doctor away.[/color][/size][/quote]


And in the forth example, we just go nuts -- we still increase the size, but now we also manually add an attribute to the quote. This time, we only turn the attribute blue. We also make it italic. While we're at it, we bold the original poster's name. We leave the quoted text to default black:

[quote][size=2][color=blue][i]Originally Posted by [b]Poster X[/b]:[/i][/color]

An apple a day keeps the doctor away.[/size][/quote]

[Lindon]

Spoiler tag?

under construction

[Lindon]

Hiding things.

Anything you wish to hide will present a button marked SHOW, instead. Once that button's clicked on, the image, text, or link will be visible.

Normally, people hide things that are NSFW or Not Safe For Work--you don't want somebody to get fired from their job because a coworker saw them looking at a picture of a naked mermaid.

So hide it with the [hide] tags.

[hide]TEXT GOES HERE[/hide]

gives us

TEXT GOES HERE

Of course, you can also hide urls and images:

[hide][img]http://talkrational.org/images/buttons/report.gif[/img][/hide]

becomes

and

[hide][url=talkrational.org]Talk Rational[/url][/hide]

becomes

Talk Rational

All you're doing in these cases is wrapping a normal [img] or [url] tag inside of a [hide] tag. Simple!

[Lindon]

This should be stickied.

Awesome, I didn't know the pre tag either, and that'll come in handy!

Sorry, that doesn't seem to be a vB feature. The board I originally posted this on was a Proboard, so I'm having to doctor up a few of the entries. You can try the [noparse] [/noparse] tags, though.