[Guide] How to Recolour the Footer

How to Recolour the Footer.

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:

And replace them with this code:

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\footer

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:

And replace it with this code:

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:

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:

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:

Redistribution Terms:

You are free to do what you want with this guide providing you meet the follow terms:

1. It is not to be sold.

2. My name and web address stay attached to it and I am credited as the author.

3. It is not to be advertised as being exclusive to your site.

Fantastic guide, simple & easy to follow.

I'm sure it will come in very helpful for people who are not exactly sure what they need to do.

Great work. Are you thinking about the next guides? What about next guides?

Fantastic guide but...I cant seem to find any of these files (footer.xml) within my Steam Installation of FM2011. Can anyone help?

Fantastic guide but...I cant seem to find any of these files (footer.xml) within my Steam Installation of FM2011. Can anyone help?

You can either download the Base Skins from the Stickied Thread which include the footer files, or else you'll need to extract the skins.fmf file found inside the data folder of where FM2011 was installed. (For Steam this will be somewhere within your Steam Folder).

i cant seem to get the footer to change. i have tried everything. i have no problem changing the text but the footer stays the default colour.

i'm on a mac using text edit if that helps.

appreciate any advice

i cant seem to get the footer to change. i have tried everything. i have no problem changing the text but the footer stays the default colour.

i'm on a mac using text edit if that helps.

appreciate any advice

Same here...

make sure you're putting in the rthr="68" bit in the opening tags for the footer widget. Without it you'll get nothing.

make sure you're putting in the rthr="68" bit in the opening tags for the footer widget. Without it you'll get nothing.

i have copy & paste and typed it in verbatum but still nothing.

make sure you're putting in the rthr="68" bit in the opening tags for the footer widget. Without it you'll get nothing.

is this what you mean?

<panel title="footer" height="25" rthr="68">

if so it still didnt work

I meant within the <widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="68"> line.

Is the footer showing up but just not recolouring or is it not showing up at all?

I meant within the <widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="68"> line.

i have exactly that line above

Is the footer showing up but just not recolouring or is it not showing up at all?

its just not recolouring.

thi is what i have

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE panel SYSTEM "http://www.sigames.com/dtds/sios/panel.dtd">

<panel title="footer" height="25">

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

<!-- active area -->

<container>

<layout class="arrange_vertical_attachment" alignment="fill" offset="0" gap="0" layout="-1"/>

<layout class="stick_to_sides_attachment" alignment="horizontal" inset="0" layout_children="true" />

<layout class="stick_to_sides_attachment" alignment="all" inset="0" />

<container>

<layout class="stick_to_sides_attachment" alignment="all" inset="0" layout_children="true" />

<!-- Breadcrumbs -->

<container id="crum">

<layout class="arrange_horizontal_attachment" alignment="left" offset="10"/>

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" layout_children="true"/>

<attachment class="line_up_attachment" get_property="bcmb" submenu_type="bcrm"/>

<!-- Arrange the children widgets from left to right, horizontally centrered -->

<layout class="arrange_horizontal_attachment" alignment="left"/>

</container>

<!-- Battery -->

<container>

<layout class="arrange_horizontal_attachment" alignment="right" offset="0" gap="4"/>

<!--battery power indicator-->

<container width="27" height="21">

<layout class="centre_in_parent_attachment" alignment="all" inset="0" layout_children="true" priority="1" />

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" />

<widget class="battery_power_indicator" width="16" height="16">

</widget>

</container>

</container>

</container>

</container>

</panel>

Now wroking! But how do i get it so the footer just stays black (or ideally the same colour as the titlebar in the default dark skin) and not change to match the team backgrounds i click on? What value do i need to enter for this?

Have you created the new graphics and put them into the graphics/interface/footer folder for your skin (or whatever file location you have put in the footer.xml file). It's working fine for me so you must be missing out a step.

i did exactly the same but it still wont work.

Have you created the new graphics and put them into the graphics/interface/footer folder for your skin (or whatever file location you have put in the footer.xml file). It's working fine for me so you must be missing out a step.

I just want the footer to be black, that's all. Do i still need to have black graphics in graphics/interface/footer for this?

Edit, yes i do. Fixed it!

Yes because the default images are transparent - You just need to create the three bar images in black (bar_left etc...) and uncomment out the code you don't need to add the recolouring bits.

does it matter that i have an esellerate game and that it isnt activated yet

It shouldn't make a difference, you just need to ensure you have followed the guide correctly and ensured that you have uncommented out the footer code (and added the recolouring bits if you want it to match the team colours, if you want it a plain colour you just need to uncomment out the code) and created some new footer graphics.

