Jump to content

[FM20][SKIN] Mint Skins - BBC Sport, Blue, Green, Dark, Light & Purple Versions


Recommended Posts

FM20_skin.png.92103d125ff2705208f8e7c747bf3e68.png

Football Manager 2020 - Mint Skins


Thanks to taking a break and due to the current downtime I have actually managed to just about get an actual proper skin released. (And provided FM21 doesn't make too many behind the scenes changes updated FM21 versions should be out not long after the full release hopefully).

These skins are an evolution of the personal skin I've used over the years but never managed to put into a releasable state until now (if you've followed my progress in Dafuge's Challenge over the years you'll likely recognize parts of it) and is based on the Default Light Skin and started life off with a green and blue tint (hence the name) before I went on a bit of a tangent for FM20 and based the colours loosely on the BBC Sport Website.

In addition to changing the colours the skin also makes changes to several panels with the main changes being:

Player Profile Attributes Panel - I've set the Personal Details Panel back to a more classic dual column layout and added some extra details (Playing Time and Home Grown Status) and moved the Foot and Personality data over from the Extra Details panel which frees up some more room for the Player Traits, I've also increased the player pic and logo sizes to fill the space more. Whilst in the Selector Panels I have enabled the Reports panel which will show the Star Ratings for your players and Scout Recommendation for scouted players.

