Use BBCode to spice up your posts, but don't go overboard. Always make sure that if you use a color code that you use a background as well so that people with varying skins can see your text.

---

This section is taken from the PFQ Wiki. BBCodes are made of an opening tag, closing tag, and contents in between. Opening Tag: A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign. It would look like: [keyword=parameter] (or simply [keyword]) Contents: What is between the two tags. This could be text, other BBCodes, or a required parameter that is not part of the opening tag. Many BBCodes will not make visible modifications if they do not have content to modify. Closing Tag: A forward slash followed by the same keyword as in the opening tag enclosed in square brackets. It never has any parameters. It would look like: [/keyword]

---

Using [ ] brackets when skipping lines between code. This makes it less messy while you are editing your post while still looking neat when other people look at the post. Brackets are necessary when working with the accordion code. Example: [hide=Hide 1] [/hide][ ][hide=hide 2] [/hide][ ][hide=hide 3] [/hide] This would show up like this:

---

When coding, make sure you get the order right. You must use ending tags in reverse order of the beginning ones so that codes are within each other. For example, [size=15][b][u]Shinies for trade[/size][/b][/u] won't work; it'll just give you an error when you try to save your post. [size=15][b][u]Shinies for trade[/u][/b][/size] will give the wanted text. Shinies for trade Also, certain codes can't be used inside other ones. For example, [center] should always be on the outside. Using [b][center]Text[/center][/b] would get you an "Unexpected end tag" error. [center][b]Text[/b][/center] will give the desired text.

---

BBCodes can be used within other BBCodes. If you do this, you may also want to enclose the title with quotation marks to be safer, otherwise it may process nested brackets in the wrong order and break. For example, you can use a color code in a display box title with [display="++Trading [highlight=white][color=purple]Summons[/color][/highlight]++"]Text[/display] If you use quotes, the code will end with "] so you can still nest quotes with something like [tip=""Quote here""]Text[/tip] Text This should be applied to any places you can use nested codes, such as displays, hide boxes, and tooltips.

While most BBCode tags work without double quotation marks, it's highly recommended to always insert them in those requiring parameters in case you'd like a nested code inside it. You only need one set of quotations inside any given tag for them to work properly, regardless of how many nested code there is inside. Just make sure there is one right after the equals sign and one right before the ending/right bracket. Examples include, but aren't limited to: image(s) in the title of display/hide/accordion boxes, links in tooltips, inventory codes in progress bars (this is a must for this code to work and has been updated as such in the appropriate box below), ...

Underline	[u]text[/u] will look like text
Overline	[o]text[/o] will look like text
Bold	[b]text[/b] will look like text
Italics	[i]text[/i] will look like text
Strikethrough	[s]text[/s] will look like text
Subscript	[sub]text[/sub] will look like text
Superscript	[sup]text[/sup] will look like text

Center

This will display as:

Right

While [right]TEXT[/right] isn't a valid BBCode, you can align to the right by using CSS. You can also replace right with left (which is pointless) or center/centre. Here's an example of right-aligned text. The CSS code is also used for many, many other things. See the post below when it's finished for a guide!

Style

This one is rather basic; just take a font name, like Times New Roman, and replace FONT STYLE with it. [font=Times New Roman]Example text[/font] will show as Example text. Make sure your chosen font is valid.

Size

To use this, replace SIZE with a number from 6 to 99. Obviously, this changes the size of your text. The default text size on PFQ is 10. Try not to make your text too big, though.

Color

COLOR/COLOUR should be replaced with either a color name or a hex code. Note that some specific colors, like jade green, would not work, so use a hex code instead. A hex code is a six-character code containing numbers and/or letters; each one designates a specific color. Alternatively, you can shorten it to three characters- just take the first, third, and fifth characters. For example, you can shorten #FF0000 to #F00. When you use a hex code, make sure you type a # in front of it, for example [color=#000000]TEXT[/color]. Here is a list of more than 500 colors by their name and hex code. Here is a site where you can pick your own color and copy the hex code. Here is a site where you can convert RGB to hex. Note: If you use the Color code in forum posts, make sure you have a background making your text visible, otherwise people using different skins may not be able to see your posts!

Highlight and Background

