What's bio? Fluff made pretty. Bios are one of the best things on FUMBBL. They help win games. They make the crowd cheer for your team. They're stronger than Nuffle, stronger than the RNG... You want to win tournaments? Then start pimping your team. Oh no, I'm not talking about pixel hugging or so-called rules of 5. I'm talking about that empty space above your roster on your team page.

In this article, we're gonna follow the creation of a bio for my Amazon team, Divorce Worthy, step by step. What do we need for that?

• A concept, to fluff it up.
• An image manipulation program such as the GIMP.
• Basic bbcode knowledge.
• Talent.

Let's start with the concept. I hate that team. I hate Zons. But I've been quite successful with them. I won the XFL last year and I could do it again in a few weeks, so I think they deserve a nice bio. Fine, let's take all that hatred towards Zons and turn it into fluff. The bio should revolve around destroying other Zon teams, injuries inflicted, deaths... That should be a good start.

Now how are gonna do that? I could code a simple table with all the Zons injured, but that would be too easy, and boring. No, we need a better concept, something original. Instead, I could use an image of a Blood Bowl pitch, with blood splashes representing the injuries and pop ups showing who was injured and when. It's not gonna be easy, but heck... when you want something pretty...

First, we need to find an image of the pitch. We can either take a screenshot of a replay or extract the files of the client and rip it off.

It's looking good, but let's make it more chaotic. Let's add some of those craters we found when we were exploring the resources of the client.

OK, that's good enough. Let's not overdo it.

Unfortunately, the horizontal space is limited, and this image would be too large for the bio, so let's rotate it.

That should do the trick. We can now upload it to our gallery - and while we're at it, we're also going to upload the blood splashes we found when extracting the client resources - we will use them later.

We can now start coding. We're going to create a note and use it as a sandbox.

There are several ways to do what we want to do. We could cut the whole image into zillions of squares, duplicate each square to make a "blood splash" version of every one of them, and turn them into buttons. Instead, we're going to use a trick to turn the pitch into a background picture, and we will add those blood splashes as a new layer.

To do so, we're gonna wrap it in a block=floatcontainer, and we're gonna tell your browser that block is only 1px wide. The whole image is gonna be printed, but the next block=floatleft should start at only 1px from the edge, above the image of the pitch.

Let's try it out:

[block=floatcontainer]\ [block=floatleft width=1px][img]https://fumbbl.com/i/452452[/img][/block]\ [block=floatleft]Test text[/block]\ [/block]

It's working as expected, "Test Text" is where it should be, we can continue.

The goal is to list the Zons we have injured or killed so far, so here's the boring part: we're gonna have to watch all the replays to see were on the pitch it happened, and add the blood splashes accordingly. Fortunately, I don't play that team much, and that's only seven games versus other Amazon teams.

Let's start with the first injury. it happened on row 12 (the los), column 9 (we start at 0 to make the maths easier). each square is 30x30px, so that blood splash should be at 30*12=360px from the top of the pitch, and 30*9=270px from the left edge. We're gonna try it out:

[block=floatcontainer]\ [block=floatleft width=1px height=782px][img]https://fumbbl.com/i/452452[/img][/block]\ [block=floatleft height=782px width=450px]\ \ [block=floatleft height=360px width=450px]Vertical spacing[/block]\ [block=floatleft height=30px width=270px]Horizontal spacing[/block]\ [block=floatleft height=30px width=30px][img]https://fumbbl.com/i/452458[/img]Blood Splash[/block]\ \ [/block]\ [/block]

So far so good. The blood splash is where it's supposed to be. But wait... We've used empty blocks as spacers, but what if we have to add more blood splashes inside those spacers? We could do it, but that would be a nightmare to code. I guess we have no choice but to split them and create one block per square on the pitch. That's 390 squares... It's gonna be a long bio, for sure, but that's probably the best way to do it. Fortunately, CTRL+V is out friend.

Let's do it for the first row, to see if it works:

[block=floatcontainer]\ [block=floatleft width=1px height=782px][img]https://fumbbl.com/i/452452[/img][/block]\ [block=floatleft height=782px width=450px]\ \ [block=floatleft height=30px width=30px]1[/block]\ [block=floatleft height=30px width=30px]2[/block]\ [block=floatleft height=30px width=30px]3[/block]\ [block=floatleft height=30px width=30px]4[/block]\ [block=floatleft height=30px width=30px]5[/block]\ [block=floatleft height=30px width=30px]6[/block]\ [block=floatleft height=30px width=30px]7[/block]\ [block=floatleft height=30px width=30px]8[/block]\ [block=floatleft height=30px width=30px]9[/block]\ [block=floatleft height=30px width=30px]10[/block]\ [block=floatleft height=30px width=30px]11[/block]\ [block=floatleft height=30px width=30px]12[/block]\ [block=floatleft height=30px width=30px]13[/block]\ [block=floatleft height=30px width=30px]14[/block]\ [block=floatleft height=30px width=30px]15[/block]\ \ [/block]\ [/block]

Yes it does. Now we simply have to copy and paste that set of blocks... 26 times, once per row. I let you imagine what the code looks like.

Note: as the code is insanely long and repetitive, we're also adding notes with the row number before each set of block to know where we're at:

[block=hidden]Row 1[/block]\

It's just for our reference: your browser won't print it.

Back to that blood splash now. We want to turn it into a button so it shows infos about the injured player when pressed.

(...) [block=hidden]Row 13[/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][toggle=image src=https://fumbbl.com/i/452458 group=b block=Jeniakus][block=hidden roup=b width=95px id=Jeniakus][img]https://fumbbl.com/i/318577[/img]Col. Jeniakus (MNG)[/block][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ [block=floatleft height=30px width=30px][/block]\ (...)

We could make it prettier, but it's good enough for now. Let's do that for every player injured now...

All done!

OK, it's looking good, but it's not enough. The readers won't necessarily understand what it's about, so we have to explain it. The team has also earned a few trophies so we could make a section about them. It looks like we're gonna have 3 sections then... We need a menu. Oh, and while we're at it, we could also use a nice header. Let's start with that.

If you're as bad at drawing as I am, you may want to look for artwork on the internet, starting with akaRenton's library and Google Images.

It's decent enough after some resizing.

Now he have to draw that menu...

Done. It didn't take too long. Now we have to cut the menu in 3 different images - one for each button - and upload the lot. Once approved, we can start coding:

[img]https://fumbbl.com/i/452470[/img] [block=floatleft width=201px height=34px][toggle=image src=https://fumbbl.com/i/452465 group=menu block=1][/block]\ [block=floatleft width=200px height=34px][toggle=image src=https://fumbbl.com/i/452464 group=menu block=2][/block]\ [block=floatleft width=199px height=34px][toggle=image src=https://fumbbl.com/i/452466 group=menu block=3][/block]

It's taking shape. We could stop here, but we're going to pimp it a bit more and wrap this wall of text in a nice frame:

That's it, all done. The team is now ready for that XFL semi-final! It's not our best work, but if it wasn't for that Blood Bowl pitch, it wouldn't have taken too long. We also were expecting that Blood Bowl pitch to look better, but that's how it works: you can never know until you try. Remember: the first step when creating a bio is to come up with a nice idea. Then you work around that idea, add sections, pimp it, until eventually you come up with a better idea and start over.

The bio can be viewed in action here. The code is available here. Happy coding!