Club Info Profile Panel - I've reworked this to include more info from the other Club Info Panels, top area now includes a lot more club info, I've increased the Selector Panels so you now have three (game really doesn't like it when you add any more) with options to show Legends, Rivals, Landmarks and Honours added to the panels.

Manager Home Panel - The Selector panels now use the vertical split containers which means you can adjust the heights in game which increases the flexibility of the screen especially if you are playing at a lower resolution.

Manager Profile Panel - I've split out the tabbed container so all info is now visible all the time, though I'm a little limited in what I can do with this screen whilst still supporting lower resolutions.

Tactics Panel - Flattened the pitch and changed some of the colours.

Match Line-ups Panel - Changed the shirts to use the ones shown on the induction panel and flattened the pitch along with a few more tweaks.

Match Screen Mods - Skin includes my Match Screen Mod.

Background Support - I've also brought over my Background Support Mod from FM19.

Other changes include striping away the team recolouring in the info bar that appears at the top of some screens, I've also removed most of the white text from the light skin (though some bits are hard-coded and cannot be removed) and made some other tweaks along the way.

Template System - A fair amount of work went into the back end setting up a Template System which allows you to easily recolour the skin and will be discussed in the links below.


Screenshots


mintbbc_tactics.thumb.jpg.20e273b2468298a10b07fd8dc83b5ec7.jpgmintbbc_clubinfo.thumb.jpg.bc5e35aff8413fab269d6e50fe463c98.jpgmintbbc_home.thumb.jpg.5b8de637ee183e09a87628e967821ffc.jpgmintbbc_lineups.thumb.jpg.794ee911106c33ed5f42f211612afb29.jpgmintbbc_manager.thumb.jpg.691f3c312232431448d9136a2379049d.jpgmintbbc_player.thumb.jpg.e4f59f52629e6651018583083daa587e.jpg
 

Installation Instructions

Please refer to the Standard Skin Installation Instructions Located Here.

 

FM20 Mint Skin (BBC Sport Version) DOWNLOAD PAGE

 

Advanced Instructions

Mint Skin Variants - This post/page contains links to a couple of variations of the skin which showcase the Template System.

How To Use The Template System - This post/page will talk you through how to use the Template System to create your own Version of the Mint Skin.

How To Enable Background Support - This is a quick guide instructing you on how you can adjust the strength of the background overlay to better support custom backgrounds.

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

Link to post
Share on other sites

Mint Skin - Variants

Thanks to the Template System it is fairly easy to recolour the skin, to showcase this I have also released a couple of variants.

Please note that whilst the Template System makes it quicker and easier to recolour skins, you still need to pick the correct colours so their might be some minor issues with the following variants, and for FM20 they are more of a proof of concept (especially the Dark ones as I don't use Dark Skins) though if there are any glaring issues let me know and I'll try to fix them (though on the light skins a fair amount of the remaining white text is hard-coded so not much I can do about it).

Also I am open to suggestions for any themes people would like to see for FM21, as assuming FM21 doesn't do any major re-writing of the skinning system I should be able to get FM21 versions out not that long after the full release.


Mint Skin (Green)
This was the original version of the skin (hence the Mint name) and is a light version with a green tint.

mintgreen_vision.thumb.jpg.d14bc8f918c5baed2e0b788d1e61878f.jpgmintgreen_clubinfo.thumb.jpg.7499c51ac857c50846e5cc766cffe2f3.jpgmintgreen_results.thumb.jpg.ca3ff84ff21c200b4241144b81a7767b.jpgmintgreen_transfers.thumb.jpg.00e68dbabab3c770637206ab503832d3.jpg

 

Mint Skin (Blue)
This was the original variant version and is a light version with a blue tint.


mintblue_player.thumb.jpg.bd518edb55c7cbb8cc3e8d277d115fe4.jpgmintblue_stats.thumb.jpg.26d8d04a24db4b8e710cccec4d9f60b9.jpgmintblue_tactics.thumb.jpg.c0a272fd6d2ef3a57f8005164498cb01.jpgmintblue_clubinfo.thumb.jpg.8d30db3f5e7979cb1c8f28f1bc7548f6.jpg

 

Mint Skin (Light)
This is a version based on the Default Light Skin and I've tried to keep the colours as close to the Default Light Skin where possible (whilst fixing some issues with white text).

mintlight_clubinfo.thumb.jpg.08cb68b73c474a0d83ce6f0c8a42e3f9.jpgmintlight_lineups.thumb.jpg.27cc49fca46e264739f2be915ddac2e6.jpgmintlight_player.thumb.jpg.69ea48810376acd1d2234069cad02e5b.jpgmintlight_tactics.thumb.jpg.b938b9a579ed49038a54fdc0637c8336.jpg

 

Mint Skin (Dark)
This is a version based on the Default Dark Skin and shows how the template system can quickly switch the skin from Light to Dark.

mintdark_match.thumb.jpg.2e53924d68961d34ade82f5ce29425b9.jpgmintdark_player.thumb.jpg.6bd77c1ad14d0c3bd1e42835c6439a1a.jpgmintdark_scouting.thumb.jpg.9548e25c5bca1961a2726cec3818c350.jpgmintdark_tactics.thumb.jpg.ed66b14bbaeac7914562773d7a929d07.jpg

 

Mint Skin (Purple Default)
This version is based on the Default (Purple) Skin and it's main difference from the Dark version is that this one keeps the Light Inbox and Scouting Screens as used by the Default Skin.

mintdpurple_inbox.thumb.jpg.f166376cb59b3f598c57c39b871729d8.jpgmintdpurple_player.thumb.jpg.c9ca115d7d3b05ce794c08de15d4f981.jpgmintdpurple_scouting.thumb.jpg.92f139ca0d63f36250b863ebc22282db.jpgmintdpurple_tactics.thumb.jpg.3a7d79348a4e08fe87991a875156ebc2.jpg


Installation Instructions

Please refer to the Standard Skin Installation Instructions Located Here.

 

FM20 Mint Skin Variants Download Page
(all the above versions are listed on this page)



Advanced Instructions

How To Use The Template System - This post/page will talk you through how to use the Template System to create your own Version of the Mint Skin.

How To Enable Background Support - This is a quick guide instructing you on how you can adjust the strength of the background overlay to better support custom backgrounds.


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

Link to post
Share on other sites

Mint Skin - Template System


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. (The System is a more advanced version of the Base Skins but at the same time easier to use - and if people find the idea useful I'll see about applying it to the Base Skins for FM21).

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.


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.

skincoloursref.thumb.jpg.dd459834f7b31aa50a23507a481caf7f.jpg

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 you've 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 Mint Skins 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 Mint 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 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.

5. You shouldn't need to edit the parent line, as you should have modified the Mint Skin that corresponds to the Default Light/Dark/Purple skin, but if you do need to change it fm dark alt is the Light Skin, fm dark is the Dark Skin and fm is the Default Purple 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/

Link to post
Share on other sites


Background Support Instructions

Whilst the Default FM20 skins natively support custom backgrounds, they don't have an overlay layer so you may find your custom backgrounds leave bits of the game unreadable, so with my Mint Skins I have re-enabled the background overlay and included several files of different transparency levels so you can adjust the strength of the overlay yourself as a suitable level comes down to personal preference.


To Adjust the Overlay Strength

After installing the skin if you browse to the graphics\boxes\custom\background folder for the version of the Skin you are using you'll notice several graphic files these are numbered by the level of opacity - 0 is fully transparent and 100 is fully solid.

For these skins I haven't included a default paper file so they will use the default one from the game which is fully transparent.

To adjust the strength of the overlay, select the graphic with the level of transparency you want and rename it to paper, next make a copy of this file and then rename your copy to paper@2x. The @2x file is used for the zoom in mode.

To get the game to read your changes make sure the skin cache is off and reload your skin and the changes should apply.

To undo your changes or to pick another option if you first one isn't to your liking, first delete the paper@2x file then rename the paper file back to its existing number, then follow the previous instructions to rename a different file, then it is just a case of trying the different options until you find a level that suits you.


To Change the Overlay Colour

Inside the boxes\custom\background folder you'll also notice an xml file called paper, this file controls the colour of the overlay.

To recolour the overlay open the xml file called paper locate this line:

<colour id="red_replacement" name="bg"/>

The name bit determines the colour of the overlay, to change the colour change this value to a different colour name which you can get from the settings file for the skin you are using.
 

Link to post
Share on other sites

Steam Workshop - Mint20 Skins

 

I've now uploaded the various Mint Skins to the Steam Workshop for those of you who prefer to access skins that way.

However due to the limitations of the Workshop you won't be able to adjust the overlay strength or use the Template System to recolour the skin so in those cases you are best downloading the above copies, similarly if you have the Gamepass or Epic versions you won't be able to access the Workshop files.

 

Steam Workshop Mint20 Skins Collection Page

Edited by michaeltmurrayuk
Workshop Skins now out
Link to post
Share on other sites

Hi there I'm using the Mint Skin Dark but as you can see the background causes a problem where you can't see very much so my question is can you turn the brightness down or disable the background for this skin as i really don't want to delete the background pictures ??

Thanks for any advice

piccy.JPG

Link to post
Share on other sites

 

First of all, I am very happy that you are back. All of these skins are very nice and I will use the bbc skin but I could not add a instant result button to this skin. I know how to add it I have added it to several different skins but I have not managed to add them in this theme. Can you tell me how i can do it i guess this theme has different codes

Link to post
Share on other sites
2 hours ago, canry said:

 

First of all, I am very happy that you are back. All of these skins are very nice and I will use the bbc skin but I could not add a instant result button to this skin. I know how to add it I have added it to several different skins but I have not managed to add them in this theme. Can you tell me how i can do it i guess this theme has different codes

Shouldn't be anything in the skins stopping the Instant Result Mod (as copying over those files would overwrite mine), though I'm still a bit behind with the state of other mods so have you got a link to the FM20 version of the Instant Result Mod and I'll have a look to see what might be conflicting.

EDIT: Just checked and assuming you are taking the files from the Wannachup-FM20-Instant-Result skin then it should work - you can safely copy over the files from the match folder as I haven't touched those three files, for the client object browser xml file you'll need to copy the Instant Result Code over instead of just replacing the file, you just need to make sure you paste the code into the same place in the file (you can change the colours set in the instant result button from bg to ui_header_background if you want to match the colours I used for the continue button) then save the file and reload the skin and it should be showing.

Edited by michaeltmurrayuk
Link to post
Share on other sites
5 saat önce, michaeltmurrayuk said:

Shouldn't be anything in the skins stopping the Instant Result Mod (as copying over those files would overwrite mine), though I'm still a bit behind with the state of other mods so have you got a link to the FM20 version of the Instant Result Mod and I'll have a look to see what might be conflicting.

EDIT: Just checked and assuming you are taking the files from the Wannachup-FM20-Instant-Result skin then it should work - you can safely copy over the files from the match folder as I haven't touched those three files, for the client object browser xml file you'll need to copy the Instant Result Code over instead of just replacing the file, you just need to make sure you paste the code into the same place in the file (you can change the colours set in the instant result button from bg to ui_header_background if you want to match the colours I used for the continue button) then save the file and reload the skin and it should be showing.

I deleted these 2 codes and copied the instant results codes, now it worked. thanks. I haven't deleted these two codes before. didn't work but now it's ok

3 match panel xml files copy than wannachup

Screenshot_1.png.4260220191e10c867b559546542adbf8.png

Screenshot_2.png.25f686f58c3c7482ddabe224d064672d.png

Screenshot_5.png.5149a4e209124accb08764df22ffc0b7.png

Screenshot_4.png.58f02370939140ba5a4e8ea9287e2413.png

 

 

Screenshot_1.png

Edited by canry
Link to post
Share on other sites
16 hours ago, michaeltmurrayuk said:

@bezzy1970 Follow the instructions in the Background Support post above - you just need to rename the file in that folder that has the level of transparency you want.

@michaeltmurrayukI apologize. I must be getting old i missed that part. All sorted now. You can't beat a basic skin 👍

Just a quick thing. I'm still trying to learn aout skinning and my personal choice is to have a instant result button so is there a guide about adding a button ??

Edited by bezzy1970
Link to post
Share on other sites
7 hours ago, bezzy1970 said:

@michaeltmurrayukI apologize. I must be getting old i missed that part. All sorted now. You can't beat a basic skin 👍

Just a quick thing. I'm still trying to learn aout skinning and my personal choice is to have a instant result button so is there a guide about adding a button ??

You should just need to follow the last few posts for details on how to add the Instant Result Mod - You need to copy the contents of the match folder over from the instant result skin, and for the client object browser file you'll need to copy the code over instead of the file, if you compare the two files it should be clear what code you need to copy over and where to put it (you can see the code in the above screenshots).

Link to post
Share on other sites
9 minutes ago, michaeltmurrayuk said:

You should just need to follow the last few posts for details on how to add the Instant Result Mod - You need to copy the contents of the match folder over from the instant result skin, and for the client object browser file you'll need to copy the code over instead of the file, if you compare the two files it should be clear what code you need to copy over and where to put it (you can see the code in the above screenshots).

:applause: Thank you sir. Much appreciated

Link to post
Share on other sites

@michaeltmurrayuk Sorry to keep asking questions but like I said I just want to learn more about skinning. At the moment the skin is looking great but i'd like to do just one more thing and that is on the player screen how do you go about putting in the hidden attributes panel as its just a personal choice for me.

Thank you for any help you can provide

Link to post
Share on other sites

Thanks a lot for this. I've been wanting to move on from FM18 to FM20 but was really let down by the default skins (specially the light one with it's huge purple on purple boxes). Your skin is exactly what I was looking for.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...