Highlight does exactly what it sounds like. You can use it or [background] in conjunction with [color]. For example, [highlight=black][color=white]text[/color][/highlight] would show up as text. Similarly, [background=black][color=white]text[/color][/background] would show up as text. But it looks better if you want to make a larger post: The [background] code can also be used to make images your background. As an example, take this image: It's not very exciting, but using [background=http://i.imgur.com/lNASxUt.png][color=black]TEXT[/color][/background] will show: Again, make sure you use a visible color so people with varying skins can see your text!

Images

A common mistake people make when trying to show an image is that they put the url of a site containing the image, instead of the image itself. You need a url leading directly to the image. These usually end in .png, .gif, .jpg, or anything similar to that. For example, [img]http://i.imgur.com/IrLnQSC.png[/img] will look like this: Notice that when you follow the URL, it's just a shiny Bulbasaur with a blank background. This is the kind of URL you want. Conversely, you do not want to do this: [img]http://imgur.com/IrLnQSC[/img] because it will just show up as a broken image: . Following that URL will show a site hosting the image instead of just the image. To find the direct url, on most computers, you can right-click the image and there will be an option to 'Copy Image Address.' If not, you can click 'Properties' and the url will be there. Just make sure you have permission to use it!

Links

If you type [url]http://pfq.me[/url], it will give you a link that looks like this: http://pfq.me If you use the second option, which generally looks better without the gross http:// and sometimes what looks like keyboard smashing, [url=http://pfq.me]PokéFarm Q![/url] will look like this: PokéFarm Q! NOTE: When you use templates, even if you set a text color, links will show up as the default link color for a given user's skin, so you need to make sure your link colors are set as well. Use [url=URLHERE][color=COLOR]LINK TEXT[/color][/url] to do this. You can also create a link to PM someone with a set subject, like so: [url=http://q.pokefarm.org/pm?send=USERNAME&subject=SUBJECT]PM[/url] For usernames with spaces, separate words with underscores (ex. Rose_Lalonde) and separate spaces in the subject with %20 (ex. PM%20subject).

PROGRESS = Number you have TOTAL = Number you want TEXT = What you want the bar to say (for example, 8 of 50 Goal) Example: [progress=2123/9001]2,123 / 9,001 Umbreon[/progress] Would give this: Notice that in numbers in thousands, commas should not be used for the code.

[pkmn=Species] - Shows an icon of the specified Pokémon. Example: [pkmn=Mightyena] => For a female icon: [pkmn="Nidoran (F)"] => To get an icon of a PFQ Variant use [PKMN=Name of the variant as written in the Pokedex] and then add a / at the end. [pkmn=Snowbro/] => [pkmn=Species/Forme Name] - Shows an icon of the specified Pokémon, in the specified Forme. Example: [pkmn=Mightyena/Mega Forme Q] => The pkmn code can't be used to get the icons of Shiny, Albino, or Melanistic Pokémon. If you're having trouble getting the pkmn code to work, check out this post by Eltafez!

[item=Item Name] - Shows an icon of the specified item. Example: [item=Mightyenite Q] => [inventory=Item Name] - Shows how many of the specified item you have. Example: [inventory=Dark Gem] => 145 For currency, use the following: GP - [item=gold] ZC - [item=zophan] Credits - [item=credits] Tournament Tokens - [item=Tournament Token (COLOR HERE)] [inventory=Item Name-5] - Shows how many of the specified item you have, minus the number given. Useful if you have some UFT, but want to reserve a number of others. Example: [inventory=Sweet Heart-10] => 74191 The above can be combined with [progress]. Example: [progress="[inventory=Sweet Heart-50]/50"][item=Sweet Heart] × [inventory=Sweet Heart-50] / 50[/progress]

Hideboxes

The above code would give you this: Use the hide box to hide any potential spoilers and mark them in the hide box title! To resize hideboxes, add the following between [style] tags at the start or end of your post (Replace 50% with a different number as needed): To recolor hideboxes, add the following between [style] tags at the start or end of your post (Replace the colors with ones you want): To center hidebox titles, add the following between [style] tags at the start or end of your post:

Display

The Display code is like a perpetually open Hide box and looks more organized if you want to show something, like goods in a trade thread, without wanting too many Hide boxes. This code would give you:

Quotes

This one is rather self-explanatory. Use it when quoting someone, whether it be a PFQ user or a famous person (or both). The first will show up like this: And the second like this:

Accordions

On PFQ, a new sort of hide box was added. It is essentially multiple hide boxes stacked on top of each other, but if you try to open more than one, the one that was already opened will close. This will look like this: You can add or remove as many sections as you want. NOTE: [ ] Brackets are necessary if you're going to make an auto-opening accordion, described below. You can also add a number to [accordion] to make it automatically open a certain section. For example, [accordion=1] would open the TITLE 1 section in the example above, [accordion=2] would open the second, and so on.

