Mint20 Skin - Template System

Introduction

The template system is an idea I have had for a while with work starting on it for FM19, whilst it appears someone at SI had the same idea and introduced a similar system for FM20, this system merges the two ideas together to create a more comprehensive Template that makes it a lot easier to change the skin colours, as instead of having to check nearly 1,500 colour variables you can instead recolour the skin by changing just a dozen colours.

When using the Template System I recommend using one of the Variants based upon the Default Skins, especially if you want to make a Dark Skin.

However before I discuss how to use the Template System we need to go over the basics of how the game colours work as things have changed a little for FM20.

Settings File Location

The skins colours (the ones we want to edit anyway) are contained within the settings xml file which is located inside the settings folder for the skin you are using.

Colour Code Basics

When you open the settings file you'll be presented with various lines that look something like these:

<colour name="fg" value="rgb(56,36,78)"/>

<colour name="fg alpha" value="rgba(56,36,78,0.6)"/>

<colour name="fg icon" value="blue 800"/>

<colour name="text" value="fg"/>

The above examples show the four methods of declaring a colour.

On the Left the colour name part is where you declare a colour variable and the value bit on the right hand side is where you tell the game what colour you want your variable to use.

So on the first line we are declaring a colour variable with the name fg and the value bit tells the game what colour to use (in this case a dark purple).

The first example uses the rgb system - where you declare the amount of Red, Green, Blue you want to use, with values ranging from 0 to 255 which allows you to declare any colour you can think of.

The second example also uses the rgb system but has added in an alpha channel. The alpha channel sets the opacity of the colour, where 0.1 is almost transparent and 0.9 is almost solid.

There are two main ways of using the RGB system;

1. You have an image of the colour you want to use, to get the RGB colour of this load the image into an image editing program such as MS Paint, select the Colour Picker tool and click on the part of the image that has the colour you want, then click the Edit Colours option and in the box that popups you'll see on the right boxes for Red, Green and Blue these are the RGB values you need.

2. You want full control over the shade of colour. In this case you can also open up MS Paint, select the Edit Colours option and in the popup you'll see a colour wheel, drag your cursor around to select different colours, and use the separate bar on the right to adjust the strength of the colour, once you have the colour you want you'll see on the right boxes for Red, Green and Blue these are the RGB values you need.

The advantage of the RGB system is you can pretty much pick any colour you want, however this can also be a downside as it can be hard to narrow down the perfect shade.

The third example uses the Palette system - the game includes a list of default colours that you can pick from. The full list of palette colours can be read from the colour palette xml file found in the sitoolkit\palettes folder which is extracted from the sitoolkit fmf file. Thankfully these palette colours are based on the Material Design Colours and you can see a visual representation of the palette colours on this site: https://www.materialui.co/colors (just make sure you have the Material Design Colours option selected in the top menu).

Using the Palette colours is really simple as you can see in the above example they are made up of two parts a name and number. The name sets the colour (blue) and the number determines the shade (800) where the higher the number the darker the shade (NOTE: You can only use the pre-assigned numbers 100, 200, 300 etc...)

The advantage of the Palette system is with a list of predefined colours it is easy quickly change the just the colour and keep the shade, or change the shade and keep the colour and due to how they are named it's easier to visualize them, the downside is their are only a limited selection to pick from.

The last example is what I call a Relative colour, and works in a similar manor to the palette colours, however instead of referencing a set of pre-defined colours it instead references a colour variable you have declared in the settings file.

So in the above example we declare a colour variable named text and tell the game we want to assign it the colour value fg, which is a colour name we declared earlier in the file and assigned via the RGB system a shade of purple.

Another important thing to note is that due to the Relative colours the order you list the colours in is now important, as the game reads the code line by line, so Relative colours need to appear after the colour you are linking them to.

So again using the above examples on the first line we declare a colour variable with the name fg and use the rgb value to set the colour, then on the fourth line we declare a colour variable with the name text and tell the game we want it to use the colour called fg, which in this case we have already declared so the game knows what colour to display in game. However if instead we declared the colour variable text on the first line and told it to use the fg colour the game wouldn't know what colour to use and will revert to the default values because we haven't declared the fg colour variable yet.

To keep things simple if the name part (the bit on the left) starts with bg/fg/mg then this is a Reference Colour and must appear at the top of the file as another colour variable later on will refer to it. Similarly if the value part starts with bg/fg/mg then this is a Relative Colour and needs to appear after the Reference Colours for the game to correctly read the colour value.

(This shouldn't matter for most users, as I have already put the colours in the correct order so their shouldn't be much need to move them around)

Template System

Now you should have a basic understanding on how the games colours work I can guide you through how the Template System works.

The Template System uses Relative Colours method (fourth example above) to set the bulk of the skins colours to a selection of Reference colours, which means when you change the colour of the Reference Colour it also changes all colours linked to it.

To simplify things I have split the colours in the settings file into sections.

The First section is for the Theme Colours (lines #19-47) and these are the main colours you will change to recolour the skin and they are split into two parts the first part are the various fg colours and these are generally used for text and icons, and for Light Skins you'll want these values to use darker colours, the second part are the various bg colours and these are generally used for the box, button and menu colours where in the Light Skin you'll generally want them to be light.

This section should recolour ~90% of the skin and for most users should be all they need to adjust, the other sections should only really need to be changed if you don't like some of my preset colours or you need a bit more control over the colour scheme of your skin, but I'll run through what those sections cover below.

The Second section are the Generic Theme Colours (lines #49-289) these cover the range values (morale, position rating etc...) which you shouldn't need to change but need declaring at the top of the file and then I have declared themed versions of the palette colours - you'll notice for each palette colour I have declared nine options - you have a fg, bg and mg version of each and for each of them their are a normal, darker and lighter version - fg versions are generally used for foreground items such as text and icons and for the light skin want to be dark, bg versions are generally used for background items such as boxes and buttons and for light skins generally want to be light as foreground items sit on top of them, the third versions are the mg versions and these are for colours that are used as both bg and fg items which means you generally need a mid level shade (though currently most of the mg values aren't currently used and are more their for future proofing). Again in most cases you shouldn't need to change these unless you are unhappy with the shades I have picked, with the advantage being if you change one of these colours it will change all colours linked to them so you can make your skin lighter or darker by changing the shade used here instead of having to alter all the individual colours.

The Third section covers the Special Colours (lines #292-353) - These are colours such as star ratings, attribute colours and picking colours that I have linked the theme colours which you may not want linked, so you can either change these or if you want the default values delete the lines and they'll revert back to default. Also included in this section are the sidebar colours, however you need to be careful when recolouring the sidebar as the game assumes the text is always light and the sidebar is always dark.

The Fourth section covers the Relative Colours (lines #356-1356) - These colours are the main colours of the skin and are set as Relative Colours where they reference back to the colours declared in the top two sections and for the most part you shouldn't need to adjust these as they will change when you adjust the main theme colours, the main reason to change these is if you want don't like the colours I've link together, you'll also note that some of these colours don't use the theme colours but just standard rgb/palette colours and that is because I've tried to keep colours together where possible to make it easier to change them.

The Final section covers the Generic Colours (lines #1359-1849) - These colours don't change with the skin, so these will need to be changed manually however these cover things that you don't generally need to recolour when skinning.