Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

A Somewhat Extensive Guide to BBCodes

Forum Index > PokéFarm > Guides >

Pages: 123··· 400401402

POLL: Helpful?

Total votes: 1,732

You must be logged in to vote.


Meu's AvatarMeu
Meu's Avatar
4 years later and I still suck at introductions.

BBCode Basics

  • Introduction to BBCode
  • BBCode components
  • Skipping lines
  • Order is important
  • Nested codes
  • ×

Introduction

BBCode, or Bulletin Board Code, is a type of coding "language" used on many forums, using square brackets: [ ]. Unlike HTML, which is rather complicated to use and look at, BBCode is a "lightweight" markup language. It's intended to make codes easy to use (requiring only a simple text box as the input interface) and easy to understand when you look at it. When a post with valid BBCode is published, the server converts it to a markup language that web browsers can interpret and display – usually HTML (as in the case of Pokéfarm).* Even though it's simple, it won't help much if you don't know which BBCodes are implemented on the forums you're on. So let's go through them! *This is based on what I know about how BBCode generally works; I'm not totally sure how much it applies to Pokéfarm. If any staff could confirm or deny this that would be great.

Components

The vast majority of BBCodes is composed of three parts: an opening tag, contents, and a closing tag. (There are exceptions, such as [hr]). Opening Tag: A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign. An opening tag looks like this: [keyword=parameter] (or just [keyword]) Optionally, you may also surround the parameter with double quotation marks, like this: [keyword="parameter"] This is usually not necessary unless you are using codes within codes (nested codes). Contents: This is the stuff you put between the opening and closing tag. Most commonly, it's just text, although it can also include more BBCode within. Closing Tag: A forward slash followed by the same keyword as in the opening tag enclosed in square brackets. It never has any parameters. A closing tag looks like this: [/keyword] Example: One of the most commonly used codes is the hidebox: [hide=Title] Contents [/hide] From the above, you should be able to determine that [hide=Title] is the opening tag, Contents is, well, the contents, and [/hide] is the closing tag.

Skipping lines

You can use [ ] square brackets to put space between code on separate lines to organize. Newlines in between these brackets will be ignored, and the final published post will not show the space. Also, any other characters are ignored, up until the first right bracket. This makes organization easier while you are editing your post, while still looking neat when other people see the post. It's useful when you're working with a lot of BBCodes close together, such as multiple hideboxes. Example: [hide=Hide 1] [/hide][ weeeeeeeeeeeeeeeeeeeeeeeee (These characters will be ignored.) ][hide=hide 2] [/hide][ wooooooooooooooooooooooooo (These characters will be ignored.) ][hide=hide 3] [/hide] This would appear as:

Hide 1

hide 2

hide 3

If you don't use square brackets to skip lines here, they would have a lot of space between them – and that doesn't look so neat.

Hide 1

hide 2

hide 3

Order is important

When using BBCode, 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 - specifically, "Unexpected [/size] - expected [/u]," because the site expects the closing tags in a different order. [size=15][b][u]Shinies for trade[/u][/b][/size] will give the wanted text: Shinies for trade

Nested codes

BBCodes can be used within other BBCodes. If you do this, you should also enclose the parameters with double quotation marks to be safe, otherwise it will probably process nested brackets in the wrong order and fail to parse as valid BBCode. Although recommended, double quotation marks around the parameter usually aren't required unless you want to use nested codes. For example, you can use this within a display box title: [display="[center]~*Trading [highlight=white][color=purple]Summons[/color][/highlight]*~[/center]"] Contents [/display]

~*Trading Summons*~

Contents
The quotation marks make it easier to distinguish what the actual parameters are. Not only does the same thing without "" look confusing, it also gives an error while trying to save the post (Unexpected [/center] - expected [/display]): [display=[center]~*Trading [highlight=white][color=purple]Summons[/color][/highlight]*~[/center]] Contents [/display] If you wish to use an actual quote, the code will end with "] so you can still nest them with something like [tip=""Quote here""] Contents [/tip] Contents
"God, please give me patience. If you give me strength I will just punch them in the face." -Anonymous
You can nest codes in other code types as well, such as hide boxes and tooltips. Examples include, but aren't limited to: Image(s) in the title of display/hide/accordion boxes: [display="TITLE [img]IMAGE URL[/img]"] CONTENTS [/display] Links in tooltips: [tip="[url=URL HERE]TEXT LINK[/url] ADDITIONAL TEXT"] CONTENTS [/tip] Inventory codes in progress bars: [progress="[inventory=Dusk Stone]/666"][item=Dusk Stone] × [inventory=Dusk Stone] / 666[/progress]

