BBCode: Difference between revisions

From PokéFarm Q Official Wiki
Jump to navigation Jump to search
m (Reverted edits by Save (talk) to last revision by ValleryP)
Tag: Rollback
 
(29 intermediate revisions by 9 users not shown)
Line 22: Line 22:




-->BBCode is a mechanic on PokéFarm Q that allows users to place objects into Forum Posts or [[Personal Messages]] that would be unachievable using regular text. Most BBCodes use the format:
-->BBCode is a mechanic on PokéFarm Q that allows users to place objects into Forum Posts, [[Personal Messages]], About Me profiles, or Signatures that would be unachievable using regular text. Most BBCodes use the format:
<code>[tag]text[/tag]</code> or <code>[tag=data]text[/tag]</code> however there are exceptions. An alternate guide to BBCode can be found on the forums of PokéFarm Q [https://pokefarm.com/forum/thread/1969/A-Somewhat-Extensive-Guide-to-BBCodes here].
<code>[tag]text[/tag]</code> or <code>[tag=data]text[/tag]</code>, however there are exceptions.


For further help with any of the following tags, use the [[#Help|<code>[help]</code>]] tag.
For further help with any of the following tags, use the [[#Help|<code>[help]</code>]] tag.
Line 29: Line 29:
__TOC__
__TOC__
==Basics==
==Basics==
Almost every BBCode is made of three parts.
Almost every BBCode consists of three parts.
*'''Opening Tag:'''
*'''Opening Tag:'''
:A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign.
: A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign.
::Example: <code>[keyword=parameter]</code> (or just <code>[keyword]</code>)
::Example: <code>[keyword=parameter]</code> (or just <code>[keyword]</code>)
*'''Contents:'''
*'''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.
: 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:'''
*'''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 forward slash followed by the same keyword as in the opening tag enclosed in square brackets. It never has any parameters.  
::Example: <code>[/keyword]</code>
::Example: <code>[/keyword]</code>
Note that when using BBCodes, it is important to be neat and organised. If using multiple BBCodes, make sure that you open and close them in reverse order, and do not open one BBCode inside another and then close it outside of the first.
Note that when using BBCodes, it is important to be neat and organised. If using multiple BBCodes, make sure that you open and close them in reverse order, and do not open one BBCode inside another and then close it outside of the first.
:For example, you should do:
: For example, you should do:
::<code>[example1][example2]example text[/example2][/example1]</code>
::<code>[example1][example2]example text[/example2][/example1]</code>
:You should not do:
:You should not do:
Line 46: Line 46:
::<code>[example1]example text 1 [example2]text 2[/example1] text 3[/example2]</code>
::<code>[example1]example text 1 [example2]text 2[/example1] text 3[/example2]</code>
BBCode can be used in the Forums, in Signatures, and in Personal Messages. BBCode can also be used, albeit to a lesser extent, in one's [[User_Page#About Me|About Me section]]. The {{Explain|Bold|<code>[[#Bold|[b]]]</code>}}, {{Explain|Italics|<code>[[#Italics|[i]]]</code>}} and {{Explain|Underline|<code>[[#Underline|[u]]]</code>}} BBCodes can also be used in Pokémon [[Summary Page#General|custom descriptions]].
BBCode can be used in the Forums, in Signatures, and in Personal Messages. BBCode can also be used, albeit to a lesser extent, in one's [[User_Page#About Me|About Me section]]. The {{Explain|Bold|<code>[[#Bold|[b]]]</code>}}, {{Explain|Italics|<code>[[#Italics|[i]]]</code>}} and {{Explain|Underline|<code>[[#Underline|[u]]]</code>}} BBCodes can also be used in Pokémon [[Summary Page#General|custom descriptions]].
==Guides==
There are a couple of very useful guides concerning BBCode on-site, where you can also ask questions to get guidance on using them.
*[https://pokefarm.com/user/:2x Meu]'s [https://pokefarm.com/forum/thread/1969/A-Somewhat-Extensive-Guide-to-BBCodes Somewhat Extensive Guide to BBCode] is very useful for the basics of BBCode and using them to create a cohesive and organised post for a store or journal, for example.
*[https://pokefarm.com/user/:bPV Aemilia]'s [https://pokefarm.com/forum/thread/335371/Guide-to-CSS-Beginner-to-Expert Guide to CSS] is very useful when making a template using the <code>[styleclass]</code> and <code>[style]</code> tags to design it, as well as various properties that also work within <code>[css]</code> tags.


==List of BBCodes==
==List of BBCodes==
Line 75: Line 80:
**'''SectionTitle:''' The title of the Section to be displayed.
**'''SectionTitle:''' The title of the Section to be displayed.
*Information
*Information
**The <code>[a-section]</code> BBCode is used inside with the <code>[accordion]</code> BBCode.
**The <code>[a-section]</code> BBCode is used inside with the <code>[accordion]</code> or <code>[stackbox]</code> BBCodes.
*Example
*Example
**<code>[accordion][a-section=SectionTitle]Content[/a-section][/accordion]</code>
**<code>[accordion][a-section=SectionTitle]Content[/a-section][/accordion]</code>
Line 89: Line 94:
*Information
*Information
**This BBCode is similar to the [[#Highlight|<code>[highlight]</code>]] BBCode, but allows the use of a URL and extends to the left and right borders.
**This BBCode is similar to the [[#Highlight|<code>[highlight]</code>]] BBCode, but allows the use of a URL and extends to the left and right borders.
**This BBCode should be used in conjunction with the [[#Colour|<code>[colour]</code>]] BBCode as other users may use a theme that changes the text colour to one similar to the highlight's colour.
**This BBCode should be used in conjunction with the [[#Colour|<code>[colour]</code>]] BBCode as other users may use a theme that changes the text colour to one similar to the background's colour.
**When using this code, do not forget to also define the text colour to match the legibility guidelines.
*Example
*Example
**<code>[background=#FF0000]Black text on a Red Background[/background]</code><br /><code>[background=red]Black text on a Red Background[/background]</code><br /><code>[background=rgba(255, 0, 0, 1)]Black text on a Red Background[/background]</code>
**<code>[background=#FF0000]Black text on a Red Background[/background]</code><br /><code>[background=red]Black text on a Red Background[/background]</code><br /><code>[background=rgba(255, 0, 0, 1)]Black text on a Red Background[/background]</code>
Line 122: Line 128:
*Information
*Information
**This BBCode should be used in conjunction with the [[#Highlight|<code>[highlight]</code>]] or [[#Background|<code>[background]</code>]] BBCode as other users may have a skin that changes the background colour to one similar to the text colour, or the background/text colour contrast may cause other users' eyes pain.
**This BBCode should be used in conjunction with the [[#Highlight|<code>[highlight]</code>]] or [[#Background|<code>[background]</code>]] BBCode as other users may have a skin that changes the background colour to one similar to the text colour, or the background/text colour contrast may cause other users' eyes pain.
**Make sure to follow the legibility guidelines to verify the colours are not too bright and can still be read on any skin.
**<code>[colour]</code> and <code>[color]</code> are interchangeable.
**<code>[colour]</code> and <code>[color]</code> are interchangeable.
*Example
*Example
Line 140: Line 147:
***Never set the <code>position</code> value to <code>fixed</code>.
***Never set the <code>position</code> value to <code>fixed</code>.
***Only set the <code>position</code> value to <code>absolute</code> if the container has a <code>position</code> value of <code>relative</code>.
***Only set the <code>position</code> value to <code>absolute</code> if the container has a <code>position</code> value of <code>relative</code>.
***Never use the <code>opacity</code> key on elements containing text. Use the <code>[colour]</code> BBCode using the <code>rgba(R,G,B,A)</code> format.
***Never use the <code>opacity</code> property on elements containing text. Use the <code>[colour]</code> BBCode using the <code>rgba(R,G,B,A)</code> format.
***Never set <code>width, height, min-width, min-height, max-width or max-height</code> to any value that causes the element to be unreasonably small or large.
***Never set <code>width, height, min-width, min-height, max-width or max-height</code> to any value that causes the element to be unreasonably small or large.
***Never use <code>overflow</code> as it can make scrolling tricky.
***Never use <code>overflow</code> as it can make scrolling tricky on mobile.
***Never use <code>cursor</code>. Changing the cursor without reason is a bad practice in web design.
***Never use <code>cursor</code>. Changing the cursor without reason is a bad practice in web design.
***Never use <code>filter</code>. Filters are only used by old versions of Internet Explorer and excessive use can cause major lag.
***Never use <code>filter</code>. Filters are only used by old versions of Internet Explorer and excessive use can cause major lag.
***Never set <code>background-attachment</code> to <code>fixed</code> as it can become extremely distracting.
***Never set <code>background-attachment</code> to <code>fixed</code> as it can become extremely distracting.
**While this code is extremely complex to people just getting started, it does allow more flexibility in designing your post!
*Example
*Example
**<code>[css=background-color: #202020; border-radius: 16px; padding: 8px; font-size: 14pt; color: #ffffff]There is no limit to how much CSS you can cram in there.[/css]</code>
**<code>[css=background-color: #202020; border-radius: 16px; padding: 8px; font-size: 14pt; color: #ffffff]There is no limit to how much CSS you can cram in there.[/css]</code>
Line 154: Line 162:
**<code>[datetime]YYYY-MM-DD hh:mm:ss[/datetime]</code>
**<code>[datetime]YYYY-MM-DD hh:mm:ss[/datetime]</code>
**<code>[datetime]any supported format[/datetime]</code>
**<code>[datetime]any supported format[/datetime]</code>
**<code>[datetime=Format]YYYY-MM-DD hh:mm:ss[/datetime]</code>
**<code>[datetime=Format]now[/datetime]</code>
*Parameter
**<b>Optional [<i>Format</i>]</b>: A format for the date and time to be returned in. The basic date-time format can be achieved with <code>Y-m-d H:i:s</code> returning the date and time as <code>YYYY-MM-DD hh:mm:ss</code>.
***Accepted values can be found on <u>php.net/manual/en/datetime.format.php</u>. Providing characters not found here or whitespace works, and can be used to format the returned value as desired.
***<b>Character case matters</b>! Uppercase <code>Y</code> is not the same as lowercase <code>y</code> for example; the first represents the full length year <code>YYYY</code> while the second represents the last two digits of the year <code>YY</code>.
*Information
*Information
**The basic date-time format is <code>YYYY-MM-DD hh:mm:ss</code> (Year-Month-Date Hour:Minutes:Seconds).
**The basic date-time format is <code>YYYY-MM-DD hh:mm:ss</code> (Year-Month-Date Hour:Minutes:Seconds).
**Many formats are supported, to see if your format is, check on [http://php.net/manual/en/datetime.formats.php php.net]. If the time displayed is <code>Never</code> then the format used is not supported.
**Many formats are supported, to see if your format is, check on <u>php.net/manual/en/datetime.formats.php</u>. If the time displayed is <code>Never</code> then the format used is not supported.
*Example
**Providing the optional parameter will return the date and time between the tags in the format specified, while not providing the optional parameter will instead give an approximation of when the given date and time is or was (e.g. <code>in 5 months</code>, <code>2 hours ago</code>).
**The wiki does not support this BBCode. Basically, if the time set was 5 seconds from the current time it would display as <code>in 5 seconds</code>; if the time set was 2 hours in the past it would display as <code>2 hours ago</code>.
**Supplementing <code>now</code> in place of a formatted date and time between the tags gives the current time. This will automatically update to the current time whenever the page is refreshed.
*Examples
**<b>The wiki does not support this BBCode</b>. As such, the following examples are based upon the time of editing this section: <code>2023-07-04 18:25:00</code>.
**Leaving the optional parameter blank:
***<code>[datetime]2017-01-01[/datetime]</code>
****<code>6 years ago</code>
***<code>[datetime]July 4th, 2023 22:00:00[/datetime]</code>
****<code>in 3 hours</code>
***<code>[datetime]now[/datetime]</code>
****<code>just now</code> (This will never change, because <code>now</code> is always now).
**Providing the optional parameter:
***<code>[datetime=F jS, Y]2018-02-14[/datetime]</code>
****<code>February 14th, 2018</code>
***<code>[datetime=d/m/Y @ h:i:s A]2022-12-30 20:30:55[/datetime]</code>
****<code>30/12/2022 @ 08:30:55 PM</code>
***<code>[datetime=Y-m-d H:i:s]now[/datetime]</code>
****<code>2023-07-04 18:25:00</code> (On the main site, this will update itself to the current time whenever the page is loaded)


===Display===
===Display===
Line 240: Line 270:
**Images used on the site must be credited.
**Images used on the site must be credited.
*Example
*Example
**<code>[img]<nowiki>http://pokefarm.wiki/images/3/33/Dawnstone.png</nowiki>[/img]</code>
**<code>[img]<nowiki>https://pokefarm.wiki/images/3/33/Dawnstone.png</nowiki>[/img]</code>
**[[File:Dawn_Stone.png]]
**[[File:Dawn_Stone.png]]


Line 250: Line 280:
**<code>[inventory=CurrencyName-Reserved Amount]</code>
**<code>[inventory=CurrencyName-Reserved Amount]</code>
**<code>[inventory=TypeRace]</code>
**<code>[inventory=TypeRace]</code>
**<code>[inventory=ShinyChain]</code>
**<code>[inventory=ShinyShiny]</code>
*Parameters
*Parameters
**'''ItemName: '''Name of the item.
**'''ItemName: '''Name of the item.
Line 259: Line 291:
**'''TypeRace: ''' How many points the user has earned in the current month's [[Type Race]]
**'''TypeRace: ''' How many points the user has earned in the current month's [[Type Race]]
**'''Optional [''ReservedAmount'']: '''Number to be subtracted from current amount.
**'''Optional [''ReservedAmount'']: '''Number to be subtracted from current amount.
**'''ShinyChain:''' How many of the same Pokémon has been hatched in the currently active chain.
**'''ShinyShiny:''' How many Shiny Pokémon has been hatched in a currently active chain.
*Information
*Information
**'''First variant: '''Shows how many of the specified item you have.
**'''First variant: '''Shows how many of the specified item you have.
Line 288: Line 322:
***<code>[inventory=TypeRace-10]</code>
***<code>[inventory=TypeRace-10]</code>
****190
****190
**Assuming the user has hatched 33 Shiny Pokémon in a chain of 2508 Pokémon
***<code>[inventory=ShinyShiny]/[inventory=ShinyChain]</code>
****33/2508


===Italics===
===Italics===
Line 314: Line 351:
*Information
*Information
**Achieves the same results as hitting <kbd>Enter</kbd> but can be useful for condensing a code to take up fewer lines or even making it more readable in some cases.
**Achieves the same results as hitting <kbd>Enter</kbd> but can be useful for condensing a code to take up fewer lines or even making it more readable in some cases.
**If for some reason normal line breaks are ignored when previewing and submitting your post, this forces a line break to appear despite normal line breaks being ignored.
*Example
*Example
**<code>Text[br]More text</code>
**<code>Text[br]More text</code>
Line 363: Line 401:
**Very large or very small numbers may not behave as expected.
**Very large or very small numbers may not behave as expected.
**The <code>[math]</code> code can be useful when combined with the [[#Inventory|<code>[inventory]</code>]] tag.
**The <code>[math]</code> code can be useful when combined with the [[#Inventory|<code>[inventory]</code>]] tag.
**The <code>[math]</code> code can be wrapped with the [[#Number|<code>[number]</code>]] tag as well to format the result.
*Examples
*Examples
**Assuming the user has 83 Dark Gems:
**Assuming the user has 83 Dark Gems:
Line 389: Line 428:
**<code>[nobbcode]Text[/nobbcode]</code>
**<code>[nobbcode]Text[/nobbcode]</code>
*Information
*Information
**This BBCode Stops the text inside being formatted by the site.
**This BBCode stops the text inside being formatted by the site.
**This BBCode is usually used to display BBCode without causing the code to format its content.
**This BBCode is usually used to display BBCode without causing the code to format its content.
*Example
*Example
Line 402: Line 441:
***Note that if any non-digit characters are nested within the <code>[number]</code> tags, the number will only display up to the first non-digit character.
***Note that if any non-digit characters are nested within the <code>[number]</code> 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.
***Any zeros at the beginning of a number are also not displayed.
**This tag is especially useful when combined with the [[#Inventory|<code>[inventory]</code>]] tag.
**This tag is especially useful when combined with the [[#Inventory|<code>[inventory]</code>]] or [[#Math|<code>[math]</code>]] tags.
*Examples
*Examples
**<code>[number]0001234567890[/number]</code>
**<code>[number]0001234567890[/number]</code>
Line 421: Line 460:


===Pokémon===
===Pokémon===
*Tag
{{Note|For a full list of Minisprite codes please check out the [[PKMN Code Compendium]].}}*Tag
**<code>[pkmn=PokemonName/FormeName (Modifier)]</code>
**<code>[pkmn=PokemonName/FormeName (Modifier)]</code>
*Parameters
*Parameters
Line 429: Line 468:
*Information
*Information
**Shows an icon of the specified Pokémon. If ''FormeName'' is specified, shows an icon of the specified Pokémon, in the specified Forme.
**Shows an icon of the specified Pokémon. If ''FormeName'' is specified, shows an icon of the specified Pokémon, in the specified Forme.
**For [[Exclusive Pokémon]] you must use an empty ''FormeName''. Otherwise, you will get a generic (non-exclusive) Pokémon icon.
**For [[Exclusive Pokémon]], you must use an empty ''FormeName''. Otherwise, you will get a generic (non-exclusive) Pokémon icon.
**You can get a generic Pokémon icon by using "Missing Number" as the ''PokemonName''.
**Unlike ''FormeName'', ''Modifier'' utilizes parentheses instead of slashes. If ''Modifier'' is specified, shows an icon of the specified variant. If no icon exists for the specified variant, the normal icon will be displayed instead.  
**Unlike ''FormeName'', ''Modifier'' utilizes parentheses instead of slashes. If ''Modifier'' is specified, shows an icon of the specified variant. If no icon exists for the specified variant, the normal icon will be displayed instead.  
**To use the Modifier for shiny, albino, or melanistic Pokémon, you must use capital letters: (S) for shiny, (A) for albino, and (M) for melanistic.
**To use the Modifier for shiny, albino, or melanistic Pokémon, you must use capital letters: (S) for shiny, (A) for albino, and (M) for melanistic.
Line 447: Line 487:
**<code>[pkmn=Mightyena (A)/Mega Forme Q]</code>
**<code>[pkmn=Mightyena (A)/Mega Forme Q]</code>
**[[File:Icon_Mega_Mightyena_Q_Albino.png]]
**[[File:Icon_Mega_Mightyena_Q_Albino.png]]
**<code>[pkmn=Missing Number/]</code>
**[[File:Icon_Missing_Number.png]]
===Pokémon Panel===
===Pokémon Panel===
*This bit of BBCode shows a Pokémon card in any post allowing BBCode (ex. about me, forum post, signatures, etc.). You can feed the Pokémon, view any item they are holding, etc. as if you were on the owner's profile.  
*This bit of BBCode shows a Pokémon card in any post allowing BBCode (ex. about me, forum post, signatures, etc.). You can feed the Pokémon, view any item they are holding, etc. as if you were on the owner's profile.  
Line 453: Line 496:
*Examples
*Examples
**<code>[pkmnpanel=L3hKv]</code>
**<code>[pkmnpanel=L3hKv]</code>
**[[File:Pokémon_Panel_Example_1.png]]
**[[File:Pokemon_Panel_Example_1.png]]
**<code>[pkmnpanel=gqg]</code>
**<code>[pkmnpanel=gqg]</code>
**[[File:Pokémon_Panel_Example_2.png]]
**[[File:Pokemon_Panel_Example_2.png]]
**<code>[pkmnpanel=gq5]</code>
**<code>[pkmnpanel=gq5]</code>
**[[File:Pokémon_Panel_Example_3.png]]
**[[File:Pokemon_Panel_Example_3.png]]


===Progress Bar===
===Progress Bar===
Line 505: Line 548:
*Information
*Information
**This BBCode is used to change the font size of the text.
**This BBCode is used to change the font size of the text.
**The size can be within the range of 6 (tiny) and 99 (obscenely huge) but any size below 8 or above 15 typically should be avoided.<ref>Sei. [https://pokefarm.com/forum/post/1362891 "Legibility Guidelines"]. News Archive, 2016.</ref>  
**The size can be within the range of 6 (tiny) and 99 (obscenely huge) but any size below 10 or above 15 typically should be avoided.<ref>Cele. [https://pokefarm.com/forum/thread/316177/Legibility-Template-Rules "Legibility Guidelines"]. Guides, 2021.</ref>  
*Example
*Example
**<code>[size=8]Size 8 Text[/size]</code>
**<code>[size=10]Size 10 Text[/size]</code>
**<span style="font-size:8pt;">Size 8 Text</span>
**<span style="font-size:10pt;">Size 10 Text</span>


===Stackbox===
===Stackbox===
Line 535: Line 578:
*Information
*Information
**An extended version of [[#CSS|<code>[css]</code>]] BBCode. Declares custom CSS for the post. May declare custom CSS classes for use with [[#Style_Class|<code>[styleclass]</code>]] BBCode.
**An extended version of [[#CSS|<code>[css]</code>]] BBCode. Declares custom CSS for the post. May declare custom CSS classes for use with [[#Style_Class|<code>[styleclass]</code>]] BBCode.
**'''Can be used only once per post, any subsequent occurrences are ignored.'''
**This allows for the greatest flexibility of designing your post, however, it is also the most complex way to modify content within the post.
**'''Can be used multiple times per post, however, there is little point in it as no matter where the <code>[style]</code> tag is located within the post, it will still affect everything within it.'''
**The guidelines and restrictions are the same as for [[#CSS|<code>[css]</code>]] BBCode.
**The guidelines and restrictions are the same as for [[#CSS|<code>[css]</code>]] BBCode.
**Skin-dependent values are available:
**Skin-dependent values are available:
Line 593: Line 637:
*Information
*Information
**Applies a CSS class declared within a [[#Style|<code>[style]</code>]] BBCode or one of the above skin-dependent classes to a post fragment.
**Applies a CSS class declared within a [[#Style|<code>[style]</code>]] BBCode or one of the above skin-dependent classes to a post fragment.
**You can reuse the same Class later in a post if you would like the same effects applied to it.
**<code>[styleclass]</code> and <code>[sc]</code> are interchangeable.  
**<code>[styleclass]</code> and <code>[sc]</code> are interchangeable.  
*Example
*Example
Line 633: Line 678:
**This BBCode is used in conjunction with the [[#Table_Cell|<code>[td]</code>]], [[#Table_Heading|<code>[th]</code>]] and [[#Table_Row|<code>[tr]</code>]] BBCodes to create a table.
**This BBCode is used in conjunction with the [[#Table_Cell|<code>[td]</code>]], [[#Table_Heading|<code>[th]</code>]] and [[#Table_Row|<code>[tr]</code>]] BBCodes to create a table.
**This BBCode alone does nothing but serves as a container for the rest of the table BBCodes.
**This BBCode alone does nothing but serves as a container for the rest of the table BBCodes.
**If you add more [[#Table_Cell|<code>[td]</code>]], [[#Table_Heading|<code>[th]</code>]] and [[#Table_Row|<code>[tr]</code>]] codes, the height will change and more boxes will be added.
**If you add more [[#Table_Cell|<code>[td]</code>]], [[#Table_Heading|<code>[th]</code>]] and [[#Table_Row|<code>[tr]</code>]] codes, the height and width will change and more boxes will be added.
*Example
*Example
**<code>[table][tr][th]Table Heading[/th][/tr][tr][td]Table Cell[/td][/tr][/table]</code>
**<code>[table][tr][th]Table Heading[/th][/tr][tr][td]Table Cell[/td][/tr][/table]</code>
Line 689: Line 734:
*Parameters
*Parameters
**'''Text:''' The text that is normally displayed without hovering.
**'''Text:''' The text that is normally displayed without hovering.
**'''PitText: '''The text to be displayed when the user hovers over the text.
**'''PitText: ''' The text to be displayed when the user hovers over the text.
*Information
*Information
**This BBCode is used to show a tooltip when the user's cursor hovers over the text. It works the same as the tip-BBCode with its parameters switched around. This can be useful if there is a long string of text including BBcode that should be displayed in the tooltip.
**This BBCode is used to show a tooltip when the user's cursor hovers over the text. It works the same as the tip-BBCode with its parameters switched around. This can be useful if there is a long string of text including BBcode that should be displayed in the tooltip.
Line 736: Line 781:
*Information
*Information
**This BBCode is used to direct the user to a new page upon clicking the link created.
**This BBCode is used to direct the user to a new page upon clicking the link created.
**You may also hear them referred to simply as links.
*Example
*Example
**<code><nowiki>[url=http://pokefarm.wiki/EggDex]EggDex[/url]</nowiki></code>
**<code><nowiki>[url=http://pokefarm.wiki/EggDex]EggDex[/url]</nowiki></code>
**[[EggDex]]
**[[EggDex]]
===Youtube===
*Tag
**<code>[youtube]YouTubeID[/youtube]</code>
*Parameters
**'''YouTubeID: ''' A YouTube video's unique URL ID. A video's ID is the last string of chracter's in a video's URL (<nowiki>http://www.youtube.com/watch?v=</nowiki>'''YouTubeID''').
*Information
**This BBCode produces a YouTube video player.
*Example
**<code><nowiki>[youtube]okMK1NYRySI[/youtube]</nowiki></code>
**[[File:YouTube_Example.png]]


==Notes==
==Notes==
*When defining parameters that use brackets (<code>[</code> and <code>]</code>), quotes may be used to stop the parser looking for the first right bracket.
*When defining parameters that use brackets (<code>[</code> and <code>]</code>), quotes may be used to stop the parser looking for the first right bracket.
::E.g. <code>[tip="This tip uses brackets! [[ ] [ ][ ] ]"]Brackets![/tip]</code>
::E.g. <code>[tip="This tip uses brackets! [[ ] [ ][ ] ]"]Brackets![/tip]</code>
*If one were to end a line with <code>[</code> then start the next with <code>]</code>, then the newline is ignored. Furthermore, any other characters are ignored up until the first right bracket. This allows for for easier organisation.
*If one were to end a line with <code>[</code> then start the next with <code>]</code>, then the new line is ignored. Furthermore, any other characters are ignored up until the first right bracket. This allows for for easier organisation.
::Example:
::Example:
:::<code><nowiki>[url=http://pokefarm.wiki/BBCode#Notes][</nowiki></code>
:::<code><nowiki>[url=http://pokefarm.wiki/BBCode#Notes][</nowiki></code>
Line 760: Line 795:
::::<code>]Wowie, this sure is a link![</code>
::::<code>]Wowie, this sure is a link![</code>
:::<code>][/url]</code>
:::<code>][/url]</code>
:::results in
:::[[#Notes|Wowie, this sure is a link!]]
*If one were to end a line with <code>[*</code> and then have <code>*]</code> a few lines after (or even the next line), then all of the new lines and all characters are ignored in between, including BBCode that may have been defined within it. This allows for ease when temporarily removing sections from a post while preserving it in the same form in the event one needs it again at a later date.
::Example:
:::<code><nowiki>[url=http://pokefarm.wiki/BBCode#Notes][*</nowiki></code>
::::<code>[b]This text is after a newline,[/b] after a left bracket, and [u]will not be visible.[/u]</code>
::::<code>*]Wowie, this sure is a link![*</code>
:::<code>*][/url]</code>
:::results in
:::results in
:::[[#Notes|Wowie, this sure is a link!]]
:::[[#Notes|Wowie, this sure is a link!]]

Latest revision as of 01:12, 22 October 2023

BBCode is a mechanic on PokéFarm Q that allows users to place objects into Forum Posts, Personal Messages, About Me profiles, or Signatures that would be unachievable using regular text. Most BBCodes use the format: [tag]text[/tag] or [tag=data]text[/tag], however there are exceptions.

For further help with any of the following tags, use the [help] tag.

Basics

Almost every BBCode consists of three parts.

  • Opening Tag:
A keyword enclosed in square brackets, occasionally accompanied by a parameter that is specified with an equals sign.
Example: [keyword=parameter] (or just [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.
Example: [/keyword]

Note that when using BBCodes, it is important to be neat and organised. If using multiple BBCodes, make sure that you open and close them in reverse order, and do not open one BBCode inside another and then close it outside of the first.

For example, you should do:
[example1][example2]example text[/example2][/example1]
You should not do:
[example1][example2]example text[/example1][/example2]
You should also not do:
[example1]example text 1 [example2]text 2[/example1] text 3[/example2]

BBCode can be used in the Forums, in Signatures, and in Personal Messages. BBCode can also be used, albeit to a lesser extent, in one's About Me section. The [b], [i] and [u] BBCodes can also be used in Pokémon custom descriptions.

Guides

There are a couple of very useful guides concerning BBCode on-site, where you can also ask questions to get guidance on using them.

  • Meu's Somewhat Extensive Guide to BBCode is very useful for the basics of BBCode and using them to create a cohesive and organised post for a store or journal, for example.
  • Aemilia's Guide to CSS is very useful when making a template using the [styleclass] and [style] tags to design it, as well as various properties that also work within [css] tags.

List of BBCodes

The list is in alphabetical order. The format for this list is as follows:

  • Code Name
    • Tag(s): Syntax of the BBCode tag.
    • Parameter(s): What you can change about the code, if applicable.
    • Information: Any other important information, if applicable.
    • Example: An example of the BBCode in use (if it can be properly displayed).

Accordion

  • Tag
    • [accordion]Panels[/accordion]
    • [accordion=DefaultPanel]Panels[/accordion]
  • Parameters
    • DefaultPanel: (optional) Panel number to be displayed by default.
  • Information
    • The Accordion is used to display one panel at a time, the panels being [a-section] BBCodes.
    • This BBCode is complicated and should only be used if you know what you are doing.
  • Example
    • [accordion=1]
      [a-section=Example 1]Content 1[/a-section]
      [a-section=Example 2]Content 2[/a-section]
      [a-section=Example 3]Content 3[/a-section]
      [/accordion]

Accordion Section

  • Tag
    • [a-section=SectionTitle]Content[/a-section]
  • Parameters
    • SectionTitle: The title of the Section to be displayed.
  • Information
    • The [a-section] BBCode is used inside with the [accordion] or [stackbox] BBCodes.
  • Example
    • [accordion][a-section=SectionTitle]Content[/a-section][/accordion]
    • See the [accordion] BBCode.

Background

  • Tag
    • [background=BackgroundColour]Content[/background]
    • [background=BackgroundURL]Content[/background]
  • Parameters
    • BackgroundColour: A colour code denoting the colour of the background to be displayed.
    • BackgroundURL: A URL to an image to use as the background of the Content.
  • Information
    • This BBCode is similar to the [highlight] BBCode, but allows the use of a URL and extends to the left and right borders.
    • This BBCode should be used in conjunction with the [colour] BBCode as other users may use a theme that changes the text colour to one similar to the background's colour.
    • When using this code, do not forget to also define the text colour to match the legibility guidelines.
  • Example
    • [background=#FF0000]Black text on a Red Background[/background]
      [background=red]Black text on a Red Background[/background]
      [background=rgba(255, 0, 0, 1)]Black text on a Red Background[/background]
    • Black text on a Red Background

Bold

  • Tag
    • [b]Text[/b]
  • Information
    • This BBCode is used to create Bold text.
  • Example
    • [b]Bold Text[/b]
    • Bold Text

Centre

  • Tag
    • [centre]Text[/centre]
    • [center]Text[/center]
  • Information
    • This BBCode is used to centre the content to the middle of its container.
    • [centre] and [center] are interchangeable.
  • Example
    • [centre]Centred Text[/centre]
    • Centred Text

Colour

  • Tags
    • [colour=Colour]Text[/colour]
    • [color=Colour]Text[/color]
  • Parameters
    • Colour: A colour code denoting the colour of the text to be displayed. May be set to transparent. In that case, the text will be visible only when highlighted.
  • Information
    • This BBCode should be used in conjunction with the [highlight] or [background] BBCode as other users may have a skin that changes the background colour to one similar to the text colour, or the background/text colour contrast may cause other users' eyes pain.
    • Make sure to follow the legibility guidelines to verify the colours are not too bright and can still be read on any skin.
    • [colour] and [color] are interchangeable.
  • Example
    • [color=#FF0000]Red Text[/color]
      [colour=red]Red Text[/colour]
      [color=rgba(255, 0, 0, 1)]Red Text[/color]
    • Red Text
    • ([color=transparent]Hidden Text[/color])
    • (Hidden Text)
      • Highlight the empty area within parentheses to reveal hidden text.

CSS

  • Tag
    • [css=CSSStyling]Content[/css]
  • Parameters
    • CSSStyling: The style that should be applied to the content.
  • Information
    • This BBCode is complicated and should only be used if you know what you are doing.
    • There are a few guidelines for use of this BBCode:
      • Never set the position value to fixed.
      • Only set the position value to absolute if the container has a position value of relative.
      • Never use the opacity property on elements containing text. Use the [colour] BBCode using the rgba(R,G,B,A) format.
      • Never set width, height, min-width, min-height, max-width or max-height to any value that causes the element to be unreasonably small or large.
      • Never use overflow as it can make scrolling tricky on mobile.
      • Never use cursor. Changing the cursor without reason is a bad practice in web design.
      • Never use filter. Filters are only used by old versions of Internet Explorer and excessive use can cause major lag.
      • Never set background-attachment to fixed as it can become extremely distracting.
    • While this code is extremely complex to people just getting started, it does allow more flexibility in designing your post!
  • Example
    • [css=background-color: #202020; border-radius: 16px; padding: 8px; font-size: 14pt; color: #ffffff]There is no limit to how much CSS you can cram in there.[/css]
    • There is no limit to how much CSS you can cram in there.

Date-Time

  • Tag
    • [datetime]YYYY-MM-DD hh:mm:ss[/datetime]
    • [datetime]any supported format[/datetime]
    • [datetime=Format]YYYY-MM-DD hh:mm:ss[/datetime]
    • [datetime=Format]now[/datetime]
  • Parameter
    • Optional [Format]: A format for the date and time to be returned in. The basic date-time format can be achieved with Y-m-d H:i:s returning the date and time as YYYY-MM-DD hh:mm:ss.
      • Accepted values can be found on php.net/manual/en/datetime.format.php. Providing characters not found here or whitespace works, and can be used to format the returned value as desired.
      • Character case matters! Uppercase Y is not the same as lowercase y for example; the first represents the full length year YYYY while the second represents the last two digits of the year YY.
  • Information
    • The basic date-time format is YYYY-MM-DD hh:mm:ss (Year-Month-Date Hour:Minutes:Seconds).
    • Many formats are supported, to see if your format is, check on php.net/manual/en/datetime.formats.php. If the time displayed is Never then the format used is not supported.
    • Providing the optional parameter will return the date and time between the tags in the format specified, while not providing the optional parameter will instead give an approximation of when the given date and time is or was (e.g. in 5 months, 2 hours ago).
    • Supplementing now in place of a formatted date and time between the tags gives the current time. This will automatically update to the current time whenever the page is refreshed.
  • Examples
    • The wiki does not support this BBCode. As such, the following examples are based upon the time of editing this section: 2023-07-04 18:25:00.
    • Leaving the optional parameter blank:
      • [datetime]2017-01-01[/datetime]
        • 6 years ago
      • [datetime]July 4th, 2023 22:00:00[/datetime]
        • in 3 hours
      • [datetime]now[/datetime]
        • just now (This will never change, because now is always now).
    • Providing the optional parameter:
      • [datetime=F jS, Y]2018-02-14[/datetime]
        • February 14th, 2018
      • [datetime=d/m/Y @ h:i:s A]2022-12-30 20:30:55[/datetime]
        • 30/12/2022 @ 08:30:55 PM
      • [datetime=Y-m-d H:i:s]now[/datetime]
        • 2023-07-04 18:25:00 (On the main site, this will update itself to the current time whenever the page is loaded)

Display

  • Tag
    • [display=PanelTitle]Content[/display]
  • Parameters
    • PanelTitle: The title of the Panel to be displayed.
  • Information
    • This BBCode displays a Panel with a Title and a border around the Content.
    • This BBCode is similar to the [hide] BBCode, but does not have the collapsible functionality.
  • Example
    • [display=Example]Content[/display]

Headings

  • Tags
    • [h1]Text[/h1]
    • [h2]Text[/h2]
    • [h3]Text[/h3]
  • Information
    • This BBCode creates a heading, usually used to separate sections of a post.
    • The Text within this BBCode is bolded, centred and made larger.
    • [h1] creates the largest heading whilst [h3] creates the smallest.
  • Example
    • [h1]Heading 1[/h1]
      [h2]Heading 2[/h2]
      [h3]Heading 3[/h3]
    • Heading 1

      Heading 2

      Heading 3

Help

  • Tag
    • [help=BBTag]
  • Parameters
    • BBTag: A valid BBCode tag.
  • Information
    • This BBCode shows a short explanation for the BBCode specified as BBTag.
    • Usage of this BBCode is technically treated as an error. Therefore, it is not possible to submit a text with this code unless it is enclosed in the [nobbcode] tags.
  • Example
    • [help=pkmn]
    • Help: [pkmn] — Pokémon icon
      Show the icon of the specified Pokémon. Add / then a Forme name for a specific Forme. Add (F) after the name to get the female icon. (S)hiny, (A)lbino and (M)elanistic icons can be specified, although if these sprites haven't been fully implemented yet then they will use the default sprite instead.
      Example usage:
      [pkmn=Pikachu] [pkmn=Nidoran (F)] [pkmn=Unown/X Forme] [pkmn=Venusaur/Mega Forme (F)(S)]

Hide

  • Tag
    • [hide=PanelTitle]Content[/hide]
  • Parameters
    • PanelTitle: The title of the Panel to be displayed.
  • Information
    • This BBCode is very similar to the [display] BBCode, the only difference is the collapsible functionality.
    • It is also very similar to the [accordion] BBCode, the difference being the number of tabs and complexity of the code.
  • Example
    • [hide=Example]Content[/hide]

Highlight

  • Tag
    • [highlight=HighlightColour]Text[/highlight]
  • Parameters
    • HighlightColour: A colour code denoting the colour of the text highlight to be displayed.
  • Information
    • This BBCode is very similar to the [background] BBCode but does not extend to the borders of its container.
    • It should not be used without the text inside of it having a colour, and bright highlights should be avoided.
  • Example
    • [highlight=#F00]Black text with a Red highlight[/highlight]
      [highlight=red]Black text with a Red highlight[/highlight]
      [highlight=rgba(255, 0, 0, 1)]Black text with a Red highlight[/highlight]
    • Black text with a Red highlight

Horizontal Line

  • Tag
    • [hr]
  • Information
    • This BBCode creates a horizontal rule. It can be used to separate sections on a post.
    • Unlike many other BBCodes, this BBCode does not have any content or ending tag.
  • Example
    • [hr]

Images

  • Tag
    • [img]ImageURL[/img]
  • Information
    • The image displayed by this BBCode should be in PNG, JPG or GIF format.
    • If an image is too large to display in its container it will be automatically scaled to fit in the container.
    • Images used on the site must be credited.
  • Example
    • [img]https://pokefarm.wiki/images/3/33/Dawnstone.png[/img]

Inventory

  • Tag
    • [inventory=ItemName]
    • [inventory=ItemName-ReservedAmount]
    • [inventory=CurrencyName]
    • [inventory=CurrencyName-Reserved Amount]
    • [inventory=TypeRace]
    • [inventory=ShinyChain]
    • [inventory=ShinyShiny]
  • Parameters
    • ItemName: Name of the item.
    • CurrencyName: Name of the Currency
      • Currently Restricted to the following:
        • [inventory=Credits] for Credits
        • [inventory=Gold] for Gold Poké
        • [inventory=Zophan] for Zophan Canisters
    • TypeRace: How many points the user has earned in the current month's Type Race
    • Optional [ReservedAmount]: Number to be subtracted from current amount.
    • ShinyChain: How many of the same Pokémon has been hatched in the currently active chain.
    • ShinyShiny: How many Shiny Pokémon has been hatched in a currently active chain.
  • Information
    • First variant: Shows how many of the specified item you have.
    • Second variant: Shows how many of the specified item you have, minus the number given.
  • Examples
    • Assuming the user has 83 Dark Gems:
      • [inventory=Dark Gem]
        • 83
      • [inventory=Dark Gem-10]
        • 73
    • Assuming the user has 1000 Credits:
      • [inventory=Credits]
        • 1000
      • [inventory=Credits-10]
        • 990
    • Assuming the user has 100 Gold Poké:
      • [inventory=Gold]
        • 100
      • [inventory=Gold-10]
        • 90
    • Assuming the user has 10 Zophan Canisters:
      • [inventory=Zophan]
        • 10
      • [inventory=Zophan-10]
        • 0
    • Assuming the user has completed their Personal Goal:
      • [inventory=TypeRace]
        • 200
      • [inventory=TypeRace-10]
        • 190
    • Assuming the user has hatched 33 Shiny Pokémon in a chain of 2508 Pokémon
      • [inventory=ShinyShiny]/[inventory=ShinyChain]
        • 33/2508

Italics

  • Tag
    • [i]Text[/i]
  • Information
    • This BBCode is used to create Italicized text.
  • Example
    • [i]Italic Text[/i]
    • Italic Text

Item

  • Tag
    • [item=ItemName]
  • Parameters
    • ItemName: Name of the item.
  • Information
    • Shows an icon of the specified item.
  • Example
    • [item=Dark Gem]

Line Break

  • Tag
    • [br]
  • Information
    • Achieves the same results as hitting Enter but can be useful for condensing a code to take up fewer lines or even making it more readable in some cases.
    • If for some reason normal line breaks are ignored when previewing and submitting your post, this forces a line break to appear despite normal line breaks being ignored.
  • Example
    • Text[br]More text
    • Text
      More text

Lists, Unordered

  • Tag
    • [ul]List Items[/ul]
  • Information
    • This BBCode creates an Unordered List.
    • For this BBCode to display it must contain List Items. See [li].
  • Example
    • [ul][li]List Item 1[/li][li]List Item 2[/li][/ul]
      • List Item 1
      • List Item 2

Lists, Ordered

  • Tag
    • [ol]List Items[/ol]
  • Information
    • This BBCode creates an Ordered List.
    • For this BBCode to display it must contain List Items. See [li].
  • Example
    • [ol][li]List Item 1[/li][li]List Item 2[/li][/ol]
      1. List Item 1
      2. List Item 2

List Item

  • Tag
    • [li]Content[/li]
  • Information
    • This BBCode does not display properly unless within a [ul] or [ol] BBCode.
    • This BBCode is used to define a list item within a parent list.
  • Example
    • See above for an example of this BBCode's use.

Math

  • Tag
    • [math]Content[/math]
  • Information
    • Supports all the basic mathematical operations.
      • + and - for addition/subtraction
      • * and / for multiplication/division
      • ^ for exponentiation
      • () for defining precedence.
    • Spaces are ignored.
    • Fractional numbers are rounded to two decimal places.
    • Division by zero results in zero.
    • Very large or very small numbers may not behave as expected.
    • The [math] code can be useful when combined with the [inventory] tag.
    • The [math] code can be wrapped with the [number] tag as well to format the result.
  • Examples
    • Assuming the user has 83 Dark Gems:
      • [progress="[inventory=Dark Gem]/275"][math][inventory=Dark Gem] / 275 * 100[/math]% Dark Gem progress[/progress]
    • [math]1 + 2 * 3[/math]
    • 7
    • [math]3 ^ 4[/math]
    • 81
    • [math]81 ^ (1/2)[/math]
    • 9 (square root)

Mature

  • Tag
    • [mature]Content[/mature]
  • Information
    • This BBCode provides a [display]-like box which shows up only for logged-in 18+ users. Guests and users under 18 years cannot view its contents, even by inspecting the page source code.
    • This BBCode works only in the About Me section.
  • Example
    • [mature]Content[/mature]
    • Guests and users under 18 years will not see anything in this place.

No BBCode

  • Tag
    • [nobbcode]Text[/nobbcode]
  • Information
    • This BBCode stops the text inside being formatted by the site.
    • This BBCode is usually used to display BBCode without causing the code to format its content.
  • Example
    • [nobbcode][b]Bold Text[/b][/nobbcode]
    • [b]Bold Text[/b]

Number

  • Tag
    • [number]Number[/number]
  • Information
    • 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.
    • This tag is especially useful when combined with the [inventory] or [math] tags.
  • Examples
    • [number]0001234567890[/number]
    • 1,234,567,890
    • Assuming the user has 5,488,386 Credits:
[number][inventory=credits][/number]
  • 5,488,386
Without the [number] tag, this would have just displayed as "5488386" without comma separators.

Overline

  • Tag
    • [o]Text[/o]
  • Information
    • This BBCode is used to create text with an overline.
  • Example
    • [o]Overlined Text[/o]
    • Overlined Text

Pokémon

Note: For a full list of Minisprite codes please check out the PKMN Code Compendium.
  • Tag
    • [pkmn=PokemonName/FormeName (Modifier)]
  • Parameters
    • PokemonName: Name of Pokémon species to be shown.
    • Optional [FormeName]: Name of Pokémon Forme to be shown.
    • Optional [Modifier]: Can be used to display icons for female and/or Shiny, Albino, or Melanistic Pokémon.
  • Information
    • Shows an icon of the specified Pokémon. If FormeName is specified, shows an icon of the specified Pokémon, in the specified Forme.
    • For Exclusive Pokémon, you must use an empty FormeName. Otherwise, you will get a generic (non-exclusive) Pokémon icon.
    • You can get a generic Pokémon icon by using "Missing Number" as the PokemonName.
    • Unlike FormeName, Modifier utilizes parentheses instead of slashes. If Modifier is specified, shows an icon of the specified variant. If no icon exists for the specified variant, the normal icon will be displayed instead.
    • To use the Modifier for shiny, albino, or melanistic Pokémon, you must use capital letters: (S) for shiny, (A) for albino, and (M) for melanistic.
    • FormeName and Modifier can be used together to display variants of alternate formes.
    • For Unown, omitting the FormeName will give you a random letter each time the page is loaded.
  • Example
    • [pkmn=Mightyena]
    • [pkmn=Mightyena/Mega Forme Q]
    • [pkmn=Shinxel/]
    • [pkmn=Eevee (S)]
    • [pkmn=Nidoran (F)]
    • [pkmn=Mightyena (A)/Mega Forme Q]
    • [pkmn=Missing Number/]

Pokémon Panel

  • This bit of BBCode shows a Pokémon card in any post allowing BBCode (ex. about me, forum post, signatures, etc.). You can feed the Pokémon, view any item they are holding, etc. as if you were on the owner's profile.
  • To use you insert the following code, along with the unique Pokémon's code:
    • [pkmnpanel=CODE HERE]
  • Examples
    • [pkmnpanel=L3hKv]
    • [pkmnpanel=gqg]
    • [pkmnpanel=gq5]

Progress Bar

  • Tag
    • [progress=Completion/Goal]Message[/progress]
  • Parameters
    • Completion: How far you want the progress bar to fill based on the Goal.
    • Goal: "Out of" value; Affects how much progress is made.
    • Message: Message to be displayed on the Progress Bar.
  • Information
    • This BBCode is used to create a progress bar.
    • The Completion and Goal parameters must:
      • Be positive integers
      • Consist of only numerical characters (0-9), or [inventory] tags in quotation marks. (Placing [inventory] tags without quotation marks will cause an error.)
    • The Goal may be less than the Completion, but will cause the Progress bar to extend off the container.
    • The Message may be any text and can even use BBCode, though it should be kept short enough to fit onto the progress bar.
  • Examples
    • [progress=3/5]I got 3 out of 5![/progress]
    • Assuming the player has 65 Gold Poké:
    • [progress="[inventory=gold]/450"][item=Exp. Share][inventory=gold]/450 GP to the Exp. Share![/progress]

Quote

  • Tag
    • [quote]Content[/quote]
    • [quote=QuotedUser]Content[/quote]
    • [quote=QuotedUser;PostID]Content[/quote]
  • Parameters
    • QuotedUser: The person who wrote the content in the quote.
    • PostID: Referenced post ID. You can get this ID by obtaining a standalone link to that post.
  • Information
    • This BBCode is used to quote a user on the site.
    • The use of this BBCode is generally depreciative. This BBCode is automatically generated when quoting someone on the forums and when replying to a Personal Message.
  • Example

Size

  • Tag
    • [size=FontSize]Text[/size]
  • Parameters
    • FontSize: The size of the text to be displayed in points (pt).
  • Information
    • This BBCode is used to change the font size of the text.
    • The size can be within the range of 6 (tiny) and 99 (obscenely huge) but any size below 10 or above 15 typically should be avoided.[1]
  • Example
    • [size=10]Size 10 Text[/size]
    • Size 10 Text

Stackbox

  • Tag
    • [stackbox]Panels[/stackbox]
  • Information
    • This BBCode is very similar to the [accordion] BBCode.
    • The Stackbox is used to display many panels at a time, the panels being [a-section] BBCodes.
    • This BBCode is complicated and should only be used if you know what you are doing.
  • Example
    • [stackbox]
      [a-section=Example 1]Content 1[/a-section]
      [a-section=Example 2]Content 2[/a-section]
      [a-section=Example 3]Content 3[/a-section]
      [/stackbox]

Strike-through

  • Tag
    • [s]Text[/s]
  • Information
    • This BBCode is used to create text that has a strike through it.
  • Example
    • [s]Text with a strike-through[/s]
    • Text with a strike-through

Style

  • Tag
    • [style]CSS declarations[/style]
  • Information
    • An extended version of [css] BBCode. Declares custom CSS for the post. May declare custom CSS classes for use with [styleclass] BBCode.
    • This allows for the greatest flexibility of designing your post, however, it is also the most complex way to modify content within the post.
    • Can be used multiple times per post, however, there is little point in it as no matter where the [style] tag is located within the post, it will still affect everything within it.
    • The guidelines and restrictions are the same as for [css] BBCode.
    • Skin-dependent values are available:
      • @global-bg: The background image.
      • @col-bg1: The main background colour; default light green.
      • @col-bg2: The "heading" background colour; default light green.
      • @col-bg3: The "panel" background colour; default light green.
      • @col-fg1: The main text colour; default dark green.
      • @col-fg2: The "heading" text colour; default dark green.
      • @col-border1: The colour used for global borders; default green.
      • @col-border2: The colour used for titles; default green.
      • @col-border3: The colour used for content; default green.
      • @col-flavour-up: The colour used for liked flavour; default green.
      • @col-flavour-down: The colour used for disliked flavour; default light red.
      • @col-link1: Link colour; default blue.
      • @col-link2: Visited link colour; default purple.
      • @col-link3: Active link colour; default red.
      • @col-user-normal: User link colour; default red.
      • @col-user-normal2: Visited user link colour; default lighter red.
    • Staff ranks are like user ranks, but each have their own shorthand:
      • Use: @col-user-valuehere
      • Graphics Team: art/art2; default purple and lighter purple.
      • Chat Moderators: chatot/chatot2; default brown and lighter brown.
      • Moderators in Training: mit/mit2; default grey and lighter grey.
      • Moderators: mod/mod2; default yellow and lighter yellow.
      • Super Moderators: supermod/supermod2; default green and lighter green.
      • Administrators: admin/admin2; default blue and lighter blue.
  • Example
    • The following is the code required in this example:
    • [style]
.test_for_wiki {
.panel {
font-family: Times New Roman,serif;
&>h3 {
background: #007F0E;
color: #FFFFFF;
}
&>div {
background: #FFFFFF;
color: #000000;
}
}
}
[/style]
[display=Default CSS]Content[/display]
[styleclass=test_for_wiki]
[display=Custom CSS]Content[/display]
[/styleclass]

Style Class

  • Tag
    • [styleclass=Class]Text[/styleclass]
    • [sc=Class]Text[/sc]
  • Parameters
    • Class: The CSS class to be applied.
  • Information
    • Applies a CSS class declared within a [style] BBCode or one of the above skin-dependent classes to a post fragment.
    • You can reuse the same Class later in a post if you would like the same effects applied to it.
    • [styleclass] and [sc] are interchangeable.
  • Example
    • See the [style] BBCode for an example.

Subscript

  • Tag
    • [sub]Text[/sub]
  • Information
    • This BBCode is used to create subscripted text.
  • Example
    • [sub]Subscripted Text[/sub]
    • Subscripted Text

Superscript

  • Tag
    • [sup]Text[/sup]
  • Information
    • This BBCode is used to create superscripted text.
  • Example
    • [sup]Superscripted Text[/sup]
    • Superscripted Text

Tabs

  • Tag
    • [sc=tabbed_interface horizontal][ul]
    • [li]Title[/li][/ul][
    • ][sc=tab-active]example text[/sc][
    • ][/sc]
  • Information
    • This BBCode is used to create horizontal tabs
  • Example
    • [sc=tabbed_interface horizontal][ul][li]Title[/li][li]Title[/li][li]Title[/li][/ul][sc=tab-active]example text[/sc][sc=tab]example text[/sc][sc=tab]example text[/sc][/sc]

Tables

  • Tag
    • [table]Table Elements[/table]
  • Information
    • This BBCode is used in conjunction with the [td], [th] and [tr] BBCodes to create a table.
    • This BBCode alone does nothing but serves as a container for the rest of the table BBCodes.
    • If you add more [td], [th] and [tr] codes, the height and width will change and more boxes will be added.
  • Example
    • [table][tr][th]Table Heading[/th][/tr][tr][td]Table Cell[/td][/tr][/table]
    • Table Heading
      Table Cell

Table Cell

  • Tag
    • [td]Cell Content[/td]
    • [td=CxR]Cell Content[/td]
  • Information
    • This BBCode is used to create a Table Cell, displaying information.
    • In order to make cells span across multiple rows, columns or both, use the second syntax. C is the number of columns to span, and R the number of rows. The x is a literal "x", to separate the two numbers.
    • This BBCode can only be used within a [tr] BBCode.
  • Example
    • See the [table] BBCode for a generic example.
    • With row/column spanning:
    • NormalNormalNormalNormal
      Normaltd=3x1
      Normaltd=1x2td=2x2
      Normal

Table Heading

  • Tag
    • [th]Heading Content[/th]
    • [th=CxR]Heading Content[/th]
  • Information
    • This BBCode is used to create a Table Heading Cell, displaying a Heading.
    • In order to make cells span across multiple rows, columns or both, use the second syntax. C is the number of columns to span, and R the number of rows. The x is a literal "x", to separate the two numbers.
    • This BBCode can only be used within a [tr] BBCode.
  • Example
    • See the [table] BBCode for a generic example.
    • See the [td] BBCode for an example with row/column spanning.

Table Row

  • Tag
    • [tr]Cells[/tr]
  • Information
    • This BBCode is used to define a new row within a table.
    • This BBCode can only be used within the [table] BBCode.
  • Example
    • See the [table] BBCode for an example.

Tooltips - [tip]

  • Tag
    • [tip=TipText]Text[/tip]
  • Parameters
    • TipText: The text to be displayed when the user hovers over the text.
  • Information
    • This BBCode is used to show a tip when the user's cursor hovers over the text.
    • The text inside has a dotted line underneath, denoting a tip is available.
  • Example
    • [tip=Tip Example]Text[/tip]

Tooltips - [pit]

  • Tag
    • [pit=Text]PitText[/pit]
  • Parameters
    • Text: The text that is normally displayed without hovering.
    • PitText: The text to be displayed when the user hovers over the text.
  • Information
    • This BBCode is used to show a tooltip when the user's cursor hovers over the text. It works the same as the tip-BBCode with its parameters switched around. This can be useful if there is a long string of text including BBcode that should be displayed in the tooltip.
    • The text inside has a dotted line underneath, denoting a tip is available.
  • Example
    • [Pit=Text]Pit Example[/pit]

Type

  • Tag
    • [type=Type]
    • [type=Type/V]
  • Parameters
    • Type: The Type icon to be displayed.
  • Information
    • This BBCode is used to display any of the 18 type icons, not including the -type.
    • This BBCode is used to display any of the 18 V~Wave Icons which are also used for the Type Races.
  • Example
    • [type=Normal]
    • [type=Normal/V]

Under 18 Test

  • Tag
    • [under18test]
  • Information
    • This BBCode is used to test the (dis)appearance of [mature] sections. All those sections will be hidden if at least one instance of this tag is present.
    • Saving the post with this tag will hide all [mature] sections from all users.

Underline

  • Tag
    • [u]Text[/u]
  • Information
    • This BBCode is used to display a solid underline below text.
  • Example
    • [u]Underlined Text[/u]
    • Underlined Text

URLs

  • Tag
    • [url=URL]Text[/URL]
    • [url=URL][img]Image Link here[/img][/url]
  • Parameters
    • Optional [URL]: The URL for the Text to redirect to. If this parameter is left out the Text will become the URL.
  • Information
    • This BBCode is used to direct the user to a new page upon clicking the link created.
    • You may also hear them referred to simply as links.
  • Example
    • [url=http://pokefarm.wiki/EggDex]EggDex[/url]
    • EggDex

Notes

  • When defining parameters that use brackets ([ and ]), quotes may be used to stop the parser looking for the first right bracket.
E.g. [tip="This tip uses brackets! [[ ] [ ][ ] ]"]Brackets![/tip]
  • If one were to end a line with [ then start the next with ], then the new line is ignored. Furthermore, any other characters are ignored up until the first right bracket. This allows for for easier organisation.
Example:
[url=http://pokefarm.wiki/BBCode#Notes][
This text is after a newline, after a left bracket, and will not be visible.
]Wowie, this sure is a link![
][/url]
results in
Wowie, this sure is a link!
  • If one were to end a line with [* and then have *] a few lines after (or even the next line), then all of the new lines and all characters are ignored in between, including BBCode that may have been defined within it. This allows for ease when temporarily removing sections from a post while preserving it in the same form in the event one needs it again at a later date.
Example:
[url=http://pokefarm.wiki/BBCode#Notes][*
[b]This text is after a newline,[/b] after a left bracket, and [u]will not be visible.[/u]
*]Wowie, this sure is a link![*
*][/url]
results in
Wowie, this sure is a link!

References

  1. Cele. "Legibility Guidelines". Guides, 2021.