1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[Guide] Guide To Personalising Your Trainer Info

Discussion in 'Arts and Graphics' started by Cirno, Sep 28, 2013.

  1. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    ~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!

    [​IMG]

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

    [​IMG]

    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):
    1. <b>I like Froslass!</b>
    Press "Save Profile" and "Close", then check your trainer info. The text is now bolded!

    [​IMG]

    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):
    1. <font color='blue'>I like Froslass!</font>
    Again, "Save Profile", "Close", check your trainer info. The text is now blue!

    [​IMG]

    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):
    1. <font size=16>I like Froslass!</font>
    "Save Profile", "Close", and now you have huge text!

    [​IMG]

    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):
    1. <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):
    1. <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!

    [​IMG]

    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):
    1. <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.

    [​IMG]

    The defaults for these are as follows:

    Code (text):
    1. num=xxx-0 (usual forme)
    2. gen=6
    3. shiny=false
    4. back=false
    5. gender=male
    Alternate form IDs
    [secret]
    Code (text):
    1.  
    2. 3-1 Mega Venusaur
    3. 6-1 Mega Charizard X
    4. 6-2 Mega Charizard Y
    5. 9-1 Mega Blastoise
    6. 65-1 Mega Alakazam
    7. 94-1 Mega Gengar
    8. 115-1 Mega Kangaskhan
    9. 127-1 Mega Pinsir
    10. 142-1 Mega Aerodactyl
    11. 150-1 Mega Mewtwo X
    12. 150-2 Mega Mewtwo Y
    13. 172-1 Spiky Pichu (Gen 4 only)
    14. 181-1 Mega Ampharos
    15. 201-1 Unown-B
    16. 201-2 Unown-C
    17. 201-3 Unown-D
    18. 201-4 Unown-E
    19. 201-5 Unown-F
    20. 201-6 Unown-G
    21. 201-7 Unown-H
    22. 201-8 Unown-I
    23. 201-9 Unown-J
    24. 201-10 Unown-K
    25. 201-11 Unown-L
    26. 201-12 Unown-M
    27. 201-13 Unown-N
    28. 201-14 Unown-O
    29. 201-15 Unown-P
    30. 201-16 Unown-Q
    31. 201-17 Unown-R
    32. 201-18 Unown-S
    33. 201-19 Unown-T
    34. 201-20 Unown-U
    35. 201-21 Unown-V
    36. 201-22 Unown-W
    37. 201-23 Unown-X
    38. 201-24 Unown-Y
    39. 201-25 Unown-Z
    40. 201-26 Unown-!
    41. 201-27 Unown-?
    42. 212-1 Mega Scizor
    43. 214-1 Mega Heracross
    44. 229-1 Mega Houndoom
    45. 248-1 Mega Tyranitar
    46. 257-1 Mega Blaziken
    47. 282-1 Mega Gardevoir
    48. 303-1 Mega Mawile
    49. 306-1 Mega Aggron
    50. 308-1 Mega Medicham
    51. 310-1 Mega Manectric
    52. 351-1 Castform-Snowy
    53. 351-2 Castform-Rainy
    54. 351-4 Castform-Sunny
    55. 354-1 Mega Banette
    56. 359-1 Mega Absol
    57. 386-1 Deoxys-A
    58. 386-2 Deoxys-D
    59. 386-3 Deoxys-S
    60. 412-1 Burmy-G
    61. 412-2 Burmy-S
    62. 413-1 Wormadam-G
    63. 413-2 Wormadam-S
    64. 421-1 Cherrim-Sunshine
    65. 422-1 Shellos-East
    66. 423-1 Gastrodon-East
    67. 445-1 Mega Garchomp
    68. 448-1 Mega Lucario
    69. 460-1 Mega Abomasnow
    70. 479-1 Rotom-C
    71. 479-2 Rotom-H
    72. 479-3 Rotom-F
    73. 479-4 Rotom-W
    74. 479-5 Rotom-S
    75. 487-1 Giratina-O
    76. 492-1 Shaymin-S
    77. 493-1 Arceus-Fighting
    78. 493-2 Arceus-Flying
    79. 493-3 Arceus-Poison
    80. 493-4 Arceus-Ground
    81. 493-5 Arceus-Rock
    82. 493-6 Arceus-Bug
    83. 493-7 Arceus-Ghost
    84. 493-8 Arceus-Steel
    85. 493-9 Arceus-Fire
    86. 493-10 Arceus-Water
    87. 493-11 Arceus-Grass
    88. 493-12 Arceus-Electric
    89. 493-13 Arceus-Psychic
    90. 493-14 Arceus-Ice
    91. 493-15 Arceus-Dragon
    92. 493-16 Arceus-Dark
    93. 493-17 Arceus-???
    94. 550-1 Basculin-A
    95. 555-1 Darmanitan-D
    96. 585-1 Deerling-Summer
    97. 585-2 Deerling-Autumn
    98. 585-3 Deerling-Winter
    99. 586-1 Sawsbuck-Summer
    100. 586-2 Sawsbuck-Autumn
    101. 586-3 Sawsbuck-Winter
    102. 641-1 Tornadus-T
    103. 642-1 Thundurus-T
    104. 645-1 Landorus-T
    105. 646-1 Kyurem-W
    106. 646-2 Kyurem-B
    107. 647-1 Keldeo-R
    108. 648-1 Meloetta-S
    109. 649-1 Genesect-D
    110. 649-2 Genesect-S
    111. 649-3 Genesect-B
    112. 649-4 Genesect-C
    113. 678-1 Meowstic-F
    114. 681-1 Aegislash-B
    115. 710-1 Pumpkaboo-S
    116. 710-2 Pumpkaboo-L
    117. 710-3 Pumpkaboo-XL
    118. 711-1 Gourgeist-S
    119. 711-2 Gourgeist-L
    120. 711-3 Gougeist-XL
    121. 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):
    1. 0 (No Item)
    2. 1 Big Root
    3. 2 Blue Scarf
    4. 3 BrightPowder
    5. 4 Choice Band
    6. 5 Choice Scarf
    7. 6 Choice Specs
    8. 7 Destiny Knot
    9. 8 Expert Belt
    10. 9 Focus Band
    11. 10 Focus Sash
    12. 11 Full Incense
    13. 12 Green Scarf
    14. 13 Lagging Tail
    15. 14 Lax Incense
    16. 15 Leftovers
    17. 16 Luck Incense
    18. 17 Mental Herb
    19. 18 Metal Powder
    20. 19 Muscle Band
    21. 20 Odd Incense
    22. 21 Pink Scarf
    23. 22 Power Herb
    24. 23 Pure Incense
    25. 24 Quick Powder
    26. 25 Reaper Cloth
    27. 26 Red Scarf
    28. 27 Rock Incense
    29. 28 Rose Incense
    30. 29 Sea Incense
    31. 30 Shed Shell
    32. 31 Silk Scarf
    33. 32 Silver Powder
    34. 33 Smooth Rock
    35. 34 Soft Sand
    36. 35 Soothe Bell
    37. 36 Wave Incense
    38. 37 White Herb
    39. 38 Wide Lens
    40. 39 Wise Glasses
    41. 40 Yellow Scarf
    42. 41 Zoom Lens
    43. 42 Amulet Coin
    44. 43 Antidote
    45. 44 Awakening
    46. 45 Berry Juice
    47. 46 Big Pearl
    48. 47 Big Mushroom
    49. 48 Black Belt
    50. 49 Black Flute
    51. 50 Black Sludge
    52. 51 BlackGlasses
    53. 52 Blue Flute
    54. 53 Blue Shard
    55. 54 Burn Heal
    56. 55 Calcium
    57. 56 Carbos
    58. 57 Charcoal
    59. 58 Cleanse Tag
    60. 59 Damp Mulch
    61. 60 DeepSeaScale
    62. 61 Dire Hit
    63. 62 Dragon Scale
    64. 63 Elixir
    65. 64 Energy Root
    66. 65 EnergyPowder
    67. 66 Escape Rope
    68. 67 Ether
    69. 68 Everstone
    70. 69 Exp. Share
    71. 70 Fire Stone
    72. 71 Flame Orb
    73. 72 Fluffy Tail
    74. 73 Fresh Water
    75. 74 Full Heal
    76. 75 Full Restore
    77. 76 Gooey Mulch
    78. 77 Green Shard
    79. 78 Growth Mulch
    80. 79 Guard Spec.
    81. 80 Heal Powder
    82. 81 Heart Scale
    83. 82 Honey
    84. 83 HP Up
    85. 84 Hyper Potion
    86. 85 Ice Heal
    87. 86 Iron
    88. 87 King's Rock
    89. 88 Lava Cookie
    90. 89 Leaf Stone
    91. 90 Lemonade
    92. 91 Life Orb
    93. 92 Light Ball
    94. 93 Light Clay
    95. 94 Lucky Egg
    96. 95 Magnet
    97. 96 Max Elixir
    98. 97 Max Ether
    99. 98 Max Potion
    100. 99 Max Repel
    101. 100 Max Revive
    102. 101 Metal Coat
    103. 102 Metronome
    104. 103 Miracle Seed
    105. 104 Moomoo Milk
    106. 105 Moon Stone
    107. 106 Mystic Water
    108. 107 NeverMeltIce
    109. 108 Nugget
    110. 109 Old Gateau
    111. 110 Parlyz Heal
    112. 111 Pearl
    113. 112 Poké Doll
    114. 113 Potion
    115. 114 PP Max
    116. 115 PP Up
    117. 116 Protein
    118. 117 Rare Candy
    119. 118 Razor Fang
    120. 119 Red Flute
    121. 120 Red Shard
    122. 121 Repel
    123. 122 Revival Herb
    124. 123 Revive
    125. 124 Sacred Ash
    126. 125 Scope Lens
    127. 126 Shell Bell
    128. 127 Shoal Salt
    129. 128 Shoal Shell
    130. 129 Smoke Ball
    131. 130 Soda Pop
    132. 131 Soul Dew
    133. 132 Spell Tag
    134. 133 Stable Mulch
    135. 134 Star Piece
    136. 135 Stardust
    137. 136 Sun Stone
    138. 137 Super Potion
    139. 138 Super Repel
    140. 139 Thunderstone
    141. 140 TinyMushroom
    142. 141 Toxic Orb
    143. 142 TwistedSpoon
    144. 143 Up-Grade
    145. 144 Water Stone
    146. 145 White Flute
    147. 146 X Accuracy
    148. 147 X Attack
    149. 148 X Defend
    150. 149 X Special
    151. 150 X Sp. Def
    152. 151 X Speed
    153. 152 Yellow Flute
    154. 153 Yellow Shard
    155. 154 Zinc
    156. 155 Icy Rock
    157. 156 Lucky Punch
    158. 157 Dubious Disc
    159. 158 Sharp Beak
    160. 159 Adamant Orb
    161. 160 Damp Rock
    162. 161 Heat Rock
    163. 162 Lustrous Orb
    164. 163 Macho Brace
    165. 164 Stick
    166. 165 Dragon Fang
    167. 166 Poison Barb
    168. 167 Power Anklet
    169. 168 Power Band
    170. 169 Power Belt
    171. 170 Power Bracer
    172. 171 Power Lens
    173. 172 Power Weight
    174. 173 Dawn Stone
    175. 174 Dusk Stone
    176. 175 Electirizer
    177. 176 Magmarizer
    178. 177 Odd Keystone
    179. 178 Oval Stone
    180. 179 Protector
    181. 180 Quick Claw
    182. 181 Razor Claw
    183. 182 Shiny Stone
    184. 183 Sticky Barb
    185. 184 DeepSeaTooth
    186. 185 Draco Plate
    187. 186 Dread Plate
    188. 187 Earth Plate
    189. 188 Fist Plate
    190. 189 Flame Plate
    191. 190 Grip Claw
    192. 191 Icicle Plate
    193. 192 Insect Plate
    194. 193 Iron Plate
    195. 194 Meadow Plate
    196. 195 Mind Plate
    197. 196 Sky Plate
    198. 197 Splash Plate
    199. 198 Spooky Plate
    200. 199 Stone Plate
    201. 200 Thick Club
    202. 201 Toxic Plate
    203. 202 Zap Plate
    204. 203 Armor Fossil
    205. 204 Claw Fossil
    206. 205 Dome Fossil
    207. 206 Hard Stone
    208. 207 Helix Fossil
    209. 208 Old Amber
    210. 209 Rare Bone
    211. 210 Root Fossil
    212. 211 Skull Fossil
    213. 212 Iron Ball
    214. 213 Griseous Orb
    215. 214 Air Mail
    216. 215 Bloom Mail
    217. 216 Brick Mail
    218. 217 Bubble Mail
    219. 218 Flame Mail
    220. 219 Grass Mail
    221. 220 Harbor Mail
    222. 221 Heart Mail
    223. 222 Mosaic Mail
    224. 223 Snow Mail
    225. 224 Space Mail
    226. 225 Steel Mail
    227. 226 Tunnel Mail
    228. 227 Douse Drive
    229. 228 Shock Drive
    230. 229 Burn Drive
    231. 230 Chill Drive
    232. 231 Sweet Heart
    233. 232 Prism Scale
    234. 233 Eviolite
    235. 234 Float Stone
    236. 235 Rocky Helmet
    237. 236 Air Balloon
    238. 237 Red Card
    239. 238 Ring Target
    240. 239 Binding Band
    241. 240 Absorb Bulb
    242. 241 Cell Battery
    243. 242 Eject Button
    244. 243 Fire Gem
    245. 244 Water Gem
    246. 245 Electric Gem
    247. 246 Grass Gem
    248. 247 Ice Gem
    249. 248 Fighting Gem
    250. 249 Poison Gem
    251. 250 Ground Gem
    252. 251 Flying Gem
    253. 252 Psychic Gem
    254. 253 Bug Gem
    255. 254 Rock Gem
    256. 255 Ghost Gem
    257. 256 Dragon Gem
    258. 257 Dark Gem
    259. 258 Steel Gem
    260. 259 Normal Gem
    261. 260 Health Wing
    262. 261 Muscle Wing
    263. 262 Resist Wing
    264. 263 Genius Wing
    265. 264 Clever Wing
    266. 265 Swift Wing
    267. 266 Pretty Wing
    268. 267 Dream Ball
    269. 268 BalmMushroom
    270. 269 Big Nugget
    271. 270 Pearl String
    272. 271 Comet Shard
    273. 272 Relic Copper
    274. 273 Relic Silver
    275. 274 Relic Gold
    276. 275 Relic Vase
    277. 276 Relic Band
    278. 277 Relic Statue
    279. 278 Relic Crown
    280. 279 Casteliacone
    281. 280 Dire Hit 2
    282. 281 X Speed 2
    283. 282 X Special 2
    284. 283 X Sp. Def 2
    285. 284 X Defend 2
    286. 285 X Attack 2
    287. 286 X Accuracy 2
    288. 287 X Speed 3
    289. 288 X Special 3
    290. 289 X Sp. Def 3
    291. 290 X Defend 3
    292. 291 X Attack 3
    293. 292 X Accuracy 3
    294. 293 X Speed 6
    295. 294 X Special 6
    296. 295 X Sp. Def 6
    297. 296 X Defend 6
    298. 297 X Attack 6
    299. 298 X Accuracy 6
    300. 299 Ability Urge
    301. 300 Item Drop
    302. 301 Item Urge
    303. 302 Reset Urge
    304. 303 Dire Hit 3
    305. 304 Berserk Gene
    306. 305 Poké Ball
    307. 306 Great Ball
    308. 307 Ultra Ball
    309. 308 Master Ball
    310. 309 Safari Ball
    311. 310 Level Ball
    312. 311 Lure Ball
    313. 312 Moon Ball
    314. 313 Friend Ball
    315. 314 Love Ball
    316. 315 Heavy Ball
    317. 316 Fast Ball
    318. 317 Sport Ball
    319. 318 Premier Ball
    320. 319 Repeat Ball
    321. 320 Timer Ball
    322. 321 Nest Ball
    323. 322 Net Ball
    324. 323 Dive Ball
    325. 324 Luxury Ball
    326. 325 Heal Ball
    327. 326 Quick Ball
    328. 327 Dusk Ball
    329. 328 Cherish Ball
    330. 329 Park Ball
    331. 330 Pixie Plate
    332. 331 Assault Vest
    333. 332 Safety Goggles
    334. 333 Weakness Policy
    335. 344 Snowball
    336. 345 Luminous Moss
    337. 1000 Pink Bow
    338. 1001 Polkadot Bow
    339. 2001 Venusaurite
    340. 2002 Charizardite X
    341. 2003 Charizardite Y
    342. 2004 Blastoisinite
    343. 2005 Alakazite
    344. 2006 Gengarite
    345. 2007 Kangaskhanite
    346. 2008 Pinsirite
    347. 2009 Gyaradosite
    348. 2010 Aerodactylite
    349. 2011 Mewtwonite X
    350. 2012 Mewtwonite Y
    351. 2013 Ampharosite
    352. 2014 Scizorite
    353. 2015 Heracronite
    354. 2016 Houndoominite
    355. 2017 Tyranitarite
    356. 2018 Blazikenite
    357. 2019 Gardevoirite
    358. 2020 Mawilite
    359. 2021 Aggronite
    360. 2022 Medichamite
    361. 2023 Manectite
    362. 2024 Banettite
    363. 2025 Absolite
    364. 2026 Garchompite
    365. 2027 Lucarionite
    366. 2028 Abomasite
    [/secret]

    Berry IDs
    [secret]
    Code (text):
    1. 0 Cheri Berry
    2. 1 Chesto Berry
    3. 2 Pecha Berry
    4. 3 Rawst Berry
    5. 4 Aspear Berry
    6. 5 Leppa Berry
    7. 6 Oran Berry
    8. 7 Persim Berry
    9. 8 Lum Berry
    10. 9 Sitrus Berry
    11. 10 Figy Berry
    12. 11 Wiki Berry
    13. 12 Mago Berry
    14. 13 Aguav Berry
    15. 14 Iapapa Berry
    16. 15 Razz Berry
    17. 16 Bluk Berry
    18. 17 Nanab Berry
    19. 18 Wepear Berry
    20. 19 Pinap Berry
    21. 20 Pomeg Berry
    22. 21 Kelpsy Berry
    23. 22 Qualot Berry
    24. 23 Hondew Berry
    25. 24 Grepa Berry
    26. 25 Tamato Berry
    27. 26 Cornn Berry
    28. 27 Magost Berry
    29. 28 Rabuta Berry
    30. 29 Nomel Berry
    31. 30 Spelon Berry
    32. 31 Pamtre Berry
    33. 32 Watmel Berry
    34. 33 Durin Berry
    35. 34 Belue Berry
    36. 35 Occa Berry
    37. 36 Passho Berry
    38. 37 Wacan Berry
    39. 38 Rindo Berry
    40. 39 Yache Berry
    41. 40 Chople Berry
    42. 41 Kebia Berry
    43. 42 Shuca Berry
    44. 43 Coba Berry
    45. 44 Payapa Berry
    46. 45 Tanga Berry
    47. 46 Charti Berry
    48. 47 Kasib Berry
    49. 48 Haban Berry
    50. 49 Colbur Berry
    51. 50 Babiri Berry
    52. 51 Chilan Berry
    53. 52 Liechi Berry
    54. 53 Ganlon Berry
    55. 54 Salac Berry
    56. 55 Petaya Berry
    57. 56 Apicot Berry
    58. 57 Lansat Berry
    59. 58 Starf Berry
    60. 59 Enigma Berry
    61. 60 Micle Berry
    62. 61 Custap Berry
    63. 62 Jaboca Berry
    64. 63 Rowap Berry
    65. 64 Roseli Berry
    66. 65 Kee Berry    
    67. 66 Maranga Berry
    68. 1000 PRZCureBerry
    69. 1001 Mint Berry
    70. 1002 PSNCureBerry
    71. 1003 Burnt Berry
    72. 1004 Ice Berry
    73. 1005 MysteryBerry
    74. 1006 Berry
    75. 1007 Bitter Berry
    76. 1008 MiracleBerry
    77. 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):
    1. <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.

    [​IMG]

    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):
    1. <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.

    [​IMG]

    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):
    1. <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!

    [​IMG]

    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):
    1. <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:

    [​IMG]

    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):
    1. <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.

    [​IMG]

    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):
    1. <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.

    [​IMG]

    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):
    1. <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.

    [​IMG]

    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!

    [​IMG]
     
    Last edited: Nov 5, 2013
  2. ZodiaK

    ZodiaK Get the fuck off my porch

    Joined:
    Apr 27, 2011
    Messages:
    426
    Likes Received:
    19
    Simple, straight-forward (user friendly), well organized with examples and images capturing major TI needs.

    9.9/10
     
  3. Sakuya Izayoi

    Sakuya Izayoi love to hate

    Joined:
    Jun 1, 2012
    Messages:
    1,149
    Likes Received:
    404
    This has been very informative, thanks for sharing with us this =)
     
  4. Annoying Orange

    Annoying Orange sweet creature Server Moderator Social Media Rep Server Moderator Social Media Rep

    Joined:
    Sep 29, 2010
    Messages:
    1,733
    Likes Received:
    845
    PO Trainer Name:
    Annoying Orange
    for the multicolored backgrounds, are there codes for colors besides basic colors? Like besides using the word orange, white, etc.
     
  5. Crystal Moogle

    Crystal Moogle Ayaya~

    Joined:
    Jul 19, 2010
    Messages:
    3,203
    Likes Received:
    523
    PO Trainer Name:
    Hanako
    You can use colour codes fine. Like #0000FF for blue
     
  6. MinusMinun

    MinusMinun ☯Plusle&Minun☯

    Joined:
    Sep 15, 2013
    Messages:
    18
    Likes Received:
    0
    PO Trainer Name:
    MinusMinun
    How did you change the back ground?

    I'm gonna look at this and personalise mine.
     
  7. Trademark

    Trademark Copyright

    Joined:
    Mar 20, 2013
    Messages:
    162
    Likes Received:
    19
    PO Trainer Name:
    Trademark
    Great guide! HTML is pro mark-up language!
     
  8. ZoroDark

    ZoroDark i know everything

    Joined:
    Dec 25, 2011
    Messages:
    1,633
    Likes Received:
    1,045
    This is absolutely amazing! Thanks a lot Cirno :)
     
  9. Rioku

    Rioku Not again.

    Joined:
    Mar 16, 2013
    Messages:
    761
    Likes Received:
    49
    PO Trainer Name:
    Shou
    This guide helps a lot. I have been having problems with the 3D radial gradients. Thank you very very much!

    You should probably mention how to place pictures in different parts of the challenge box. This guide is really good.
     
    Last edited: Sep 29, 2013
  10. Raducan

    Raducan Well-Known Member

    Joined:
    Jul 23, 2013
    Messages:
    1,366
    Likes Received:
    1,134
    This guide was very helpful and informative. Awesome job and thanks!!
     
  11. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    Thank you all for the positive reviews!

    EDIT: Look at last post.
     
    Last edited: Nov 2, 2013
  12. Shiny Glaceon

    Shiny Glaceon Banned

    Joined:
    Sep 6, 2013
    Messages:
    48
    Likes Received:
    1
    PO Trainer Name:
    Actress Kitty
    Thanks so much! I always struggled on that!
     
  13. Nightfall Alicorn

    Nightfall Alicorn Left Pokémon Online, most likely not coming back.

    Joined:
    Oct 15, 2013
    Messages:
    491
    Likes Received:
    169
    PO Trainer Name:
    Nightmare Moon
    Great guide. I'm a bit of a user of HTML, JavaScript and CSS myself. I just struggle with understanding those gradient codes though, kind of confuses me.

    I thought I mention: That if the text isn't inside a tag (<font>for example</font>), the image fails to load. Took me a few minutes to figure it out the cause.
     
  14. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    Just a quick update to say that &gen=5 is not need anymore.
     
  15. Yipy

    Yipy Something new.

    Joined:
    Sep 26, 2011
    Messages:
    54
    Likes Received:
    0
    how do i put font on the far right of the picture? also if im using gen 1 sprites is there anyway to use the sprite from blue/red and not yellow?
     
  16. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    Use <p align="right">stuff</p> to align stuff to the right. You cannot use sprites from red/blue since PO doesn't have them. (sorry for the late reply!)
     
  17. Lord Outrage

    Lord Outrage Banned

    Joined:
    Oct 12, 2013
    Messages:
    82
    Likes Received:
    12
    PO Trainer Name:
    Executive Archer
    how can i use a mega houndoom instead of a normal one ?
     
  18. Crystal Moogle

    Crystal Moogle Ayaya~

    Joined:
    Jul 19, 2010
    Messages:
    3,203
    Likes Received:
    523
    PO Trainer Name:
    Hanako
    Add a -1 after the pokedex number.
    Like <img src = "pokemon:229-1"/>
     
  19. Deathwolf200

    Deathwolf200 New Member

    Joined:
    Dec 7, 2013
    Messages:
    2
    Likes Received:
    0
    how do you move the images because i want to make mega mewtwo x in the middle of the picture
     
  20. Samphire

    Samphire Too much hard work! Forum Moderator Tour Director Forum Moderator Tour Director

    Joined:
    Jul 31, 2012
    Messages:
    778
    Likes Received:
    157
    This should be <align="center">imageurl&code</align>
    or <center></center>

    The first is most likely, however, I don't know if we support the center code on its own.
     
  21. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    <align="center"></align> does not work, but <center> does, which I am sure I outlined in this tutorial. I'll add if I haven't done so already.
     
  22. Starryy

    Starryy New Member

    Joined:
    Jul 20, 2013
    Messages:
    2
    Likes Received:
    0
    Hello Cirno,
    First of all, great guide, very informative, and very useful.
    Second, I need a little bit of help with my TI atm. I would like to put text on top and the pokemon sprite on the bottom if that's possible, so if you could help me out, that would be great. Thanks!
     
  23. Deathwolf200

    Deathwolf200 New Member

    Joined:
    Dec 7, 2013
    Messages:
    2
    Likes Received:
    0
    thanks and also is there a way to change the size of pokemon pictures i want to make mega mewtwo x bigger

    i tried to use <center> but it didnt work i tried <img src='pokemon:num=150-1&gen=6&shiny=false&back=false&center> can you tell me if that is corret and if not can you fix it
     
    Last edited by a moderator: Dec 12, 2013
  24. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
    The <center> tag is separate from the <img> tag. Try <center><img src='pokemon:num=150-1&gen=6&shiny=false&back=false></center>

    Just add width=somenumber and height=somenumber to the tags. Like <img src='pokemon:1' width=192 height=192> makes a bigger Bulbasaur. It's measured in pixels.
     
  25. Accelgor

    Accelgor Active Member

    Joined:
    Apr 8, 2013
    Messages:
    166
    Likes Received:
    162
    PO Trainer Name:
    -Accelgor-
    Great guide Cirno! Really taught me about a lot of things that had confused me in the past!
     
  26. Kamina

    Kamina Member

    Joined:
    Apr 11, 2014
    Messages:
    39
    Likes Received:
    65
  27. Crystal Moogle

    Crystal Moogle Ayaya~

    Joined:
    Jul 19, 2010
    Messages:
    3,203
    Likes Received:
    523
    PO Trainer Name:
    Hanako
    Try
    <img src = "Themes\Classic\battle_fields\1.png">
    or <body background= "Themes\Classic\battle_fields\1.png"></body>
    However neither look exactly like that image for me, so you might have to do some tweaking.

    Ah wait, that's using the new battle window background
    So <img src = "qml\images\grass.png">
    or or <body background= "qml\images\grass.png">
     
  28. Kamina

    Kamina Member

    Joined:
    Apr 11, 2014
    Messages:
    39
    Likes Received:
    65
    Oh okay, thanks! It worked on my friends computer but not on mine? (I use a Mac and a PO version of 2.4.1) so i wondering if their was a code which would also be visible on a mac or version 2.4.1. And i was wondering if their was a beach TI which was similar to the one shown. Thanks so much for help btw!
    (Also I use 2.4.1 Because as far as I'm concerned, there is no 2.4.2 update for Mac at the moment)
     
    Last edited: Sep 9, 2014
  29. Crystal Moogle

    Crystal Moogle Ayaya~

    Joined:
    Jul 19, 2010
    Messages:
    3,203
    Likes Received:
    523
    PO Trainer Name:
    Hanako
    Mac might have a different file location. I don't have a mac though to check :( I think that grass one is the only background in that particular style.
     
  30. Kamina

    Kamina Member

    Joined:
    Apr 11, 2014
    Messages:
    39
    Likes Received:
    65
    Thanks for the previous assistance guys! :]
    I have yet another request!!!
    How do I make a TI like this? http://prntscr.com/4qan4o
    Thanks for the help again! I appreciate it!
     
  31. inigomontoya

    inigomontoya Slightly Less Well-Known Member

    Joined:
    May 13, 2012
    Messages:
    344
    Likes Received:
    56
    PO Trainer Name:
    Yveltal / ddrox13
    Can we please get this stickyed? IT IS SOOOO HELPFUL!
     
  32. ThunderStruck0011

    ThunderStruck0011 Got a dollar?

    Joined:
    Jul 7, 2014
    Messages:
    133
    Likes Received:
    20
    PO Trainer Name:
    Aku Canatari
    Does this work on android or no?
     
  33. Strudels

    Strudels ・◡・ Super Moderator Server Administrator Super Moderator Server Administrator

    Joined:
    Oct 31, 2013
    Messages:
    259
    Likes Received:
    1,005
    PO Trainer Name:
    Ripper Roo
    Androids can't view the images, only those on a computer can. You can still customize your TI with HTML on Android of course, just that you won't be able to see what exactly you've made without a PC user taking screenshots for you or something.
     
  34. Kotori Itsuka

    Kotori Itsuka Commander of Ratoskr

    Joined:
    Jan 7, 2015
    Messages:
    9
    Likes Received:
    0
    PO Trainer Name:
    Kotori Itsuka
    Thank you for the great guide Alice. ^-^
     
  35. Anirudh17

    Anirudh17 Garchomp

    Joined:
    Apr 21, 2015
    Messages:
    12
    Likes Received:
    2
    PO Trainer Name:
    Anirudh
    hey can u make and copy a full backgrund so i can just copy and paste and my background will be gud so pls make a diferent and paste pls
     
  36. Rabidragon

    Rabidragon Sakura's pet in Liga America

    Joined:
    Mar 21, 2015
    Messages:
    57
    Likes Received:
    23
    PO Trainer Name:
    Rabīdoragon
    The goal of the guide is to teach how you can make your own and unique personalized info not to give infos that you can just copy and paste (how a info is supposed to be "personalized" if everyone just copies and pastes the same info?? do you understand?), if you read the guide you can see that is extremely easy to make one, try to experiment with the values and colors of the backgrounds, you can easily create something cool

    You can use these backgrounds as a basic template to start, a lot of persons have these backgrounds in their infos and they only change the colors, i suppose you can do the same if you dont need something ultra original (but at least change the colors please)...

    Code (text):
    1. <body style="background-color: qradialgradient(spread:pad, cx:0.5, cy:2, radius:2, fx:0.5, fy:0.5, stop:0.0 white, stop:0.1 black, stop:0.15 pink, stop:0.4 black, stop:0.9 white);">
    Code (text):
    1. <body style="background-color: qradialgradient(cx:1 cy:.5 radius:1.5 fx:0 fy:0 stop:.2 #FFFF33 stop:.38 #99FF00 stop:.39 d stop:.4 #FF0000 stop:.41 d stop:.47 #0099CC);">
    Also i agree that this deserves to be a sticky thread
     
  37. Cirno

    Cirno Romantic

    Joined:
    Aug 6, 2011
    Messages:
    517
    Likes Received:
    356
    PO Trainer Name:
    Alice
  38. Anirudh17

    Anirudh17 Garchomp

    Joined:
    Apr 21, 2015
    Messages:
    12
    Likes Received:
    2
    PO Trainer Name:
    Anirudh
    i understand with ur message but i wanted to know how u made that image that u hav putten under my message thx
     
  39. DragonicOvrlord

    DragonicOvrlord New Member

    Joined:
    May 15, 2015
    Messages:
    4
    Likes Received:
    0
    Is there anything wrong on my coding
    <img src='pokemon:num=384-1' width=120 height=120>
    It doesn't show a mega rayquaza as I expected it
     
  40. Strudels

    Strudels ・◡・ Super Moderator Server Administrator Super Moderator Server Administrator

    Joined:
    Oct 31, 2013
    Messages:
    259
    Likes Received:
    1,005
    PO Trainer Name:
    Ripper Roo
    You won't see it if you're on android or an outdated version of PO. Otherwise it should work, there's nothing wrong with it.