Then when you load the game make sure you have selected the correct skin and have turned the skin cache off and reloaded your skin.

does this look right?

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE panel SYSTEM "http://www.sigames.com/dtds/sios/panel.dtd">

<panel title="footer" height="25">

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

<!-- active area -->

<container>

<layout class="arrange_vertical_attachment" alignment="fill" offset="0" gap="0" layout="-1"/>

<layout class="stick_to_sides_attachment" alignment="horizontal" inset="0" layout_children="true" />

<layout class="stick_to_sides_attachment" alignment="all" inset="0" />

<container>

<layout class="stick_to_sides_attachment" alignment="all" inset="0" layout_children="true" />

<!-- Breadcrumbs -->

<container id="crum">

<layout class="arrange_horizontal_attachment" alignment="left" offset="10"/>

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" layout_children="true"/>

<attachment class="line_up_attachment" get_property="bcmb" submenu_type="bcrm"/>

<!-- Arrange the children widgets from left to right, horizontally centrered -->

<layout class="arrange_horizontal_attachment" alignment="left"/>

</container>

<!-- Battery -->

<container>

<layout class="arrange_horizontal_attachment" alignment="right" offset="0" gap="4"/>

<!--battery power indicator-->

<container width="27" height="21">

<layout class="centre_in_parent_attachment" alignment="all" inset="0" layout_children="true" priority="1" />

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" />

<widget class="battery_power_indicator" width="16" height="16">

</widget>

</container>

</container>

</container>

</container>

</panel>

I just want the footer to be black, that's all. Do i still need to have black graphics in graphics/interface/footer for this?

Edit, yes i do. Fixed it!

dave would you mind posting the xml file you used to colour the footer. thanks

dave would you mind posting the xml file you used to colour the footer. thanks

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE panel SYSTEM "http://www.sigames.com/dtds/sios/panel.dtd">

<panel title="footer" height="23">

<!-- coloured bar image -->

<widget class="picture" id="pict" file="interface/footer/bar" height="25" rthr="50">

<layout class="stick_to_sides_attachment" alignment="all" inset="0"/>

</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="tbcl" set_property="colr"/>

</widget>

<!-- active area -->

<container>

<layout class="arrange_vertical_attachment" alignment="fill" offset="0" gap="0" layout="-1"/>

<layout class="stick_to_sides_attachment" alignment="horizontal" inset="0" layout_children="true" />

<layout class="stick_to_sides_attachment" alignment="all" inset="0" />

<container>

<layout class="stick_to_sides_attachment" alignment="all" inset="0" layout_children="true" />

<!-- Breadcrumbs -->

<container id="crum">

<layout class="arrange_horizontal_attachment" alignment="left" offset="10"/>

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" layout_children="true"/>

<attachment class="line_up_attachment" get_property="bcmb" submenu_type="bcrm"/>

<!-- Arrange the children widgets from left to right, horizontally centrered -->

<layout class="arrange_horizontal_attachment" alignment="left"/>

</container>

<!-- Battery -->

<container>

<layout class="arrange_horizontal_attachment" alignment="right" offset="0" gap="4"/>

<!--battery power indicator-->

<container width="27" height="21">

<layout class="centre_in_parent_attachment" alignment="all" inset="0" layout_children="true" priority="1" />

<layout class="stick_to_sides_attachment" alignment="bottom" inset="0" />

<widget class="battery_power_indicator" width="16" height="16">

</widget>

</container>

</container>

<container>

<layout class="arrange_horizontal_attachment" alignment="right" offset="10" gap="5"/>

<layout class="stick_to_sides_attachment" alignment="vertical" inset="0" layout_children="true"/>

<!-- Game Date -->

<widget class="date_cell" id="date" text="date" font="fonts/verabd" auto_size="all" size="8" colour="text" >

<attachment class="get_global_attachment" get_property="date" set_property="valu"/>

<attachment class="test_global_attachment" get_property="cont" value="-8" set_property="hidn" skip_if_null="false" skip_if_resetting="false" priority="1"/>

<layout class="stick_to_sides_attachment" alignment="bottom" inset="3" />

<string id="format">

[%date#1-long] [%date#1-time] [COMMENT: date_format for metallic2007 FM skin]

</string>

<event id="click_event">

<flags id="event_id" value="GCCA" />

<flags id="event_target" value="scrn" />

</event>

</widget>

</container>

</container>

</container>

</panel>

***As mentioned in earlier posts you must have the graphics for the three bar images (bar_left, bar_middle and bar_right) in graphics/interface/footer for it to display because the default images are transparent

i have set the colour of the image to the background colour.

Can i change the white colour in inbox and home pages and pick an other colour?