Skins‎ > ‎

FM16 Kit Titlebar Colours Mod


Football Manager 2016 introduced a new method of recolouring the titlebar, which simplfied the code and made it possible to recolour more of the skin, however one of the other things this new method did was apply a contrast check to the colours to make them more readable, however some people prefer the teams to use their original proper kit colours in the titlebar.

This is what this mod does it replaces the new contrast checking recolouring code with the old style pure recolouring code.

Note: Whilst this mod removes the contrast check which will result in the colours of some teams changing, it won't set all teams to their 'real' colours it will only set them to the colours declared in the database, so whilst it will change the shade of blue used for Barcelona it won't set their text colour to red, as the database has them set to yellow.

However not all parts of the game support the old recolouring code so this isn't a perfect replacement, the two main areas the old code isn't supported on are:

- The Match Screens.
- The Actionbar text.

Screenshots
(Top part of image is default skin, bottom part this mod)




I've also tweaked the size of the back/forward arrows as in the default skin the back arrow is bigger, which doesn't look right when the recolouring has been removed from them.


Installation Instructions

If you are using one of the default skins then you will first need to download and switch to the relevant Base Skin.

Once you have downloaded the below file, unzip it and you should have two folders (panels and graphics), place the two folders inside the folder for the skin you are using.

Then load up the game (switch to the relevant Base Skin if applicable) and from the Preferences Menu turn off the Skin Cache if it is on and Reload your skin.

The Mod should work with other Custom Skins, however it will depend on what changes that skin has made, this mod modifies the following files:

panels\client object browser.xml (recolours the actionbar)
panels\header.xml (recolours the titlebar background and arrow buttons)
panels\titlebar search panel.xml (recolours the titlebar text)
panels\titlebar.xml (recolours the titlebar icons - quick flicks, search, world)

Aswell as the contents of the following folder:

\graphics\buttons\custom\interface\navigation bar (recolours the arrow buttons)


If the custom skin you are using hasn't modified or doesn't include those files then this mod will work with no problems, if the skin has modified those files then you will need to follow the advanced instructions below on how to modify the files yourself.

Also if you don't want all of the recolouring changes you can delete the individual files as they each control different things so they aren't all needed if you only want to change the recolouring on some parts.



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



How To Modify The Files Yourself

Before you start you will need to have extracted the following default files:
If you don't know how to extract the files then read this first: FM2015 Guide: How to Extract Default Files & Understand File Structure

skins\fm\panels\client object browser.xml
skins\fm\panels\header.xml
skins\fm\panels\titlebar.xml
panels\titlebar search panel.xml

You might also want to extract the contents of this folder aswell:

skins\fm-widgets\graphics\buttons\custom\interface\navigation bar\

And if you have FM15 installed to save you some time you can also extract the same files from the same navigation bar folder.


How To Change The Recolouring Code In General

The new FM16 recolouring code will look something like this:

red_replacement="primary"

Or this:

colour="secondary"

The 'primary' value tells the game to recolour the item to the teams background/shirt colour (i.e. Red for Man Utd) and the 'secondary' value tells the game to recolour the item to the teams text/pattern colour (i.e. White for Man Utd). However both of these values also apply a contrast check before applying the colour which is what changes the actual colour that is shown.

The red_replacement attribute tells the game to replace the red part of that graphic with the assigned colour, you may also come across green_replacement and blue_replacement attributes.

Removing this code is just a case of deleting the above bits of code for the items that you don't want the contrast check to apply to.

Once you have done that you need to add back the old style recolouring code that doesn't do a contrast check and the old style code looks like this:

<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="tbcl" />
<integer id="set_property" value="rclr" />
</record>
</list>
</record>

Now the lines we are interested in are the integer elements as these are the bits that control the recolouring.

The first value 'tbcl' tells the game to set the items colour to the teams background/shirt colour and this is the value you will use to replace the items that use the 'primary' colour in the new code.

The other value you can use is 'ttcl' and this tells the game to set the items colour to the teams text colour and this is the value you will use to replace the items that use the 'secondary' colour in the new code.

Also depending on what you are changing you will also need to adjust the value id of the second integer element.

The 'rclr' value tells the game to recolour the item and this value is used when you are recolouring graphics.

The other value you need to know is 'colr' and this is used to set an items colour and is used when you are setting the colour of text.

These are the basics of the recolouring code, however in practice the actual code you use may be slightly different depending on what you are replacing, as a step-by-step guide the below sections talk you through the exact changes I made to create the above mod.

If you are having to modify the files yourself to apply the mod to a custom skin then you should just need to follow the below parts of the guide to apply all my changes manually to your skin, note however that these examples are based on the default code so the code in your custom skin might be slightly different but should still be in the same format.


How To Change Titlebar Background Recolouring Code

The first thing we need to do is to change how the titlebar background is recoloured, to do this you need to edit the 'header.xml' file if you open that file locate this code:

<!--titlebars-->
<container class="bordered_box" appearance="boxes/custom/interface/titlebar/paper" height="50" red_replacement="primary">

And change it to:

<!--titlebars-->
<container class="bordered_box" appearance="boxes/custom/interface/titlebar/paper" height="50" rthr="68">
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="tbcl" />
<integer id="set_property" value="rclr" />
</record>
</list>
</record>

That will change the titlebar recolouring from using the new contrast check colour to the old style exact kit colour.

Unfortantley the Match Screens won't read the old style code which leaves you with black back/forward arrows on the Match Screens, the easiest way to fix this is to just remove the recolouring setting from the back/forward buttons. (If the skin you are using has already removed the recolouring from the arrows then you can skip this section).

To remove this code first you need to edit the 'header.xml' file, in that file locate both instances of the following code:

<record id="primary_icon_properties" red_replacement="primary"/>

