[Guide] Guide To Personalising Your Trainer Info

~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):

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

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

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

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!



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.



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.



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.



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!



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:



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.



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.



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.



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!

 

Simple, straight-forward (user friendly), well organized with examples and images capturing major TI needs.

9.9/10

 

This has been very informative, thanks for sharing with us this =)

 

for the multicolored backgrounds, are there codes for colors besides basic colors? Like besides using the word orange, white, etc.

 

You can use colour codes fine. Like #0000FF for blue

 

How did you change the back ground?

I'm gonna look at this and personalise mine.

 

Great guide! HTML is pro mark-up language!

 

This is absolutely amazing! Thanks a lot Cirno :)

 

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.

 

This guide was very helpful and informative. Awesome job and thanks!!

 

Thank you all for the positive reviews!

EDIT: Look at last post.

 

Thanks so much! I always struggled on that!

 

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.

 

Just a quick update to say that &gen=5 is not need anymore.

 

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?

 

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!)

 

how can i use a mega houndoom instead of a normal one ?

 

Add a -1 after the pokedex number.
Like <img src = "pokemon:229-1"/>

 

how do you move the images because i want to make mega mewtwo x in the middle of the picture

 

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.

 

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

 

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!

 

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

 

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.

 

Great guide Cirno! Really taught me about a lot of things that had confused me in the past!

 

How to make a TI that uses a background in a battle?
http://prntscr.com/4kaajn
^ like that

 

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

 

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)

 

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.

 

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!

 

Can we please get this stickyed? IT IS SOOOO HELPFUL!

 

Does this work on android or no?

 

Thank you for the great guide Alice. ^-^

 

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

 

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

 

@inigomontoya @Rabidragon

I would sticky this thread, but this thread, and others, already feature in another sticky thread! I suggest you look at those as well. :3

 

i understand with ur message but i wanted to know how u made that image that u hav putten under my message thx

 

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