Important Reminders

  • Use BBCode to spice up your posts, but don't go overboard.
  • If you use a color code, always make sure that you use a background as well so that people with varying skins can see your text. White text may look good on your dark colored skin, but won't look so good to people with pastel skins!
  • 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. You can either use [style] to color all the links in a post, or simply use [color] tags within the [url] tags. (Ex. [url=URLHERE][color=COLOR]LINK TEXT[/color][/url])
Now that the basics are out of the way, we can move on to the actual codes.

Text Formatting

  • ×
  • Underline, bold, superscript, etc.
  • Alignment (center, etc.)
  • Font style and size
  • Font color and highlight
  • Background
  • Headings
  • Separators
  • Bulleted & Numbered Lists
Click on a tab above.
The most basic ones, easiest to master.
InputResult
Underline [u]text[/u] text
Overline [o]text[/o] text
Bold [b]text[/b] text
Italics [i]text[/i] text
Strikethrough [s]text[/s] text
Subscript [sub]text[/sub] text
Superscript [sup]text[/sup] text

Center Align

Center align Code

[center]TEXT[/center] [centre]TEXT[/centre]
Either of these will display as:
TEXT

Right Align

While [right]TEXT[/right] isn't a valid BBCode, you can align to the right by using CSS.

Right align Code

[css=text-align:right]TEXT[/css]
You can also replace right with left (which is pointless) or center/centre. justified is not a valid alignment on these forums. Here's an example of right-aligned text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed enim velit, rhoncus ut vehicula ac, rhoncus et orci. Donec ut nisl nec dolor ornare commodo. Vestibulum vitae elit justo. Phasellus velit libero, ornare sit amet mi nec, viverra fermentum nunc. Maecenas pellentesque mattis cursus. Curabitur condimentum metus vitae mauris elementum, eu ultrices quam bibendum. Fusce bibendum ac mi vitae facilisis.
The CSS code can also used for many other things. See the linked guide to CSS!

Font Style

Font Style Code

[font=FONT STYLE]TEXT[/font]
Simply take a font name, like Times New Roman, and replace FONT STYLE with it. [font=Times New Roman]Example text[/font] will give Example text. [font=Comic Sans MS]Example text[/font] will give Example text. Make sure your chosen font is valid. Different fonts may or may not work for different users, depending on web browsers/operating systems used. If a font is invalid or incompatible, it defaults to Times New Roman.

Font Size

Font Size Code

[size=SIZE]TEXT[/size]
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. The recommended minimum size for legibility is 8. [size=20]TEXT[/size] gives TEXT [size=13]TEXT[/size] gives TEXT [size=8]TEXT[/size] gives TEXT

Font Color

Color Code

[color=COLOR]TEXT[/color] [colour=COLOUR]TEXT[/colour]
COLOR/COLOUR should be replaced with either a named color, like "red," or a hex code. Named colors supported by web browsers are listed here. Note that specific colors outside of these named colors, such as "jadegreen," do not work, so use a hex code for these 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, make sure you have a suitable highlight or background making your text visible, otherwise people using different skins may not be able to see your posts!

Highlight

Highlight Code

[highlight=COLOR]TEXT[/highlight]
Highlight does exactly what it sounds like. You may use it in conjunction with [color]. For example: [highlight=black][color=white]text[/color][/highlight] would give text.

Background

Color Background Code

[background=COLOR]TEXT[/background]
[background=black][color=white]text[/color][/background] gives
text
. It's generally better if you want to make a larger post:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat ligula arcu, in fringilla tortor varius sit amet.
Contrast this with the same text using the highlight code: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat ligula arcu, in fringilla tortor varius sit amet. The [background] code can also be used to make images your background.

