Light21 Skin - Colour Template System

For the Light Skin I have adopted my Template System from FM20 to make it easier to recolour the skin, however at the moment it is only partially using the system (as it's already taken long enough to release the skin) so you may still need to delve into the other files to change some of the colours.

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.

However before I discuss how to use the Template System we need to go over the basics of how the game colours work for those of you who weren't aware of the changes FM20 made, if you did use the system from FM20 then the instructions are pretty much the same.

Settings File Location

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

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 there 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 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 pre-set 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 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 there 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 used and are more there 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 - These are colours such as star ratings, attribute colours and picking colours that I have linked to theme colours which you may not want linked, so you can either change these. 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 Custom Colours - These are a set of custom colours I have created to allow easier re-colouring of various parts of the skin, without having to go in and edit various xml files each time you want to tweak the colour. NOTE: This section is still a WIP so not all of these colours are assigned and not all panels are linked to them so when changing them you may still need to go in and manually alter the colours from the various panel files.

The Fifth section covers the Changed Colours - These are colours that have been changed for the Light Skin, and where possible I have tried to link them to either the Theme or Custom colours so adjusting the above colours should adjust these values, 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 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 - 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.

Skin Colours Reference Tool

To make things a little bit easier with recolouring I have also modified the Community Information Panel in-game to list the key colours for the skin, this allows you to get a quick overview of the colours you've selected without having to go hunting around the game for examples.

The left hand column lists the Colour Name, the second column gives an example of the solid colour picked (note the graphic may not 100% match your declared colour as the table doesn't read the alpha channel and graphics have various degrees of transparency which will adjust their colour), and the next colour is an example of the colour as text.

To access this tool in-game go to the FM - Credits - Community Information Screen (you can also access this screen from the Main Menu to save you having to load up a save game), unfortunately you can only use this tool as a reference guide as you cannot change the colours from within the game (apart from the limited options you can change from the Preferences Menu).

Releasing Your Own Skin

You are free to use the Template System to release your own version of my Light Skin as long as you follow my standard redistribution terms found at the bottom of the page.

However before you release your modified skin you'll need to follow a couple of more steps.

1. Go to your skins folder, locate the folder for the Light Skin you have modified and rename the folder to the name you want your skin to have, now copy that name (note for best results keep the name short, use lowercase and avoid non-standard characters) open up the settings folder and rename the light21 settings xml file so it is now called <skin_name> settings - where <skin name> is the name of your skin (to save problems paste your name and make sure their is a space between the name and the settings text).

2. Go back up to the name folder for your skin, where you should have an xml file called skin_config open this file.

3. On the Name line change the value to reflect the name you want your skin to have in-game - this is the name that will be shown in the Skin Drop-down menu (and doesn't need to match the pasted name). Also change the value parts of the author and description names to reflect your details.

4. On the skin_name line in the value bit you need to replace the existing value with the name of your skin - again paste the text from before and this name needs to EXACTLY MATCH the name of the folder for your skin.

6. Finally if the game is running exit it and restart it, now go to the Preferences menu and select your skin, make sure the details are correct and that the game correctly loads up your skin, if it does you are now ready to release your skin, if you skin doesn't load make sure you haven't made any mistakes when changing the names (hence the advice to paste the name bits where the game needs it to match).

Redistribution Terms

You are free to post this content to your website provided:

1. It is not sold or behind a paywall.

2. You don't advertise it as being exclusive to your website.

3. My username and blog address are included: http://michaeltmurrayuk.blogspot.co.uk/

4. If linking to my work then please provide a link to the download page rather than the download link as the download link may change.

If you have any questions then the best place to ask them is in the Skinning Hideout at the Official SIGames Forums where I can be found most days.