BBCode: Difference between revisions

From PokéHeroes Wiki
Jump to navigation Jump to search
No edit summary
 
(11 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Help]]
[[Category:Help]]
BBCode are codes which could enchance your text and make it the way you want it to be.
BBCode consists of codes which can enchance your text and make it the way you want it to be.


BBCode can only be used in the Forums, or in the ''About Me'' section on your [[userprofile]]
BBCode can only be used on the [[Forum|Forums]], in feeds, [[Pal Pad]], Private Messages, or in the ''About Me'' section & Custom Panels on your [[userprofile]].
==What is BBCode?==
==What is BBCode?==
BBCode or Bulletin Board Code is a lightweight markup language used to format posts in many message boards. The available tags are usually indicated by square brackets ([ ]) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand—usually HTML or XHTML.
BBCode or Bulletin Board Code is a lightweight markup language used to format posts in many message boards. The available tags are usually indicated by square brackets ([ ]) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand—usually HTML or XHTML.


{| align="center" border="2" cellpadding="1" cellspacing="1" class="wikitable" style="padding:0px auto; width: 700px; right:300;"
{| align="center" border="2" cellpadding="1" cellspacing="1" class="wikitable" style="padding:0px auto; width: 780px; right:300; background: #b1d6e4"
|-
|-
! scope="col" style="text-align:center;border:1px solid #606060;  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;"|Name
! scope="col" style="text-align:center;border:1px solid #606060;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent;"|Name
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;"|Code
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent;"|Code
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;"|Example
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent;"|Example
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent; width: 250px;"|Notes
! scope="col" style="text-align:center;border:1px solid #606060; background:#D8D8D8;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent; width: 80px;"|Restricted
|-
|-
| style="border:1px solid #606060;text-align:center"|Bold
| style="border:1px solid #606060;text-align:center"|Bold
| style="border:1px solid #606060;text-align:center"|[b]Text Here[/b]
| style="border:1px solid #606060;text-align:center"|[b]Text Here[/b]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 19.png]]
| style="border:1px solid #606060;text-align:center"|<font style="font-weight: bold>Text Here</font>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|This will let your text be bold!
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Italic
| style="border:1px solid #606060;text-align:center"|Italic
| style="border:1px solid #606060;text-align:center"|[i]Text Here[/b]
| style="border:1px solid #606060;text-align:center"|[i]Text Here[/i]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 1.png]]
| style="border:1px solid #606060;text-align:center"|<i>Text Here</i>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|This will let your text be italicized!
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Underline
| style="border:1px solid #606060;text-align:center"|Underline
| style="border:1px solid #606060;text-align:center"|[u]Text Here[/u]
| style="border:1px solid #606060;text-align:center"|[u]Text Here[/u]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 2.png]]
| style="border:1px solid #606060;text-align:center"|<u>Text Here</u>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|This will let your text be underlined!
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Struck-Out
| style="border:1px solid #606060;text-align:center"|Strikethrough
| style="border:1px solid #606060;text-align:center"|[s]Text Here[/s]
| style="border:1px solid #606060;text-align:center"|[s]Text Here[/s]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 3.png]]
| style="border:1px solid #606060;text-align:center"|<strike>Text Here</strike>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Don't like it? Strike it!
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Text Color
| style="border:1px solid #606060;text-align:center"|Text Color
| style="border:1px solid #606060;text-align:center"|[color=red]Text Here[/color]
| style="border:1px solid #606060;text-align:center"|[color=red]Text Here[/color]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 4.png]]
| style="border:1px solid #606060;text-align:center"|<font color="red">Text Here</font>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Give your text color!
 
Many color names are supported, and you can also use hexadecimal values to get very specific colors such as <font color="#0000FF">#0000FF</font>!
| style="border:1px solid #606060;text-align:center"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Text Size
| style="border:1px solid #606060;text-align:center"|Text Size
| style="border:1px solid #606060;text-align:center"|[size=14]Text Here[/size]
| style="border:1px solid #606060;text-align:center"|[size=14]Text Here[/size]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 5.png]]
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 14pt">Text Here</font>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Make your text shrink and grow!
 