Stackboxes

These look like accordions with all their sections open. Looks great when you use them in trade threads to show off your stuff!

Headings

Heading codes are useful if you want to divide a post into sections and subsections, and they replace a mess of [b][u][center][size=20] etc. codes. The largest heading is [h1], which looks like this:

HEADING

And the headings get progressively smaller.

HEADING 2

HEADING 3

Separators

This is the simplest code. It looks like this:

---

Use it to separate sections in a post, like a trade thread.

Bulleted Lists

There are two kinds of bulleted lists: ordered and unordered, using numbers and plain bullets, respectively. To start an unordered list, the code [ul] and [/ul] must be used before and after the list. To start an ordered list, the code [ol] and [/ol] is used before and after the list instead. No matter which type you use, [li] and [/li] should be used before and after each item on the list. The above code gives this:

1. ITEM 1
2. ITEM 2
3. ITEM 3
4. ITEM 4

The above code gives this:

• ITEM 1
• ITEM 2
• ITEM 3
• ITEM 4

Tables

This is a slightly more difficult-to-use code that seems to give some people trouble. The entire table is defined by [table]...[/table]. However, you need to define everything inside as well. [tr]...[/tr] is used to define a table row. Between them, you need to use [td] to define a cell in that row. Alternatively, you can use [th] in place of [td] to create a "header" cell whose text will automatically be bolded and centered. One of the most common mistakes people make when coding tables is forgetting to close their rows with [/tr]. Make sure to do this after all your table cells in that row! Also, make sure each row has the same number of cells. Here's an example of a properly coded table. [table] [tr] [th]Header 1[/th] [th]Header 2[/th] [th]Header 3[/th] [/tr] [tr] [td]cell 1[/td] [td]cell 2[/td] [td]cell 3[/td] [/tr] [tr] [td]cell 4[/td] [td]cell 5[/td] [td]cell 6[/td] [/tr] [/table] This code would give the following table.

Header 1	Header 2	Header 3
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

If you want, say, your top left cell to span more than one column or row, you need to use [td=WxH] (or [th=WxH] for header cells), where W is the number of columns and H is the number of rows that cell will take up. Demonstration: [table] [tr] [th=3x1]Header[/th] [/tr] [tr] [td]cell 1[/td] [td]cell 2[/td] [td]cell 3[/td] [/tr] [tr] [td]cell 4[/td] [td]cell 5[/td] [td]cell 6[/td] [/tr] [/table] will give:

Header
cell 1	cell 2	cell 3
cell 4	cell 5	cell 6

And: [table] [tr] [th=1x3]Header 1[/th] [td]Example 1[/td] [/tr] [tr] [td]Example 2[/td] [/tr] [tr] [td]Example 3[/td] [/tr] [tr] [th=1x3]Header 2[/th] [td]Example 4[/td] [/tr] [tr] [td]Example 5[/td] [/tr] [tr] [td]Example 6[/td] [/tr] [/table] will give:

Header 1	Example 1
	Example 2
	Example 3
Header 2	Example 4
	Example 5
	Example 6

To center tables in a post, use the following between [style] tags:

Datetime

For this code, you need to specify a specific time, and the datetime code will read the timestamp and tell you how long it has been since that time (if it's in the past) or how long it will be until that time (if it's in the future). It updates automatically, so it's useful for posting deadlines and such. The best way to use this is to replace DATE/TIME with a time in the format of YYYY-MM-DD hh:mm:ss, but it works even if you do something simple as (Month name) (date), YYYY. So: [datetime]2014-02-06 00:00:00[/datetime] and [datetime]February 6, 2014[/datetime] would both give 10 years ago

Tooltips

If you use this code, the TIP MESSAGE will be displayed when users hover over TEXT. The above example would be shown as this: TEXT To change the tooltip backgrounds, add the following between [style] tags at the start or end of your post and change the colors as needed:

Pits

This is pretty much the same as the tooltip code above, except the parameters are reversed ("tip" <=> "pit"), allowing for a better overview of the PIT MESSAGE when users hover over TEXT. The example above would output to this: TEXT

This is equivalent to the [code] code on PokéFarm 1. When you use it, BBCode is essentially disabled for anything between the opening and closing tags- I've been using it throughout this entire guide.