IMG Background Code

[background=IMAGE URL]TEXT[/background]
As an example, take this image: It's not very exciting by itself, but using [background=https://i.imgur.com/lNASxUt.png][color=black]TEXT[/color][/background] will show:
TEXT
This, CSS, and img codes can be used to create fancy post templates. See the linked guide on how to do so.

Headings

Heading Codes

[h1]HEADING[/h1] OR [h2]HEADING 2[/h2] OR [h3]HEADING 3[/h3]
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

[h2]:

HEADING 2

[h3]:

HEADING 3

Separators

Separator Code

[hr]
This simple code creates a divider that looks like this:
You can use it to separate sections in a post, such as in a trade thread.

Lists

There are two kinds of 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.

Ordered List Code

[ol] [li]ITEM 1[/li] [li]ITEM 2[/li] [li]ITEM 3[/li] [li]ITEM 4[/li] [/ol]
The above gives:
  1. ITEM 1
  2. ITEM 2
  3. ITEM 3
  4. ITEM 4

Unordered List Code

[ul] [li]ITEM 1[/li] [li]ITEM 2[/li] [li]ITEM 3[/li] [li]ITEM 4[/li] [/ul]
The above gives:
  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4

Organization

  • ×
  • Hideboxes
  • Accordion hideboxes
  • Display boxes
  • Stackboxes
  • Quotes
  • Tabs (Tabbed interface)
  • Tables
Click on a tab above.

Hideboxes

Sometimes there's so much information to display, it won't fit in a small space like your About Me, or it would just make your post way too long. In that case you can use a hidebox. Clicking on its title drops down the contents.

Hidebox Code

[hide=HIDEBOX TITLE] HIDEBOX CONTENTS [/hide]
The above code gives:

HIDEBOX TITLE

HIDEBOX CONTENTS
You can use the hide box to hide any potential spoilers and mark them in the hidebox title! To resize hideboxes, you can add the following between [style] tags within your post (Replace 50% with a different percentage or width in pixels as needed):

Resize Hidebox

[style] .panel { Width:50%; } [/style]
To recolor hideboxes, add the following between [style] tags at the start or end of your post (Replace the colors with ones you want):

Recolor Hidebox

[style] .panel { &>h3 { &>a { color: red; } background: white; } &>div { color: white; background: black; } } [/style]
To center hidebox titles, add the following between [style] tags at the start or end of your post:

Center Hidebox Title

[style] .panel > h3 { text-align: center; } [/style]

Accordions

An accordion is essentially multiple hide boxes stacked on top of each other, but if you try to open a second one, the one that was already opened will close. It has two sets of opening/closing tags: [accordion], which contain the rest of the code, and [a-section], in which you can put the desired contents of the hideboxes.

Accordion Code

[accordion] [a-section=TITLE 1] CONTENTS 1 [/a-section] [a-section=TITLE 2] CONTENTS 2 [/a-section] [a-section=TITLE 3] CONTENTS 3 [/a-section] [a-section=TITLE 4] CONTENTS 4 [/a-section] [/accordion]
This will give:

TITLE 1

CONTENTS 1

TITLE 2

CONTENTS 2

TITLE 3

CONTENTS 3

TITLE 4

CONTENTS 4
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.

Accordion Code

[accordion=3][ ][a-section=TITLE 1] CONTENTS 1 [/a-section][ ][a-section=TITLE 2] CONTENTS 2 [/a-section][ ][a-section=TITLE 3] CONTENTS 3 [/a-section][ ][a-section=TITLE 4] CONTENTS 4 [/a-section][ ][/accordion]

TITLE 1

CONTENTS 1

TITLE 2

CONTENTS 2

TITLE 3

CONTENTS 3

TITLE 4

CONTENTS 4

Display

The Display code is like a perpetually open Hidebox and looks more organized if you want to show something, like goods in a trade thread, without too many Hideboxes.

Display Code

[display=TITLE]CONTENTS[/display]
This will give:

TITLE

CONTENTS

Stackboxes

This basically looks like an accordion with all its sections open. It could be useful to use in trade threads to show off your stuff!