Only sizes 6|8|10|12|14|16|18|20|22 are supported!
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Image
| style="border:1px solid #606060;text-align:center"|Image
| style="border:1px solid #606060;text-align:center"|[img]Image Link[/img]
| style="border:1px solid #606060;text-align:center"|[img]Image Link[/img]
| style="border:1px solid #606060;text-align:center"|[[file:Pokedollar.png]]
| style="border:1px solid #606060;text-align:center"|<html><img src="https://upload.pokeheroes.com/img/avatar/201681867.png?t=1609520918"></html>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Displays images that you would like or want to show.
 
Use links of images that display by themselves within a tab or page. Use links that have image file extensions on the end of them such as ".png", ".jpeg", etc. You can also right click, and copy the image link of images on pages to easily get their links.
 
The Image BBCode also supports .GIF images!
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Url
| style="border:1px solid #606060;text-align:center"|URL
| style="border:1px solid #606060;text-align:center"|[url=Link Here]Text Here[/url]
| style="border:1px solid #606060;text-align:center"|[url=Link Here]Text Here[/url]
| style="border:1px solid #606060;text-align:center"|[http://wiki.pokeheroes.com/index.php?title=Main_Page The Example]
| style="border:1px solid #606060;text-align:center"|<html><a href="//pokeheroes.com/" target="_blank">PokéHeroes Main Page</a></html>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|All purpose way to make links, and or to hyperlink.
 
One of the more common BBCodes you'll see being used.
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Quote
| style="border:1px solid #606060;text-align:center"|Quote
| style="border:1px solid #606060;text-align:center"|[quote]Text Here[/quote]
| style="border:1px solid #606060;text-align:center"|[quote]Text Here[/quote]
| style="border:1px solid #606060;text-align:center"|??
| style="border:1px solid #606060; height: 100px; width: 300px"|<div style="font-family: Verdana,sans-serif; border: 1px solid #111; background-color: #dcf0fd; width: 90%; position: relative; left: 2.5%; padding: 4px; margin-left: 2px; color: #053b55; line-height: 0.5em; text-size-adjust: none;">
<span style="padding: 3px; border: 1px solid #111; font-weight: 700; background-color: #dcf0fd; font-size: 11px; width: auto; margin-left: 10px; position: relative; top: -18px; overflow: hidden;">Quote</span><br>
Text Here
</div>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Feeling fancy and don't want to surround text with quote marks the traditional way?
 
Then this is for you!</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Quote with Username
| style="border:1px solid #606060;text-align:center"|Quote with Username
| style="border:1px solid #606060;text-align:center"|[quote=Username]Text Here[/quote]
| style="border:1px solid #606060;text-align:center"|[quote=Username]Text Here[/quote]
| style="border:1px solid #606060;text-align:center"|??
| style="border:1px solid #606060; height: 100px; width: 300px"|<div style="font-family: Verdana,sans-serif; border: 1px solid #111; background-color: #dcf0fd; width: 90%; position: relative; left: 2.5%; padding: 4px; margin-left: 2px; color: #053b55; line-height: 0.5em; text-size-adjust: none;">
<span style="padding: 3px; border: 1px solid #111; font-weight: 700; background-color: #dcf0fd; font-size: 11px; width: auto; margin-left: 10px; position: relative; top: -18px; overflow: hidden;">Quote from <i>Riako</i></span><br>
Quack Quack.
</div>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">A great way to reply to specific parts of what other Users may be saying on forum threads. Also good if you would want to quote someone, or something specific in general!<font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Spoiler
| style="border:1px solid #606060;text-align:center"|Spoiler
| style="border:1px solid #606060;text-align:center"|[spoiler]Text Here[/spoiler]
| style="border:1px solid #606060;text-align:center"|[spoiler]Text Here[/spoiler]
| style="border:1px solid #606060;text-align:center"|??
| style="border:1px solid #606060;text-align:left"|<span>
<html><img src="//staticpokeheroes.com/img/misc/spoiler_plus.png">&nbsp;<a href="javascript:void(0)" style="color: #080b49; font-weight: bold; text-decoration: underline; line-height: 18px; position: absolute; padding-top: 5px;;">Show hidden content</a></html>
<hr style="border: 1px solid #444; color: #277980; background-color: #277980; height: 1px;">
</span>
<hr style="border: 1px solid #444; color: #277980; background-color: #277980; height: 1px;">
 
<span>
<html><img src="//staticpokeheroes.com/img/misc/spoiler_minus.png">&nbsp;<a href="javascript:void(0)" style="color: #080b49; font-weight: bold; text-decoration: underline; line-height: 18px; position: absolute; padding-top: 5px;;">Hide content</a></html>
<hr style="border: 1px solid #444; color: #277980; background-color: #277980; height: 1px;">
</span>
<div style="border: 2px solid #444; background-color: #d0e5e6; margin-top: 5px; padding: 8px; color: #053b55;">Text Here</div>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Spoilers are a great way to hide and conceal content.
 
They are very useful for being considerate with sensitive information while avoiding trouble by ruining the fun for others!
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Left
| style="border:1px solid #606060;text-align:center"|[left]Left Text[/left]
| style="border:1px solid #606060;text-align:left"|Left Text
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Used for making text or content shift and align to the left.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Center
| style="border:1px solid #606060;text-align:center"|Center
| style="border:1px solid #606060;text-align:center"|[center]Text Here[/center]
| style="border:1px solid #606060;text-align:center"|[center]Center Text[/center]
| style="border:1px solid #606060;text-align:center"|??
| style="border:1px solid #606060;text-align:center"|Center Text
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Used for making text or content align to the center.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Right
| style="border:1px solid #606060;text-align:center"|[right]Text Here[/right]
| style="border:1px solid #606060;text-align:right"|Right Text
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Used for making text or content shift and align to the right.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Horizontal Line
| style="border:1px solid #606060;text-align:center"|Horizontal Line
| style="border:1px solid #606060;text-align:center"|[hr]
| style="border:1px solid #606060;text-align:center"|[hr]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 6.png]]
| style="border:1px solid #606060;text-align:center"|<hr style="border: 0; color: #277980; background-color: #277980; height: 1px;">
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Useful if you would want to divide posts or content into different sections.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Heading
| style="border:1px solid #606060;text-align:center"|Heading
| style="border:1px solid #606060;text-align:center"|[h]Your text Here[/h]
| style="border:1px solid #606060;text-align:center"|[h]Your text Here[/h]
| style="border:1px solid #606060;text-align:center"|[[File:Screenshot 7.png]]
| style="border:1px solid #606060;text-align:center"|<font style="display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; margin: 0;>Your text here</font>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|An easy way to make text slightly bigger and bold. It works great for headers, of course.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Pokemon Show Icon
| style="border:1px solid #606060;text-align:center"|Pokemon Show Icon
| style="border:1px solid #606060;text-align:center"|[pkmn]1[/pkmn]
| style="border:1px solid #606060;text-align:center"|[pkmn]1[/pkmn]
| style="border:1px solid #606060;text-align:center"|[[File:1.png]]
| style="border:1px solid #606060;text-align:center"|<html><img src="//staticpokeheroes.com/img/pokemon/bw_field/1.png"></html>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Shows the icon of Pokemon with its specified Pokédex or ID number.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Pokemon Show Big
| style="border:1px solid #606060;text-align:center"|Pokemon Show Big
| style="border:1px solid #606060;text-align:center"|[pkmnbig]1[/pkmnbig]  
| style="border:1px solid #606060;text-align:center"|[pkmnbig]2[/pkmnbig]  
| style="border:1px solid #606060;text-align:center"|[[File:01.png]]
| style="border:1px solid #606060;text-align:center"|<html><img src="//staticpokeheroes.com/img/pokemon/bw_front/02.png"></html>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Shows the sprite of Pokemon with its specified Pokédex or ID number.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Pokemon Show Big Shiny
| style="border:1px solid #606060;text-align:center"|Pokemon Show Big Shiny
| style="border:1px solid #606060;text-align:center"|[pkmnbig=s]1[/pkmnbig]  
| style="border:1px solid #606060;text-align:center"|[pkmnbig=s]3[/pkmnbig]  
| style="border:1px solid #606060;text-align:center"|[[File:11.png]]
| style="border:1px solid #606060;text-align:center"|<html><img src="//staticpokeheroes.com/img/pokemon/bw_front/13.png"></html>
| style="border:1px solid #606060;text-align:center;font-size: 11px"|Shows the shiny sprite of Pokemon with its specified Pokédex or ID number.
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|User Tag
| style="border:1px solid #606060;text-align:center"|User Tag
| style="border:1px solid #606060;text-align:center"|[user]Username[/user]
| style="border:1px solid #606060;text-align:center"|[user]Username[/user]
| style="border:1px solid #606060;text-align:center"|[http://www.pokeheroes.com/userprofile.php?name=Riako Riako]
| style="border:1px solid #606060;text-align:center"|<html><a href="//www.pokeheroes.com/userprofile.php?name=Riako" target="_self">Riako</a></html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">This is preferred and much easier to use over using the URL BBCode for linking to someone's Userprofile.
 
It also opens the specified Userprofile in the same tab!</font>
| style="border:1px solid #606060;text-align:center"|No
|-
|-
| style="border:1px solid #606060;text-align:center"|Code Tag
| style="border:1px solid #606060;text-align:center"|Code Tag
| style="border:1px solid #606060;text-align:center"|[code]Code Goes here[/code]  
| style="border:1px solid #606060;text-align:center"|[code]Code Goes here[/code]  
| style="border:1px solid #606060;text-align:center"|??
| style="border:1px solid #606060;text-align:center"|<div style="border: 1px solid grey; background-color: #fff; padding: 4px; width: 95%; color: #000; font-family: Arial;>
Code blocks are a good way to show other code such as [b]bold[/b]
</div>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Best way to show code without putting it into action!</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Train/Share Widget
| style="border:1px solid #606060;text-align:center"|[widget=inter]Pokémon ID[/widget]
| style="border:1px solid #606060;text-align:center"|<html><a href="//pokeheroes.com/pokemon?id=32894235" target="_blank" style="text-decoration: none"><img src="https://staticpokeheroes.com/img/pokemon/img.php?c=1880"></a></html><br clear=all>
<div class="mw-ui-button mw-ui-progressive" style="width: 90px; box-shadow: inset 0px 1px 0px 0px #97c4fe; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) ); background-color: #3d94f6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #1e62d0; display: inline-block; color: #ffffff; font-family: Arial; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; text-decoration: none; text-align: center; text-shadow: 1px 1px 0px #1570cd; cursor: pointer; outline: none; margin-left: 0px;">
<div style=" position: relative;top: -7px;">Train</div>
</div>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Widgets are great for helping get more exposure for your Pokemon.<br>
You can easily get Widgets for your Pokémon over at the <html><a href="//pokeheroes.com/share" target="_blank">Share Widgets</a></html> page.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Inventory
| style="border:1px solid #606060;text-align:center; word-wrap:break-word"|<div style="max-width:150px;">[bag=item name]</div>
| style="border:1px solid #606060;text-align:center"|<html>
I currently have 123 Nebula Stones!
</html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Replace "<b>item name</b>" in the code with the item you want to see the number of your bag inventory.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
| style="border:1px solid #606060;text-align:center"|Inventory Percentage
| style="border:1px solid #606060;text-align:center; word-wrap:break-word"|<div style="max-width:150px;">[bag=<b>item name</b>,goal=<b>number</b>]</div>
| style="border:1px solid #606060;text-align:center"|<html>
I have reached 58% of my goal.
</html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Replace "<b>item name</b>" in the code like above and the "<b>goal number</b>" with the amount of items you want to collect.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Progress Bar v.1
| style="border:1px solid #606060;text-align:center; word-wrap:break-word"|<div style="max-width:150px;">[img]//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=<b>PERCENTAGE</b>&col=<b>COLOR</b>[/img]</div>
| style="border:1px solid #606060;text-align:center"|<html>
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=10.2&col=1">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=60.3&col=2">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=78.7&col=3">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=30&col=4">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=42&col=5">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=100&col=6">
<img src="//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=10.7&col=7">
</html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Replace "<b>PERCENTAGE</b>" in the link with the percent you want, decimals are supported.
<i><b>NEW:</b> Replace it with the [bag=item,goal=number] to let it update automatically.</i><br>
Replace "<b>COLOR</b>" in the link with a number 1 through 7 depending on which color you would want.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Progress Bar v.2
| style="border:1px solid #606060;text-align:center; word-wrap:break-word"|<div style="max-width:150px;">[img]//staticpokeheroes.com/img/exp_bar.php?percent=<b>PERCENTAGE</b>[/img]</div>
| style="border:1px solid #606060;text-align:center"|<html>
<img src="//staticpokeheroes.com/img/exp_bar.php?percent=50"><br>
<img src="//staticpokeheroes.com/img/exp_bar.php?color=green&percent=21.2">
</html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Replace "<b>PERCENTAGE</b>" in the link with the percent you want, decimals are supported. Only max of 99% is also supported.<br>
To get the bottom green colored bar, just add "<b>color=green&</b>" (without the quotes) after "?" and before "percent" in the link.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
| style="border:1px solid #606060;text-align:center"|Progress Bar v.3
| style="border:1px solid #606060;text-align:center; word-wrap:break-word"|<div style="max-width:150px;">[img]//staticpokeheroes.com/img/lovemeter.php?percent=<b>PERCENTAGE</b>[/img]</div>
| style="border:1px solid #606060;text-align:center"|<html>
<img src="//staticpokeheroes.com/img/lovemeter.php?percent=68">
</html>
| style="border:1px solid #606060;text-align:center"|<font style="font-size: 11px">Replace "<b>PERCENTAGE</b>" in the link with the percent you want, decimals are supported.</font>
| style="border:1px solid #606060;"|
*Pal Pad
*Feeds
|-
|-
|! scope="col"  colspan="3" style="text-align:center;border:1px solid #606060;  background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent;"|More to be added.
|! scope="col"  colspan="5" style="text-align:center;border:1px solid #606060;  background: -webkit-linear-gradient(90deg, #4e8aa5, #d2e1e9) repeat scroll 0 0 transparent;font-weight: bold;"|More to be added.
|}
|}
==Useful Resources==
Full list of valid names for the Text Color BBCode:
<spoiler show="Color Names" hide="Color Names">
<html>
<div style="background-color: #b1d6e4; color: #fd5e53;">
<div style="color: aliceblue">Aliceblue</div>
<div style="color: antiquewhite">Antiquewhite</div>
<div style="color: aqua">Aqua</div>
<div style="color: aquamarine">Aquamarine</div>
<div style="color: azure">Azure</div>
<div style="color: beige">Beige</div>
<div style="color: bisque">Bisque</div>
<div style="color: black">Black</div>
<div style="color: blanchedalmond">Blanchedalmond</div>
<div style="color: blue">Blue</div>
<div style="color: blueviolet">Blueviolet</div>
<div style="color: brown">Brown</div>
<div style="color: burlywood">Burlywood</div>
<div style="color: cadetblue">Cadetblue</div>
<div style="color: chartreuse">Chartreuse</div>
<div style="color: chocolate">Chocolate</div>
<div style="color: coral">Coral</div>
<div style="color: cornflowerblue">Cornflowerblue</div>
<div style="color: cornsilk">Cornsilk</div>
<div style="color: crimson">Crimson</div>
<div style="color: currentcolor">Currentcolor <span style="color: black">&nbsp;&nbsp;&nbsp;<-- You'll find this the same as using Inherit as a color when it comes to BBCode.</span></div>
<div style="color: cyan">Cyan</div>
<div style="color: darkblue">Darkblue</div>
<div style="color: darkcyan">Darkcyan</div>
<div style="color: darkgoldenrod">Darkgoldenrod</div>
<div style="color: darkgray">Darkgray</div>
<div style="color: darkgreen">Darkgreen</div>
<div style="color: darkgrey">Darkgrey</div>
<div style="color: darkkhaki">Darkkhaki</div>
<div style="color: darkmagenta">Darkmagenta</div>
<div style="color: darkolivegreen">Darkolivegreen</div>
<div style="color: darkorange">Darkorange</div>
<div style="color: darkorchid">Darkorchid</div>
<div style="color: darkred">Darkred</div>
<div style="color: darksalmon">Darksalmon</div>
<div style="color: darkseagreen">Darkseagreen</div>
<div style="color: darkslateblue">Darkslateblue</div>
<div style="color: darkslategray">Darkslategray</div>
<div style="color: darkslategrey">Darkslategrey</div>
<div style="color: darkturquoise">Darkturquoise</div>
<div style="color: darkviolet">Darkviolet</div>
<div style="color: deeppink">Deeppink</div>
<div style="color: deepskyblue">Deepskyblue</div>
<div style="color: dimgray">Dimgray</div>
<div style="color: dimgrey">Dimgrey</div>
<div style="color: dodgerblue">Dodgerblue</div>
<div style="color: firebrick">Firebrick</div>
<div style="color: floralwhite">Floralwhite</div>
<div style="color: forestgreen">Forestgreen</div>
<div style="color: fuchsia">Fuchsia</div>
<div style="color: gainsboro">Gainsboro</div>
<div style="color: ghostwhite">Ghostwhite</div>
<div style="color: gold">Gold</div>
<div style="color: goldenrod">Goldenrod</div>
<div style="color: gray">Gray</div>
<div style="color: green">Green</div>
<div style="color: greenyellow">Greenyellow</div>
<div style="color: grey">Grey</div>
<div style="color: honeydew">Honeydew</div>
<div style="color: hotpink">Hotpink</div>
<div style="color: indianred">Indianred</div>
<div style="color: indigo">Indigo</div>
<div style="color: inherit">Inherit <span style="color: black">&nbsp;&nbsp;&nbsp;<-- This takes color from the parent element (you may or may not find this interesting to use)</span></div>
<div style="color: initial">Initial <span style="color: black">&nbsp;&nbsp;&nbsp;<-- You won't find much difference using this over Black, but it's still valid!</span></div>
<div style="color: ivory">Ivory</div>
<div style="color: khaki">Khaki</div>
<div style="color: lavender">Lavender</div>
<div style="color: lavenderblush">Lavenderblush</div>
<div style="color: lawngreen">Lawngreen</div>
<div style="color: lemonchiffon">Lemonchiffon</div>
<div style="color: lightblue">Lightblue</div>
<div style="color: lightcoral">Lightcoral</div>
<div style="color: lightcyan">Lightcyan</div>
<div style="color: lightgoldenrodyellow">Lightgoldenrodyellow</div>
<div style="color: lightgray">Lightgray</div>
<div style="color: lightgreen">Lightgreen</div>
<div style="color: lightgrey">Lightgrey</div>
<div style="color: lightpink">Lightpink</div>
<div style="color: lightsalmon">Lightsalmon</div>
<div style="color: lightseagreen">Lightseagreen</div>
<div style="color: lightskyblue">Lightskyblue</div>
<div style="color: lightslategray">Lightslategray</div>
<div style="color: lightslategrey">Lightslategrey</div>
<div style="color: lightsteelblue">Lightsteelblue</div>
<div style="color: lightyellow">Lightyellow</div>
<div style="color: lime">Lime</div>
<div style="color: limegreen">Limegreen</div>
<div style="color: linen">Linen</div>
<div style="color: magenta">Magenta</div>
<div style="color: maroon">Maroon</div>
<div style="color: mediumaquamarine">Mediumaquamarine</div>
<div style="color: mediumblue">Mediumblue</div>
<div style="color: mediumorchid">Mediumorchid</div>
<div style="color: mediumpurple">Mediumpurple</div>
<div style="color: mediumseagreen">Mediumseagreen</div>
<div style="color: mediumslateblue">Mediumslateblue</div>
<div style="color: mediumspringgreen">Mediumspringgreen</div>
<div style="color: mediumturquoise">Mediumturquoise</div>
<div style="color: mediumvioletred">Mediumvioletred</div>
<div style="color: midnightblue">Midnightblue</div>
<div style="color: mintcream">Mintcream</div>
<div style="color: mistyrose">Mistyrose</div>
<div style="color: moccasin">Moccasin</div>
<div style="color: navajowhite">Navajowhite</div>
<div style="color: navy">Navy</div>
<div style="color: oldlace">Oldlace</div>
<div style="color: olive">Olive</div>
<div style="color: olivedrab">Olivedrab</div>
<div style="color: orange">Orange</div>
<div style="color: orangered">Orangered</div>
<div style="color: orchid">Orchid</div>
<div style="color: palegoldenrod">Palegoldenrod</div>
<div style="color: palegreen">Palegreen</div>
<div style="color: paleturquoise">Paleturquoise</div>
<div style="color: palevioletred">Palevioletred</div>
<div style="color: papayawhip">Papayawhip</div>
<div style="color: peachpuff">Peachpuff</div>
<div style="color: peru">Peru</div>
<div style="color: pink">Pink</div>
<div style="color: plum">Plum</div>
<div style="color: powderblue">Powderblue</div>
<div style="color: purple">Purple</div>
<div style="color: rebeccapurple">Rebeccapurple</div>
<div style="color: red">Red</div>
<div style="color: rosybrown">Rosybrown</div>
<div style="color: royalblue">Royalblue</div>
<div style="color: saddlebrown">Saddlebrown</div>
<div style="color: salmon">Salmon</div>
<div style="color: sandybrown">Sandybrown</div>
<div style="color: seagreen">Seagreen</div>
<div style="color: seashell">Seashell</div>
<div style="color: sienna">Sienna</div>
<div style="color: silver">Silver</div>
<div style="color: skyblue">Skyblue</div>
<div style="color: slateblue">Slateblue</div>
<div style="color: slategray">Slategray</div>
<div style="color: slategrey">Slategrey</div>
<div style="color: snow">Snow</div>
<div style="color: springgreen">Springgreen</div>
<div style="color: steelblue">Steelblue</div>
<div style="color: tan">Tan</div>
<div style="color: teal">Teal</div>
<div style="color: thistle">Thistle</div>
<div style="color: tomato">Tomato</div>
<div style="color: transparent">Transparent <span style="color: black">&nbsp;&nbsp;&nbsp;<-- This is Transparent (invisible text)</span></div>
<div style="color: turquoise">Turquoise</div>
<div style="color: unset">Unset  <span style="color: black">&nbsp;&nbsp;&nbsp;<-- Leaves the color unset and would also inherit color from the parent if it has color (sort of similar to Inherit)</span></div>
<div style="color: violet">Violet</div>
<div style="color: wheat">Wheat</div>
<div style="color: white">White</div>
<div style="color: whitesmoke">Whitesmoke</div>
<div style="color: yellow">Yellow</div>
<div style="color: yellowgreen">Yellowgreen</div>
</div>
</html>
</spoiler>
* <html><a href="//www.w3schools.com/colors/colors_picker.asp" target="_blank">HTML Color Picker</a></html> (for Hexadecimal values)
* <html><a href="//pokeheroes.com/forum_thread?id=105" target="_blank">Original BBCode Guide</a></html> by <html><a href="//pokeheroes.com/userprofile?name=-Max">-Max</a></html>
* <html><a href="//codepen.io/MaxM30/full/ygNwaE" target="_blank">Progress Bar Helper v1</a> by <html><a href="//pokeheroes.com/userprofile?name=-Max">-Max</a></html>
* <html><a href="//pokeheroes.com/forum_thread?id=105&site=3#110992" target="_blank">Compilation list of Pokedex & ID numbers</a></html> by <html><a href="//pokeheroes.com/userprofile?name=Liirah" target="_blank">Liirah</a></html>

