This is a simple guide that will tell you how to recolour the footer so it changes colours like the titlebar does.
Note that this guide will work for both FM2010 and FM2011. (If you are using FM2010 change the 2011 to 2010 whereever it appears)
For this guide you will require:
- The Resource Archiver Tool - this is installed with FM2010/FM2011 and will be located in the tools folder of where you installed FM (It isn't included with the Demo so you'll need to use the FM2010 Version). For full instructions on how to use the Resource Tool see this thread or read the pdf file installed with the tool.
- An xml editor - Notepad++ is recommended, however Notepad, or even Word or a HTML editor will be fine.
- A Graphics editing program - Paint.net is free and easy to use.
Modifying the Footer Code.
First assuming the following files aren't already inside the panels folder for your skin, you'll need to extract a couple of files from the fmf files, the files we need are all located within the skins.fmf file that is located inside the data folder for where you installed FM, you need to extract the following xml files:
\skins\fm2011\panels\footer.xml
\skins\fm2011\panels\breadcrumbs.xml
[If you are using my Base Skins for FM2011 then the above xml files are already included in the panels folder so you don't have to extract them.]
Once you have extracted the xml files copy them into the panels folder for your skin.
Now open the footer.xml file and locate these lines:
<!-- coloured bar image
<widget class="picture" id="pict" file="interface/footer/bar" height="18">
<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>
</widget>-->
And replace them with this code:
<!-- coloured bar image -->
<widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="68">
<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>
<!-- set the colour of the image to the team background colour -->
<attachment class="get_global_attachment" get_property="tbcl" set_property="colr"/>
</widget>
The colour coding is controlled by two bits of code:
The rthr="68" code on the top line controls how light or dark to make the graphic - increasing the value will make the footer graphic darker, whilst lowering it will make the graphic lighter, 68 is the default value.
The bottom line tells the game where to get the colour from and is set with the get_property flag and it has two common values:
tbcl - tells it to use the clubs main colour - the colour that appears on the titlebar background (for example for Norwich City this is Yellow).
ttcl - tells it to use the clubs second colour - the colour that the text in the titlebar appears (for example for Norwich City this is Green).
After you have made the above changes, save the file.
Before we go any further it is a good idea to load the game and see what it looks like (if you have the skin cache on you'll need to turn it off and refresh your skin to see the changes) - if you are happy with now the footer graphic appears you can miss this next bit out and go down to the bit apart recolouring the text in the breadcrumbs menu, if you are not happy with how the footer looks then you will need to create some new footer graphics (for example the default footer graphics are fairly transparent, so a coloured footer doesn't show very well.)
Changing the actual Graphics
The first thing you need to do is to create the path to the footer graphics for your skin, so inside the skin_name folder for your skin create a graphics folder, inside that an interface folder and inside that a footer folder, assuming they don't exist already, so for example if you are using the base2011 skin your path should look like this:
\base2011\graphics\interface
Now we need to create the graphics to go inside this folder, in this example we are just going to create a simple solid colour image.
In you Image Editing program create a new image and give it a width of 1 pixel and a height of 25 pixels, you then need to make this entire area red - this is because the game assumes anything that needs recolouring by code is red and by making your graphic red you get the correct colours when it is recoloured by the game.
Now you need to save the file as a png file - if you are using Paint.net you don't need to change any other settings when saving, in other programs you need to ensure the png file has transparency enabled and is at least a 24-bit image.
When saving the file call it bar, and then create two copies so you have three images in the footer folder, you now need to rename them so you have a file called bar_left, one called bar_middle and one called bar_right.
Now load the game up and the footer should now change colour to match the titlebar. (if you have the skin cache on you'll need to turn it off and refresh your skin to see the changes).
Changing the Breadcrumbs Text Colour
The final step is to recolour the text that is located within the breadcrumbs within the footer.
You need to open the breadcrumbs.xml file and locate this line:
<widget class="text_button" id="bcil" auto_size="horizontal" spec="text" size="7" colour="footer"/>
And replace it with this code:
<widget class="text_button" id="bcil" auto_size="horizontal" spec="text" size="7">
<attachment class="get_global_attachment" get_property="ttcl" set_property="colr"/>
</widget>
This will set the footer text to the second/text colour for the page you are on. (For example for Norwich City the text will appear Green).
Now when you load the game our screen should now look like this:
Advanced Changes
If you want to add an extra image to the footer (say a trim or shadow) all you need to do is to duplicate the coding from the first part of the guide:
<!-- coloured bar image -->
<widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="68">
<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>
<!-- set the colour of the image to the team background colour -->
<attachment class="get_global_attachment" get_property="tbcl" set_property="colr"/>
</widget>
First you need to change the file that you are refering to - you can this in two ways;
- Create a subfolder within the footer folder and create three new bar images for example create a trim folder and create the images bar_left, bar_middle and bar_right in that location, so for this example the file reference above would be changed to read: file="interface/footer/trim/bar"
- Create new graphics within the footer folder, for example create three graphics called overlay_left, overlay_middle and overlay_right in the footer folder, so for this example the file reference would now read: file="interface/footer/overlay"
When making more than one image you need to add some transparency to the top images to see what is below them, so when creating graphics you again create three 1x25 pixel graphics but instead of making the entire image solid you may for example for a trim give the top two pixels of the image a solid colour and leave the rest transparent, whereas if you are creating a shadow image to overlay the footer you'd give the image a level of transparency.
With the image(s) created you now need to tell the game which graphic sits on top of the other, in the xml files the coding that is at the top of the file sits underneath the coding below so for example if your coding looked like this:
<!-- coloured bar image -->
<widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="68">
<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>
<!-- set the colour of the image to the team background colour -->
<attachment class="get_global_attachment" get_property="tbcl" set_property="colr"/>
</widget>
<!-- coloured overlay image -->
<widget class="picture" id="pict" file="interface/footer/overlay" height="25" rthr="68">
<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>
<!-- set the colour of the image to the team background colour -->
<attachment class="get_global_attachment" get_property="ttcl" set_property="colr"/>
</widget>
The overlay image would sit on top of the footer bar graphic as it's code appears further down the file.
Finally if you want the second image to take on the text colour instead of the background colour you need to change the code for the get_property flag, where again:
tbcl - tells it to use the clubs main colour - the colour that appears on the titlebar background (for example for Norwich City this is Yellow).
ttcl - tells it to use the clubs second colour - the colour that the text in the titlebar appears (for example for Norwich City this is Green).
So in the above example the main footer graphic is called bar (bar_left, bar_middle and bar_right) is located in the footer folder and is given the background colour, whereas the overlay image is an graphic called overlay (overlay_left, overlay_middle and overlay_right) also located in the footer folder but this is given the text colour and sits on top of the footer graphic, so in the game this looks like this: