~Guide to Personalising Your Trainer Info~ (and pseudo HTML guide) Every now and then, you randomly check someone's trainer info, or you get challenged, and it looks amazing! Then you check your own and it's disappointingly bland and blank. But it's all very simple to learn how to make a stylised trainer info! Part 1 - Adding and Formatting Text Part 1A - Adding Text Let's start off with some text. Open the Teambuilder, either by the menu or by going into File -> Open Teambuilder whilst on a server, and type whatever you want in the "Information" text box as shown below. For this example, "I like Froslass!" will suffice! Press "Save Profile" to save the trainer info to your name, then press "Close". Double click your own name to view your trainer info and... Voila! Now you have text in your text box! It's important to note that there is a 300 character limit. Part 1B - Using basic HTML Now onto the part that you may or may not know! Formatting text and everything else past this point will require the use of HTML. HTML uses tags to create visual effects. Let's start by making our text bold. Wrap your text in <b></b>, as follows: Code (text): <b>I like Froslass!</b> Press "Save Profile" and "Close", then check your trainer info. The text is now bolded! There are other basic tags that can be used to format the font. These include: <i></i> - Italics <u></u> - Underline <s></s> - Strikethrough Part 1C - Using the <font> Tag The <font> tag is used to edit font colour and size, and a few more things. But we'll just focus on these for now. Wrap your text in <font></font> tags, but add color='blue' inside the first tag: Code (text): <font color='blue'>I like Froslass!</font> Again, "Save Profile", "Close", check your trainer info. The text is now blue! Hex colour codes (eg. #01AB9F) can also be used instead of a colour name to change the colour. http://www.colorpicker.com/ can be used to easily check for hex codes for pretty much any colour. This applies to everywhere "color" is used. Now, to change the font size, add size=num to the <font> tag: Code (text): <font size=16>I like Froslass!</font> "Save Profile", "Close", and now you have huge text! You can use <font></font> tags with <b></b> tags and such. You can also use size and color at the same time! Add the following code to your trainer info, and see what happens! Code (text): <font size=16 color='blue'><b>I like Froslass!</b></font> And Part 1 is done! You can also use <center>Text</center> to move text and even images to the center, and use <br/> to make a line break, similar to pressing enter. Part 2 - Inserting and Manipulating Images Part 2A - Inserting Pokemon Sprites In this part, we'll be using the <img> tag to insert sprites into our trainer info! So let's get down to business, and put a Froslass into our trainer info! Code (text): <img src='pokemon:num=478'> The above code shows an attribute for the img tag named "src". It is simply the source of the image you'll be using. For the source, we have pokemon:num=478. 478 is Froslass's national dex number, so a Froslass should show up! And as expected, the Froslass is there! If you wanted to have a Gen 4 or Shiny Froslass, then you'd have to add more to the src. We'll look at Cherrim for this example for alternate forms. Code (text): <img src='pokemon:num=421-1&gen=4&shiny=true&back=true'> The dex number has -1 at the end, which means that the alternate form listed first is used. Adding &gen=4 means a gen 4 sprite will be used. If the gen is lower than the gen the pokemon was introduced in, the earliest generation sprite will be used. &shiny=true makes the sprite shiny. &back=true uses the back sprite. Another argument, &gender=, can be used for differing male/female sprites, such as Vileplume and Jellicent. The defaults for these are as follows: Code (text): num=xxx-0 (usual forme) gen=6 shiny=false back=false gender=male Alternate form IDs [secret] Code (text): 3-1 Mega Venusaur 6-1 Mega Charizard X 6-2 Mega Charizard Y 9-1 Mega Blastoise 65-1 Mega Alakazam 94-1 Mega Gengar 115-1 Mega Kangaskhan 127-1 Mega Pinsir 142-1 Mega Aerodactyl 150-1 Mega Mewtwo X 150-2 Mega Mewtwo Y 172-1 Spiky Pichu (Gen 4 only) 181-1 Mega Ampharos 201-1 Unown-B 201-2 Unown-C 201-3 Unown-D 201-4 Unown-E 201-5 Unown-F 201-6 Unown-G 201-7 Unown-H 201-8 Unown-I 201-9 Unown-J 201-10 Unown-K 201-11 Unown-L 201-12 Unown-M 201-13 Unown-N 201-14 Unown-O 201-15 Unown-P 201-16 Unown-Q 201-17 Unown-R 201-18 Unown-S 201-19 Unown-T 201-20 Unown-U 201-21 Unown-V 201-22 Unown-W 201-23 Unown-X 201-24 Unown-Y 201-25 Unown-Z 201-26 Unown-! 201-27 Unown-? 212-1 Mega Scizor 214-1 Mega Heracross 229-1 Mega Houndoom 248-1 Mega Tyranitar 257-1 Mega Blaziken 282-1 Mega Gardevoir 303-1 Mega Mawile 306-1 Mega Aggron 308-1 Mega Medicham 310-1 Mega Manectric 351-1 Castform-Snowy 351-2 Castform-Rainy 351-4 Castform-Sunny 354-1 Mega Banette 359-1 Mega Absol 386-1 Deoxys-A 386-2 Deoxys-D 386-3 Deoxys-S 412-1 Burmy-G 412-2 Burmy-S 413-1 Wormadam-G 413-2 Wormadam-S 421-1 Cherrim-Sunshine 422-1 Shellos-East 423-1 Gastrodon-East 445-1 Mega Garchomp 448-1 Mega Lucario 460-1 Mega Abomasnow 479-1 Rotom-C 479-2 Rotom-H 479-3 Rotom-F 479-4 Rotom-W 479-5 Rotom-S 487-1 Giratina-O 492-1 Shaymin-S 493-1 Arceus-Fighting 493-2 Arceus-Flying 493-3 Arceus-Poison 493-4 Arceus-Ground 493-5 Arceus-Rock 493-6 Arceus-Bug 493-7 Arceus-Ghost 493-8 Arceus-Steel 493-9 Arceus-Fire 493-10 Arceus-Water 493-11 Arceus-Grass 493-12 Arceus-Electric 493-13 Arceus-Psychic 493-14 Arceus-Ice 493-15 Arceus-Dragon 493-16 Arceus-Dark 493-17 Arceus-??? 550-1 Basculin-A 555-1 Darmanitan-D 585-1 Deerling-Summer 585-2 Deerling-Autumn 585-3 Deerling-Winter 586-1 Sawsbuck-Summer 586-2 Sawsbuck-Autumn 586-3 Sawsbuck-Winter 641-1 Tornadus-T 642-1 Thundurus-T 645-1 Landorus-T 646-1 Kyurem-W 646-2 Kyurem-B 647-1 Keldeo-R 648-1 Meloetta-S 649-1 Genesect-D 649-2 Genesect-S 649-3 Genesect-B 649-4 Genesect-C 678-1 Meowstic-F 681-1 Aegislash-B 710-1 Pumpkaboo-S 710-2 Pumpkaboo-L 710-3 Pumpkaboo-XL 711-1 Gourgeist-S 711-2 Gourgeist-L 711-3 Gougeist-XL 716-1 Xerneas-A [/secret] Part 2B - Inserting Item and Berry Sprites Item sprites are inserted quite similarly to Pokemon sprites, as they both have a "built-in" source. Each item has an ID allocated to it. To show a berry sprite, add 8000 to the berry id e.g. Chesto Berry is 8001. Item IDs [secret] Code (text): 0 (No Item) 1 Big Root 2 Blue Scarf 3 BrightPowder 4 Choice Band 5 Choice Scarf 6 Choice Specs 7 Destiny Knot 8 Expert Belt 9 Focus Band 10 Focus Sash 11 Full Incense 12 Green Scarf 13 Lagging Tail 14 Lax Incense 15 Leftovers 16 Luck Incense 17 Mental Herb 18 Metal Powder 19 Muscle Band 20 Odd Incense 21 Pink Scarf 22 Power Herb 23 Pure Incense 24 Quick Powder 25 Reaper Cloth 26 Red Scarf 27 Rock Incense 28 Rose Incense 29 Sea Incense 30 Shed Shell 31 Silk Scarf 32 Silver Powder 33 Smooth Rock 34 Soft Sand 35 Soothe Bell 36 Wave Incense 37 White Herb 38 Wide Lens 39 Wise Glasses 40 Yellow Scarf 41 Zoom Lens 42 Amulet Coin 43 Antidote 44 Awakening 45 Berry Juice 46 Big Pearl 47 Big Mushroom 48 Black Belt 49 Black Flute 50 Black Sludge 51 BlackGlasses 52 Blue Flute 53 Blue Shard 54 Burn Heal 55 Calcium 56 Carbos 57 Charcoal 58 Cleanse Tag 59 Damp Mulch 60 DeepSeaScale 61 Dire Hit 62 Dragon Scale 63 Elixir 64 Energy Root 65 EnergyPowder 66 Escape Rope 67 Ether 68 Everstone 69 Exp. Share 70 Fire Stone 71 Flame Orb 72 Fluffy Tail 73 Fresh Water 74 Full Heal 75 Full Restore 76 Gooey Mulch 77 Green Shard 78 Growth Mulch 79 Guard Spec. 80 Heal Powder 81 Heart Scale 82 Honey 83 HP Up 84 Hyper Potion 85 Ice Heal 86 Iron 87 King's Rock 88 Lava Cookie 89 Leaf Stone 90 Lemonade 91 Life Orb 92 Light Ball 93 Light Clay 94 Lucky Egg 95 Magnet 96 Max Elixir 97 Max Ether 98 Max Potion 99 Max Repel 100 Max Revive 101 Metal Coat 102 Metronome 103 Miracle Seed 104 Moomoo Milk 105 Moon Stone 106 Mystic Water 107 NeverMeltIce 108 Nugget 109 Old Gateau 110 Parlyz Heal 111 Pearl 112 Poké Doll 113 Potion 114 PP Max 115 PP Up 116 Protein 117 Rare Candy 118 Razor Fang 119 Red Flute 120 Red Shard 121 Repel 122 Revival Herb 123 Revive 124 Sacred Ash 125 Scope Lens 126 Shell Bell 127 Shoal Salt 128 Shoal Shell 129 Smoke Ball 130 Soda Pop 131 Soul Dew 132 Spell Tag 133 Stable Mulch 134 Star Piece 135 Stardust 136 Sun Stone 137 Super Potion 138 Super Repel 139 Thunderstone 140 TinyMushroom 141 Toxic Orb 142 TwistedSpoon 143 Up-Grade 144 Water Stone 145 White Flute 146 X Accuracy 147 X Attack 148 X Defend 149 X Special 150 X Sp. Def 151 X Speed 152 Yellow Flute 153 Yellow Shard 154 Zinc 155 Icy Rock 156 Lucky Punch 157 Dubious Disc 158 Sharp Beak 159 Adamant Orb 160 Damp Rock 161 Heat Rock 162 Lustrous Orb 163 Macho Brace 164 Stick 165 Dragon Fang 166 Poison Barb 167 Power Anklet 168 Power Band 169 Power Belt 170 Power Bracer 171 Power Lens 172 Power Weight 173 Dawn Stone 174 Dusk Stone 175 Electirizer 176 Magmarizer 177 Odd Keystone 178 Oval Stone 179 Protector 180 Quick Claw 181 Razor Claw 182 Shiny Stone 183 Sticky Barb 184 DeepSeaTooth 185 Draco Plate 186 Dread Plate 187 Earth Plate 188 Fist Plate 189 Flame Plate 190 Grip Claw 191 Icicle Plate 192 Insect Plate 193 Iron Plate 194 Meadow Plate 195 Mind Plate 196 Sky Plate 197 Splash Plate 198 Spooky Plate 199 Stone Plate 200 Thick Club 201 Toxic Plate 202 Zap Plate 203 Armor Fossil 204 Claw Fossil 205 Dome Fossil 206 Hard Stone 207 Helix Fossil 208 Old Amber 209 Rare Bone 210 Root Fossil 211 Skull Fossil 212 Iron Ball 213 Griseous Orb 214 Air Mail 215 Bloom Mail 216 Brick Mail 217 Bubble Mail 218 Flame Mail 219 Grass Mail 220 Harbor Mail 221 Heart Mail 222 Mosaic Mail 223 Snow Mail 224 Space Mail 225 Steel Mail 226 Tunnel Mail 227 Douse Drive 228 Shock Drive 229 Burn Drive 230 Chill Drive 231 Sweet Heart 232 Prism Scale 233 Eviolite 234 Float Stone 235 Rocky Helmet 236 Air Balloon 237 Red Card 238 Ring Target 239 Binding Band 240 Absorb Bulb 241 Cell Battery 242 Eject Button 243 Fire Gem 244 Water Gem 245 Electric Gem 246 Grass Gem 247 Ice Gem 248 Fighting Gem 249 Poison Gem 250 Ground Gem 251 Flying Gem 252 Psychic Gem 253 Bug Gem 254 Rock Gem 255 Ghost Gem 256 Dragon Gem 257 Dark Gem 258 Steel Gem 259 Normal Gem 260 Health Wing 261 Muscle Wing 262 Resist Wing 263 Genius Wing 264 Clever Wing 265 Swift Wing 266 Pretty Wing 267 Dream Ball 268 BalmMushroom 269 Big Nugget 270 Pearl String 271 Comet Shard 272 Relic Copper 273 Relic Silver 274 Relic Gold 275 Relic Vase 276 Relic Band 277 Relic Statue 278 Relic Crown 279 Casteliacone 280 Dire Hit 2 281 X Speed 2 282 X Special 2 283 X Sp. Def 2 284 X Defend 2 285 X Attack 2 286 X Accuracy 2 287 X Speed 3 288 X Special 3 289 X Sp. Def 3 290 X Defend 3 291 X Attack 3 292 X Accuracy 3 293 X Speed 6 294 X Special 6 295 X Sp. Def 6 296 X Defend 6 297 X Attack 6 298 X Accuracy 6 299 Ability Urge 300 Item Drop 301 Item Urge 302 Reset Urge 303 Dire Hit 3 304 Berserk Gene 305 Poké Ball 306 Great Ball 307 Ultra Ball 308 Master Ball 309 Safari Ball 310 Level Ball 311 Lure Ball 312 Moon Ball 313 Friend Ball 314 Love Ball 315 Heavy Ball 316 Fast Ball 317 Sport Ball 318 Premier Ball 319 Repeat Ball 320 Timer Ball 321 Nest Ball 322 Net Ball 323 Dive Ball 324 Luxury Ball 325 Heal Ball 326 Quick Ball 327 Dusk Ball 328 Cherish Ball 329 Park Ball 330 Pixie Plate 331 Assault Vest 332 Safety Goggles 333 Weakness Policy 344 Snowball 345 Luminous Moss 1000 Pink Bow 1001 Polkadot Bow 2001 Venusaurite 2002 Charizardite X 2003 Charizardite Y 2004 Blastoisinite 2005 Alakazite 2006 Gengarite 2007 Kangaskhanite 2008 Pinsirite 2009 Gyaradosite 2010 Aerodactylite 2011 Mewtwonite X 2012 Mewtwonite Y 2013 Ampharosite 2014 Scizorite 2015 Heracronite 2016 Houndoominite 2017 Tyranitarite 2018 Blazikenite 2019 Gardevoirite 2020 Mawilite 2021 Aggronite 2022 Medichamite 2023 Manectite 2024 Banettite 2025 Absolite 2026 Garchompite 2027 Lucarionite 2028 Abomasite [/secret] Berry IDs [secret] Code (text): 0 Cheri Berry 1 Chesto Berry 2 Pecha Berry 3 Rawst Berry 4 Aspear Berry 5 Leppa Berry 6 Oran Berry 7 Persim Berry 8 Lum Berry 9 Sitrus Berry 10 Figy Berry 11 Wiki Berry 12 Mago Berry 13 Aguav Berry 14 Iapapa Berry 15 Razz Berry 16 Bluk Berry 17 Nanab Berry 18 Wepear Berry 19 Pinap Berry 20 Pomeg Berry 21 Kelpsy Berry 22 Qualot Berry 23 Hondew Berry 24 Grepa Berry 25 Tamato Berry 26 Cornn Berry 27 Magost Berry 28 Rabuta Berry 29 Nomel Berry 30 Spelon Berry 31 Pamtre Berry 32 Watmel Berry 33 Durin Berry 34 Belue Berry 35 Occa Berry 36 Passho Berry 37 Wacan Berry 38 Rindo Berry 39 Yache Berry 40 Chople Berry 41 Kebia Berry 42 Shuca Berry 43 Coba Berry 44 Payapa Berry 45 Tanga Berry 46 Charti Berry 47 Kasib Berry 48 Haban Berry 49 Colbur Berry 50 Babiri Berry 51 Chilan Berry 52 Liechi Berry 53 Ganlon Berry 54 Salac Berry 55 Petaya Berry 56 Apicot Berry 57 Lansat Berry 58 Starf Berry 59 Enigma Berry 60 Micle Berry 61 Custap Berry 62 Jaboca Berry 63 Rowap Berry 64 Roseli Berry 65 Kee Berry 66 Maranga Berry 1000 PRZCureBerry 1001 Mint Berry 1002 PSNCureBerry 1003 Burnt Berry 1004 Ice Berry 1005 MysteryBerry 1006 Berry 1007 Bitter Berry 1008 MiracleBerry 1009 Gold Berry [/secret] Note that Gold/Silver/Crystal-only items, such as Beserk Gene and PSNCureBerry, don't have a sprite! Let's use <img> to show a DeepSeaTooth and a Pomeg Berry. Code (text): <img src='item:184'><img src='item:8020'> The ID for DeepSeaTooth is 184, so we use 184. The ID for Pomeg Berry is 20, so we add 8000 since it's a berry, and use 8020. Part 2C - Inserting Trainer Sprites Trainer Sprites are added slightly differently to item and Pokemon sprites. Rather than have an ID, the source directory is to an installed theme. The theme we'll use is Classic. Code (text): <img src='Themes/Classic/Trainer Sprites/169.png'> This will show the male protagonist from Black and White in your trainer info. Change "169" to the number allocated to the sprite when changing avatar in the teambuilder. Note that the sprite will only show to those who have the "Classic" theme installed. It's a default theme, so the sprite should show unless they have deleted the theme for whatever reason. Part 2D - Resizing Images Images can be resized using the width and height attributes of the <img> tag. So let's make our Pomeg Berry a little bigger and our Cherrim a little smaller... Code (text): <img src='item:8020' width=100 height=100><img src='pokemon:num=421-1' width=48 height=48> And we should have a giant Pomeg Berry and a small Cherrim! The normal heights and widths of sprites are: Trainer Sprites - 80x80 Pokemon Sprites - 96x96 Item Sprites - 20x20 And this concludes Part 2! If you want to move your sprite to the right or left, you can add align=left / align=right in the image tag. You can also make your images and text have links with <a href='http://website.com'>Text <img></a>, replacing the url there with whatever url. Part 3 - Background Colours and Gradients Part 3A - Block Colour A lot of good trainer infos have fancy backgrounds with gradients! So we'll look at something similar and easier to understand: block colour backgrounds! Let's start off with a red background. Code (text): <body style='background-color: red;'> A new tag - <body> - is used here. This affects the entire trainer info. The attribute "style" is a very useful and flexible attribute, but a little CSS knowledge is required to use it. We'll only look at background-colour: here. Anyway, your trainer info should look like this: The background is completely red! Other colours can be used, and of course, hex colour codes can be used. Part 3B - Linear Gradient Linear Gradients are the first of the three gradients we'll look at. Linear gradients are horizontal, vertical and diagonal gradients. Code (text): <body style='background-color: qlineargradient(x1:0, x2:1, y1:0, y2:1, stop: 0 red, stop: 0.5 white, stop: 1 blue);'> This looks like a big mess, so let's break it down. Everything is the same as using a block colour, except red; has been replaced with qlineargradient();. Let's look at the arguments for it. x1: Typically a number between 0 and 1. Defines the relative start horizontal point. 0 is the left boundary, 1 is the right boundary. x2: Typically a number between 0 and 1. Defines the relative end horizontal point. 0 is the left boundary, 1 is the right boundary. y1: Typically a number between 0 and 1. Defines the relative start vertical point. 0 is the upper boundary, 1 is the lower boundary. y2: Typically a number between 0 and 1. Defines the relative end vertical point. 0 is the upper boundary, 1 is the lower boundary. stop: Number between 0 and 1 and a colour. Defines the point for the colour, relative to x1, x2, y1, and y2. Can be used as many times as needed. Let's take a look at our code to explain this better. stop: 0 red tells the gradient to start at the top and left boundaries with the colour red. stop: 0.5 white tells the gradient that, at halfway between the boundaries, the colour becomes white. stop: 1 blue changes the gradient from white to blue. This is what it looks like, so it should clear some things up a little from my terrible explanation. Mess around with the values a little to see what's happening. Part 3C - Conical Gradient Conical Gradients turn around a defined point, like spokes on a wheel. Code (text): <body style='background-color: qconicalgradient(cx: 0.5, cy:0.5, stop: 0 red, stop: 0.5 white, stop: 1 red);'> Again, the same as qlineargradient except qconicalgradient takes its place. cx: Typically a number between 0 and 1. Defines the horizontal position of the center point. 0 is the left boundary, 1 is the right boundary. cy: Typically a number between 0 and 1. Defines the vertical position of the center point. 0 is the upper boundary, 1 is the lower boundary. stop: Number between 0 and 1 and a colour. Defines where the colour is in a gradient. 0 and 1 are directly towards the right, 0.25 is directly up, 0.5 is directly towards the left, 0.75 is directly down. cx: 0.5 and cy: 0.5 move the center point to the center of the trainer info. stop: 0 red tells the gradient to start with red, directly to the right. stop: 0.5 white tells the gradient to fade to white directly to the left. stop: 1 red ends the gradient with red to the right again. This is what our code translates to! Part 3D - Radial Gradient Radial Gradients are circles around a single point. Rather than turning around the point, like conical, the gradient moves out from the point to form rings. Code (text): <body style='background-color: qradialgradient(cx:0.5, cy:0.5, fx:0.5, fy:0.5, radius:0.6, stop: 0 yellow, stop: 0.5 orange, stop: 1 white);'> Used in the same way as linear and conical, just replace qconicalgradient();/qlineargradient(); with qradialgradient();. cx: Typically a number between 0 and 1. Defines the horizontal position of the center point. 0 is the left boundary, 1 is the right boundary. cy: Typically a number between 0 and 1. Defines the vertical position of the center point. 0 is the upper boundary, 1 is the lower boundary. fx: Typically a number between 0 and 1. Defines the horizontal position of the focal point. 0 is the left boundary, 1 is the right boundary. fy: Typically a number between 0 and 1. Defines the vertical position of the focal point. 0 is the upper boundary, 1 is the lower boundary. radius: Typically a number between 0 and 1. Defines the radius of the circle. 0 is no radius, 0.5 is the length between the vertical/horizontal boundary and center, 1 is the length between the two vertical/horizontal boundaries. stop: Number between 0 and 1 and a colour. Defines where the colour is in a gradient. 0 is the center of the circle, 1 is the edge. fx and fy is where the gradient itself starts, which is projected onto the circle only. Think of it like a flashlight or torch. If the center and focal point are the same, it creates a series of rings. The center of the circle is yellow, which then fades into orange halfway between the edge and the center, then fades into white at the edge. And that should wrap up Part 3! The key to getting something that works is experimenting with different values and seeing how things work. Remember, if you have any questions, feel free to ask me! You'll have great trainer info in no time!