Stackbox Code

[stackbox] [a-section=TITLE 1]CONTENTS 1[/a-section] [a-section=TITLE 2]CONTENTS 2[/a-section] [a-section=TITLE 3]CONTENTS 3[/a-section] [a-section=TITLE 4]CONTENTS 4[/a-section] [/stackbox]

TITLE 1

CONTENTS 1

TITLE 2

CONTENTS 2

TITLE 3

CONTENTS 3

TITLE 4

CONTENTS 4

Quotes

Quote Code

[quote]QUOTE HERE[/quote] OR [quote=WHO SAID THE QUOTE]QUOTE HERE[/quote]
You can use this when quoting someone, whether it be a PFQ user or a famous person (or both). The first will show up like this:

QUOTE

QUOTE HERE
And the second like this:

QUOTE originally posted by WHO SAID THE QUOTE

QUOTE HERE

Tabs

You can create a tabbed interface such as the ones used on this thread and in your inventory and other parts of the site using the following code.

Tabbed interface Code

[sc=tabbed_interface horizontal] [ul] [li]Title 1[/li] [li]Title 2[/li] [li]Title 3[/li] [/ul][ ][sc=tab-active]contents 1[/sc][ ][sc=tab]contents 2[/sc][ ][sc=tab]contents 3[/sc][/sc]
The above would give:
  • Title 1
  • Title 2
  • Title 3
contents 1
contents 2
contents 3
You can also make one with vertical tabs by replacing horizontal in the above code with vertical.
  • Title 1
  • Title 2
  • Title 3
contents 1
contents 2
contents 3

Tables

This is a slightly more complex code that gives 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, each row in a table should have 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 would give the following:
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:

Center Tables

[style] Table {margin: 0 auto;} [/style]

Images, links, collections, etc.

  • ×
  • Images
  • Links
  • PKMN
  • Type
  • Progress bars
  • PKMN Panel
  • Items, Inventory & Currency
  • Counters (Combining Progress + Inventory)
Click on a tab above.

Images

Image Code

[img]IMAGE URL[/img]
Simply use a direct image URL in between img tags. Note that Pokéfarm does not support http:// images. Image URLS must be secure (starting with https://). A mistake some people make when trying to display an image is that they use the url of a site hosting the image, instead of the direct URL of the image. Direct image URLS usually end in .png, .gif, .jpg, or similar. For example, [img]https://i.imgur.com/IrLnQSC.png[/img] will give 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. You do not want this: [img]https://imgur.com/IrLnQSC[/img] because it will just show up as a broken image: . Following the URL will give you the site hosting the image.

Links

Link Code

[url]URL HERE[/url] OR [url=URL HERE]TEXT[/url]
The parameter is optional. You may either use a URL surrounded by [url] tags without parameters, or you can use the URL as the parameter and the text in between opening and closing tags will become the link text. If you type [url]https://pokefarm.com/user/Meu[/url], it will give: https://pokefarm.com/user/Meu If you use the second option, which generally looks neater, [url=https://pokefarm.com/user/Meu]Meu's Page[/url] will give: Meu's Page Or, you can use an image in place of the link text. [url=https://pokefarm.com/user/Meu][img]https://i.imgur.com/irVdJpB.gif[/img][/url]

PKMN

You can use this to show an icon of a specific Pokémon.

PKMN Code