Latest revision as of 11:10, 10 June 2023

BBCode consists of codes which can enchance your text and make it the way you want it to be.

BBCode can only be used on the Forums, in feeds, Pal Pad, Private Messages, or in the About Me section & Custom Panels on your userprofile.

What is BBCode?

BBCode or Bulletin Board Code is a lightweight markup language used to format posts in many message boards. The available tags are usually indicated by square brackets ([ ]) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand—usually HTML or XHTML.

Name Code Example Notes Restricted
Bold [b]Text Here[/b] Text Here This will let your text be bold! No
Italic [i]Text Here[/i] Text Here This will let your text be italicized! No
Underline [u]Text Here[/u] Text Here This will let your text be underlined! No
Strikethrough [s]Text Here[/s] Text Here Don't like it? Strike it! No
Text Color [color=red]Text Here[/color] Text Here Give your text color!

Many color names are supported, and you can also use hexadecimal values to get very specific colors such as #0000FF!

  • Pal Pad
  • Feeds
Text Size [size=14]Text Here[/size] Text Here Make your text shrink and grow!

Only sizes 6|8|10|12|14|16|18|20|22 are supported!

  • Pal Pad
  • Feeds
Image [img]Image Link[/img] Displays images that you would like or want to show.

Use links of images that display by themselves within a tab or page. Use links that have image file extensions on the end of them such as ".png", ".jpeg", etc. You can also right click, and copy the image link of images on pages to easily get their links.

