Modding the HTML Report Backgrounds

[kq76]

If people don't like how the background colour of their html report screens are different from the rest of their skin, I figured out how to change it. Beware it takes a little technical know how, but if it bugs you, read on.

So there are two issues. And they may apply to all the skins, especially any user-created ones, but I'm going to use the classic skin as I think it's the most noticeable of the included skins. So when we look at the first screenshot attached below you'll see in the back background the dirt background of the classic skin. But then you'll see the white background on top of it and on top of it you will see the tan background of the html report.

Note: If you don't have the skin files needed for the following (the game doesn't actually come with the individual files, it comes with a file that contains all their info instead), you can download and install them via File > Workshop Central.

Also, before you do anything you might regret, I'd recommend copying one of the skin folders to leave it as a backup or to create your own. Rename it appropriately.

If you're not a fan of that white part of the classic skin (see attachment #1), go into your skin's style_sets\scripts\ folder, open browser_background.ss in notepad++ (or some other text editor), edit bg_colour's colour code to 00FFFFFF, and save the file.

You might wonder, "I thought hex colour codes were only 6 characters long?" Usually they are, but these are ARGB colour codes and the A stands for alpha channel which means transparency. So prefixing the 6 characters with 00 makes it fully transparent while FF, which is the default, makes it fully opaque. And you can make it whatever % in-between you like. For example, 40 would be 25%, 80 would be 50%, BF would be 75%, etc. It's a little awkward to convert some %s to a hex code as there are 256 hex codes (just multiply 256 by the % you want then look up its closest "dec"), but you can see them all here.

Then, if you have the skin that you're working on loaded in the game, load a different skin (File > Settings > Skin > select from drop down). Then in the skin folder of the skin you're working on, delete your skin.bin file. This is the file that contains all the skin's info that the game needs, but don't worry, it'll be recreated from the individual files once you re-load the skin. Now re-load the skin you're working on (again, File > Settings > Skin > select from drop down) and notice the difference (see attachment #2). It looks much better doesn't it?

Now what about that tan background still? If you don't like it (I do, but in case you don't), you can change it to be similar to the colour of the other screen backgrounds. For example, using my favourite little color picker program (cs3) I can see the other classic screens use colour F0DDB8.

Now this time instead of going into your skins folder, go into your templates folder and find the styles.css file named for the skin you're working off of. Again, create a copy as a backup, or if you're working on a newly named skin, name it the same as your skin. Open the (non-backup) file in your text editor. Open the replace dialog (Ctrl+H) and replace the existing background colour (in the classic skin's case it is F7F3DE) with the new colour you want it to use (say F0DDB8). The styles.css file uses normal 6 character hex codes so don't worry about the 8 character transparency stuff from above when it comes to this part. Select Replace All, then Close, and Save.

Now do as above again, switch out of the skin, delete its skin.bin file, re-load the skin, and notice the difference (see attachment #3). It's of course up to you whether it looks better, but it'll at least be consistent with the other screens now.

Again, you can do this for any skin, even one you create (I'm working on a new "Neon Purple" skin).

Also, if with a skin you create you notice your html report background changes after trying out other skins, just go into the templates folder, copy the styles.css file of the skin closest to yours, rename it the same as your skin's name, and from then on it'll use the file you created rather than the last loaded one. This puzzled me for quite a while and I only just yesterday figured out what was going on.

[Ty Cobb]

I really, really hope you continue to update on this. I'm at a loss when it comes to HTML, but with well documented tips I can keep up.

Thank you!

[kq76]

Is there something specific you'd like explained or something in particular you'd like to change?

I've thought for a while that I should post more about what little I do know about skinning the game, but my notes on the topic are pretty random and it would take some effort to put them into a format useful for others. The reason why I posted the above was it bugged me for a while and it seemed manageable to go from the problem (3 different backgrounds) to how to fix it. I suppose another I could do is how to go about changing the rating colours, for the bars and numbers, as that is what drove me to get back into skinning the game.

I'd love it if the dev who makes the skins would just write up some basic documentation because even I don't know what a lot of the files and code do. Even just explaining all the folder names in style_sets would help a tonne. I've figured out a bunch, but there are still some I don't know what they change. Like what exactly is a "panel"? I thought it must mean smaller frames in a screen and I'm pretty sure some trial and error indicated that before, but the other day I tried changing something to some "panel" file and I didn't notice anything different until later when I went to play a game out and the field, stadium, and sky all went black. I was stunned. Thankfully, I remembered what I had changed the day before and changed it back (I should have at the time, but I guess I forgot), but still, I didn't at all expect that change would effect the in-game screen.

[Ty Cobb]

I appreciate the offer, but there's nothing specific. I just love tinkering with the innards. Documentation from the belly of the beast would be great, but I'm not holding my breath. I've just tried replacing one of the font files, and now I'm trying to find out where it affects things.