[pkmn=Species]
Examples: [pkmn=Umbreon] gives [pkmn=Piplup] gives
For a female icon, add (F) to the Pokémon's name (case sensitive). Examples: [pkmn=Nidoran (F)] gives [pkmn=Pikachu (F)] gives
For a shiny, albino, or melanistic icon, add (S), (A), or (M) to the Pokémon's name, respectively (case sensitive). (If the sprite isn't implemented yet, it will just show the default icon.) Examples: [pkmn=Umbreon (S)] gives [pkmn=Umbreon (A)] gives [pkmn=Umbreon (M)] gives
To get an icon of a PFQ Variant or Exclusive use [PKMN=Name of the variant as written in the Pokédex] and then add a / at the end. Examples: [pkmn=Snowbro/] gives [pkmn=Snow Combee/] gives [pkmn=Bandicoon/] gives [pkmn=Greegon/] gives
To get icons of Pokémon in alternate formes, use [pkmn=Species Name/Forme Name]. Examples: [pkmn=Manectric/Mega Forme] gives [pkmn=Umbreon/Mega Forme Q] gives [pkmn=Exeggutor/Alolan Forme] gives [pkmn=Gligar/Vampire] gives [pkmn=Purrloin/Hallowe'en Witch] gives [pkmn=Genesect/Douse Drive] gives [pkmn=Silvally/Type: Fire] gives [pkmn=Arceus/Fire Forme] gives

Type

You can use this to display an icon of a specific type.

Type Code

[type=TYPE NAME]
For example, [type=Dark] gives

Progress Bar

This gives a progress bar that shows how close to a goal you are. By itself, it needs to be manually updated. However, this can be combined with inventory codes to make an automatically updating progress bar, shown in the section titled "Counters."

Progress Bar Code

[progress=PROGRESS/TOTAL]TEXT[/progress]
PROGRESS = Number you have TOTAL = Number you want TEXT = What you want the bar to say (for example, 8 of 50 Goal) Example: [progress=5879/9001][pkmn=Umbreon] 5,879 / 9,001 Umbreon[/progress] Would give this:
5,879 / 9,001 Umbreon
Notice that when typing numbers over 1,000, commas should not be used in the code.

PKMN Panel

Pkmnpanel Code

[pkmnpanel=ID]
This creates a panel displaying your Pokémon, as well as berries so that other users can interact with them. Note: The ID is the Pokémon's unique summary ID. You can obtain it by going to the Pokémon's summary and copying the part of the url following "pokefarm.com/summary/". [pkmnpanel=JrMPQ] gives:
Ice Feather

Ice Feather

Summon Item

(: 0)

A feather that is cold to the touch and glitters in the sunlight. It is said that it belongs to the Legendary Pokémon Articuno.

View/use Summon Items

Unsellable

Lv. 100 — +200,904,815
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryAspear Berry
Cheri Berry (SPICY)
Chesto BerryCheri Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Spicy food
Dark
Happiness MAX
Brave nature

Items

Item Code

[item=Item Name]
Use to show an icon of the specified item. Examples: [item=Umbreonite Q] gives [item=Tournament Token (Fire)] gives [item=Lunar Wing] gives For currency, use the following: [item=Credits] gives [item=Gold] gives [item=Zophan] gives

Inventory & Currency

Item Code

[inventory=Item Name]
Use to show how many of the specified item (or currency) you have. Examples: [inventory=Umbreonite Q] gives 1 [inventory=Tournament Token (Fire)] gives 3 [inventory=Lunar Wing] gives 4 For currency, use the following: [inventory=Credits] gives 5018332 [inventory=Gold] gives 2215 [inventory=Zophan] gives 90 You can also use [inventory=Item Name-Number] to show how many of the specified item you have, minus the number given. This is useful if you have some UFT, but want to reserve a number of others. Example: [inventory=Sweet Heart-500] gives 72549

Counters

To make a self-updating counter, you can combine [progress] and [inventory] (as well as others, like [img], if you wish). Examples: [progress="[inventory=Sweet Heart-500]/666"][item=Sweet Heart] × [inventory=Sweet Heart-500] / 666[/progress]
× 72549 / 666
[progress="[inventory=Credits]/750000"][item=Credits] × [inventory=Credits] / 750,000[/progress]
× 5018332 / 750,000

Miscellaneous

  • ×
  • Datetime
  • Tooltips & Pits
  • nobbcode
  • Math
  • Number
  • Mature
  • Youtube
Click on a tab above.

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.

Datetime Code

[datetime]DATE/TIME[/datetime]
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 5 years ago

Tooltips

Tooltip Code

[tip=TIP MESSAGE]TEXT[/tip]
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
TIP MESSAGE
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:

Change Tooltip Backgrounds

[style] .tooltip_content { background-color: black; color: white; } [/style]

Pits

Pit Code

[pit=TEXT]PIT MESSAGE[/pit]
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
PIT MESSAGE

nobbcode

nobbcode code

[nobbcode]TEXT[/nobbcode]
When you use this, BBCode is disabled for anything between the opening and closing tags. It's what I've been using in this guide to demonstrate each code!

Math

Math Code

[math]CONTENTS[/math]
Hate doing math? No worries - Pokéfarm can do it for you. Mathematical expressions in between the [math] tags will be automatically calculated and the result displayed. The following symbols & mathematical operations are supported: + for addition - for subtraction * for multiplication / for division ^ for exponentiation () for defining precedence Examples: [math]50 + 99 - 40[/math] gives 109 [math]600 / 43 + 15[/math] gives 28.95 [math]600 / (43 + 15)[/math] gives 10.34 Optionally, you can combine this with [inventory] for a variety of reasons. Examples: [progress="[inventory=Dark Gem]/275"][math][inventory=Dark Gem] / 275 * 100[/math]% Dark Gem progress[/progress] gives:
44% Dark Gem progress
[item=deluxe box] Total boxes x[math][inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box][/math] gives: Total boxes x0 [item=fairy gem] x[math][inventory=fairy gem]+[inventory=medium fairy gem]*10+[inventory=large fairy gem]*100[/math] / 2100 gives: x387 / 2100

Number

Number Code

[number]NUMBER[/number]
This BBCode formats strings of digits as a number with comma separators. Note that if any non-digit characters are nested within the [number] tags, the number will only display up to the first non-digit character. Any zeros at the beginning of a number are also not displayed. Examples: [number]878635269362457[/number] gives 835,269,362,457 [number]0000000456248[/number] gives 456,248 You can also combine it with [inventory], especially useful if you want to display your amount of credits. [item=credits][number][inventory=credits][/number] gives 5,018,332 as opposed to the same without the number code: 5018332

Mature

Mature content Code

[mature]Contents[/mature]
This code gives something that looks like a [display] box which is only viewable to logged-in users who are 18 years or older. Users under 18 and guests will not be able to see it. This code only works in the About Me, and can't be used in forum posts. There is another tag, [under18test], that can be used in conjunction with this to test what your About Me will look like to people under 18. If you save it with at least one instance of this tag present, no one will be able to view the [mature] box, not even users over 18.

Youtube

Youtube Code

[youtube]YouTube ID[/youtube]
This code gives a Youtube video player. The Youtube ID is the unique string of characters found at the end of a Youtube video's URL. In this URL, https://www.youtube.com/watch?v=HxEBYYHmV4Y, the Youtube ID is bolded. Example:[youtube]0K1mvujF1VM[/youtube] gives

Style and CSS

There are a couple more BBCodes: [style] (and [styleclass]) and [css]. Just like the others, they use opening and closing tags with contents in between. Unique from the others, they are highly customizeable and won't be fully covered in this guide. You can learn more about them in the following guides instead. CSS: The Beginner's Guide to CSS Coding Style & styleclass: Styleclass and You: An Introduction Guide to CSS (Beginner & Intermediate)
That concludes the main guide! Feel free to offer feedback or let me know how I can improve it. I hope this helps!
shop + journal + credit phone lines follow us, like heartbeats in the dusk hold my hand and gush, sweet landscapes from the bus
263
Meu's AvatarMeu
Meu's Avatar
CSS is one code, but it has a wide range of options. I don't actually know much about it, but I'll try my best to explain. (See this guide if you want to know how to put it all together into a post template.)

Basics (read first!)

The basic formula for a CSS code is [css=CODE1:DEFINITION; CODE2:DEFINITION; ETC.]TEXT[/css]. What makes it different from the rest of the BBCodes is that after the =, you can put any number of things - effectively, multiple codes in one. You just need to separate each code with a semicolon ( ; ). For example, if you wanted to make a post with a background and text color, courier font, and bold text, you can join the four different codes like this.

Code

[css=background-image:url('http://i.imgur.com/lNASxUt.png'); color:#b536da; font-family:courier; font-weight:bold;]Hello all.[/css]
Which would become:
Hello all.
(Note: You do not need to put a space after each semicolon, but I personally find it easier to work with.) Most of the following are a lot harder to type out than the simple BBCode (such as [css=font-weight:bold;]TEXT[/css] as opposed to [b]TEXT[/b], but if you're using it in a template or in conjunction with other codes, it saves space and makes it easier to remove and replace, since you don't have to hunt around for the end tag.

font-weight, text-decoration

[in progress]
Troubleshooting guide to be put here!
Meu's AvatarMeu
Meu's Avatar
Meu's AvatarMeu
Meu's Avatar
Please contact me if I left anything out or need to fix something, which I probably do! Thanks! Thanks to the following for help! Mistress Ama Niet Eltafez Suriya BraveHearted Shuichi
coolcat12347's Avatarcoolcat12347
coolcat12347's Avatar
Sorry to bother, but what about gifs?
Thanks for the icon lovezim101!<br /> Come on, don’t cry. Everything’s going to be okay."
Eltafez's AvatarEltafez
Eltafez's Avatar
A gif is an image, which is already explained above.
Avatar by Psychøkin.

Links

Helpful: PFQ Rules | Staff Roster | Help Forums | PFQ Wiki Fan-made Tools: Calculator Personal: Journal | Comic
Template © Eltafez
Killjøy's AvatarKilljøy
Killjøy's Avatar
Sorry if you are already planning to add a guide for this but a guide on adding YouTube clips would be handy~ You can add video clips on Pokefarm Q right? this guide is soo handy btw~ *goes and uses every single code* thank you so much for creating it!
Edit: haha *hides in a corner* this post was so embarassing- Why was I so obsessed with century gothic an bold 8 months ago?!
Avatar: By the wonderful Nakoo
× 4 / 150
Meu's AvatarMeu
Meu's Avatar
Nope. Looks like the code for Youtube clips is no longer available. I'm glad you find it helpful. :]
Zan's AvatarZan
Zan's Avatar
whoakay the whole date/time thing is new (also I'm currently testing out one of the codes you mentioned and it's working great!!)
spleeeendid guide :]

This post contains one or more BBCode Errors and cannot be displayed properly.

Error: Unexpected [url] - [ul] does not allow it on line 1

If this is your post, please edit it to correct these errors. For now, the post will be shown raw, with no BBCode processing.

[styleclass=b][css=float:right;margin:10px 40px 0 -10px;width:95px;][css=font:10pt georgia;color:#73939b;line-spacing:1px;]phone lines follow us[/css][ul][url=http://mauxbot.deviantart.com/][li]deviantart[/li][/url] [url=https://pfq.link/~pbQg][li]art shop[css=display:none;] [pit="[!]"]new thread[/pit][/css][/li][/url] [url=https://pfq.link/~pJ55][li]meu[/li][/url] [url=http://pfq.link/~NSF][li]journal[css=font-size:6pt;float:right;][18+][/css][/li][/url][/ul][/css][/styleclass][style] .tooltip_content { background:rgba(68,75,85,.8); color:rgb(240,250,255); font-size:11pt; letter-spacing:1px; border:1px solid rgba(240,250,255,.7); } .bbcode_tooltip{ border-bottom-color:#e2edee; } .bbcode_tooltip:hover{ border-bottom-color:#73939b; } .notip{ .bbcode_tooltip { border-bottom:none; } } .b{ height:152px; background:url('https://i.imgur.com/VdkpApG.png'); text-align:center; letter-spacing:3px; } li{list-style:none; text-align:right; width:85px; background:rgba(0,20,20,.3); padding:1px 5px; font: 8pt georgia; -webkit-transition:all .6s; -moz-transition:all .6s; -o-transition:all .6s; transition:all .6s; float:right; margin-bottom:1px; border-width:0;} a{ color:#e2edee; margin-bottom:4px; text-decoration:none; } li:hover, a:hover{ background: transparent/* #c9dde2*/; color:#73939b; letter-spacing:4px; } li:hover{ border-style:solid; border-color:#73939b; width:94px; border-width:0 3px 0 0; } [/style]
Eltafez's AvatarEltafez
Eltafez's Avatar
Actually, the date/time BBCode existed even on PF1. xD

Pages: 123··· 400401402

Cannot post: Please log in to post

© PokéFarm 2009-2019 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page