The Image BBCode also supports .GIF images!

  • Pal Pad
  • Feeds
URL [url=Link Here]Text Here[/url] PokéHeroes Main Page All purpose way to make links, and or to hyperlink.

One of the more common BBCodes you'll see being used.

No
Quote [quote]Text Here[/quote]

Quote
Text Here

Feeling fancy and don't want to surround text with quote marks the traditional way?

Then this is for you!

  • Pal Pad
  • Feeds
Quote with Username [quote=Username]Text Here[/quote]

Quote from Riako
Quack Quack.

A great way to reply to specific parts of what other Users may be saying on forum threads. Also good if you would want to quote someone, or something specific in general!
  • Pal Pad
  • Feeds
Spoiler [spoiler]Text Here[/spoiler]

 Show hidden content



 Hide content


Text Here
Spoilers are a great way to hide and conceal content.

They are very useful for being considerate with sensitive information while avoiding trouble by ruining the fun for others!

  • Pal Pad
  • Feeds
Left [left]Left Text[/left] Left Text Used for making text or content shift and align to the left.
  • Pal Pad
  • Feeds
Center [center]Center Text[/center] Center Text Used for making text or content align to the center.
  • Pal Pad
  • Feeds
Right [right]Text Here[/right] Right Text Used for making text or content shift and align to the right.
  • Pal Pad
  • Feeds