And modify it so it the red_replacement points to a set colour so it isn't recoloured for example:

<record id="primary_icon_properties" red_replacement="ui_header_icons"/>

Next you will also need to replace/edit all the files in:

\graphics\buttons\custom\interface\navigation bar

The graphic files need to be replaced with non-transparent files and the colour replacement code in the xml files needs changing to a set colour rather than the primary/secondary code that recolours them.

The quickest and easiest way to change them is to just use the files from FM15, if you have extracted the FM15 files just copy them into that location, (if you don't have FM15 to extract the files from, then you can download my mod and use those files instead).

If the skin you are using has already changed the graphics in that location to non-transparent ones then you can still use the FM15 xml files to save you having to edit them manually.


How To Change Titlebar Text/Icons Recolouring Code

To change the recolouring style of the text in the titlebar you need to edit the 'titlebar search panel.xml' file, this is a simple change, in that file locate this section of code:

<!-- title area -->
<widget class="text" id="sect" alignment="left, centre_y" size="xlarge" style="semi_bold" multiline="false" height="18" wants_mouse_events="false" dont_give_default_focus="true" colour="secondary">
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="titl" />
<integer id="set_property" value="text" />
</record>
<!--<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="colr" />
</record>-->
</list>
</record>
</widget>

<!-- description -->
<widget class="text" id="subs" size="xsmall" alignment="left, centre_y" multiline="false" dont_give_default_focus="true" height="10" colour="secondary">
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="subt" />
<integer id="set_property" value="text" />
</record>
<!--<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="colr" />
</record>-->
</list>
</record>
</widget>

And remove the bits of code I've highlighted, you'll notice you don't need to add the old code back in as the old code is already there but just disabled deleting the highlighted bits will reactative the old style code, if done right your code should now look like this:

<!-- title area -->
<widget class="text" id="sect" alignment="left, centre_y" size="xlarge" style="semi_bold" multiline="false" height="18" wants_mouse_events="false" dont_give_default_focus="true" >
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="titl" />
<integer id="set_property" value="text" />
</record>
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="colr" />
</record>
</list>
</record>
</widget>

<!-- description -->
<widget class="text" id="subs" size="xsmall" alignment="left, centre_y" multiline="false" dont_give_default_focus="true" height="10">
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="subt" />
<integer id="set_property" value="text" />
</record>
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="colr" />
</record>
</list>
</record>
</widget>


The Search Icon is controlled by the same file and to change the code we use the same code as the background but instead use the ttcl id to set its colour to the text colour, so we locate this code:

<!-- search icon -->
<widget class="button" id="srch" appearance="icons/26px/search" width="30" dont_give_default_focus="true" red_replacement="secondary">

And replace it with this code:

<!-- search icon -->
<widget class="button" id="srch" appearance="icons/26px/search" width="30" dont_give_default_focus="true" >
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="rclr" />
</record>
</list>
</record>


For the Quick Flicks we do the same, but this time we need to edit the 'titlebar.xml' file, so locate this code:

<widget class="quick_flick_button" id="flkl" auto_size="all" appearance="icons/16px/up" icon_enabled="true" cached="true" step="-1" red_replacement="secondary">

And change it to read:

<widget class="quick_flick_button" id="flkl" auto_size="all" appearance="icons/16px/up" icon_enabled="true" cached="true" step="-1" >
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="rclr" />
</record>
</list>
</record>

There will also be another set of similar code for the down button (with the id="flkr") to edit that you just need to make the same change, but just make sure you don't change the id from flkr if you are pasting the above code.


The final part of the titlebar to change is the World Icon, this code is a little different because it has a couple of items. Locate this section of code in the 'titlebar.xml' file:

<!-- World dropdown -->
<widget class="world_popup_button" id="wrld" target="main" width="62" icon="icons/26px/world" appearance="buttons/custom/interface/date/button">
<record id="primary_icon_properties" red_replacement="secondary" />
<record id="secondary_icon_properties" red_replacement="secondary" />
<attachment class="test_multiple_globals_attachment" default_value="true">
<list id="get_properties">
<record get_property="gset" test_mode="0" value="false" />
<record get_property="iVMg" test_mode="0" comparison_mode="1" value="true" />
</list>
<integer id="set_property" value="hidn" />
</attachment>
</widget>

And change it to read:

<!-- World dropdown -->
<widget class="world_popup_button" id="wrld" target="main" width="62" icon="icons/26px/world" appearance="buttons/custom/interface/date/button">
<attachment class="test_multiple_globals_attachment" default_value="true">
<list id="get_properties">
<record get_property="gset" test_mode="0" value="false" />
<record get_property="iVMg" test_mode="0" comparison_mode="1" value="true" />
</list>
<integer id="set_property" value="hidn" />
</attachment>
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="Icol" />
</record>
<record>
<integer id="get_property" value="ttcl" />
<integer id="set_property" value="Jcol" />
</record>
</list>
</record>
</widget>


How To Change The Actionbar Recolouring Code

If you are wanting to change how the Actionbar is recoloured then you need to edit the 'client object browser.xml' file, in that file locate this bit of code:

<!-- coloured actions bar image -->
<widget class="bordered_box" id="ACTb" appearance="boxes/custom/interface/tab bar/paper" red_replacement="primary" green_replacement="primary"/>

And replace it with:

<!-- coloured actions bar image -->
<widget class="bordered_box" appearance="boxes/custom/interface/tab bar/paper" rthr="68">
<record id="object_property">
<list id="get_properties">
<record>
<integer id="get_property" value="tbcl" />
<integer id="set_property" value="rclr" />
</record>
</list>
</record>
</widget>

Unfortunately it isn't possible to change the recolouring style of the Actionbar text to use the none contrast checked code.