Horizontal Line [hr]
Useful if you would want to divide posts or content into different sections.
  • Pal Pad
  • Feeds
Heading [h]Your text Here[/h] Your text here An easy way to make text slightly bigger and bold. It works great for headers, of course.
  • Pal Pad
  • Feeds
Pokemon Show Icon [pkmn]1[/pkmn] Shows the icon of Pokemon with its specified Pokédex or ID number.
  • Pal Pad
  • Feeds
Pokemon Show Big [pkmnbig]2[/pkmnbig] Shows the sprite of Pokemon with its specified Pokédex or ID number.
  • Pal Pad
  • Feeds
Pokemon Show Big Shiny [pkmnbig=s]3[/pkmnbig] Shows the shiny sprite of Pokemon with its specified Pokédex or ID number.
  • Pal Pad
  • Feeds
User Tag [user]Username[/user] Riako This is preferred and much easier to use over using the URL BBCode for linking to someone's Userprofile.

It also opens the specified Userprofile in the same tab!

No
Code Tag [code]Code Goes here[/code]

Code blocks are a good way to show other code such as [b]bold[/b]

Best way to show code without putting it into action!
  • Pal Pad
  • Feeds
Train/Share Widget [widget=inter]Pokémon ID[/widget]
Train
Widgets are great for helping get more exposure for your Pokemon.

You can easily get Widgets for your Pokémon over at the Share Widgets page.

  • Pal Pad
  • Feeds
Inventory
[bag=item name]
I currently have 123 Nebula Stones! Replace "item name" in the code with the item you want to see the number of your bag inventory.
  • Pal Pad
  • Feeds
Inventory Percentage
[bag=item name,goal=number]
I have reached 58% of my goal. Replace "item name" in the code like above and the "goal number" with the amount of items you want to collect.
  • Pal Pad
  • Feeds
Progress Bar v.1
[img]//staticpokeheroes.com/img/event_distribution/interact_progress.php?percent=PERCENTAGE&col=COLOR[/img]
Replace "PERCENTAGE" in the link with the percent you want, decimals are supported.

NEW: Replace it with the [bag=item,goal=number] to let it update automatically.
Replace "COLOR" in the link with a number 1 through 7 depending on which color you would want.

  • Pal Pad
  • Feeds
Progress Bar v.2
[img]//staticpokeheroes.com/img/exp_bar.php?percent=PERCENTAGE[/img]

Replace "PERCENTAGE" in the link with the percent you want, decimals are supported. Only max of 99% is also supported.

To get the bottom green colored bar, just add "color=green&" (without the quotes) after "?" and before "percent" in the link.

  • Pal Pad
  • Feeds
Progress Bar v.3
[img]//staticpokeheroes.com/img/lovemeter.php?percent=PERCENTAGE[/img]
Replace "PERCENTAGE" in the link with the percent you want, decimals are supported.
  • Pal Pad
  • Feeds
More to be added.

Useful Resources

Full list of valid names for the Text Color BBCode: