Football Manager 2009 Skinning Guide Part Three: Editing the Header

If you haven’t already I suggest you read the first two parts of this guide. This part of the guide will assume you have downloaded and installed the graphics and xml software that you want to use and have followed the first two parts of the guide (have extracted the fmf files and have created the blank Test skin).

Again I will be referring to this skin as test or Test Skin.

This part of the guide will be concerned with the editing of the header – there is plenty that can be done to the header, the limits being your time, ability and patience.

If this is your first attempt at skinning I suggest you take your time and try to keep it simple, just make small changes, learn to recognize the coding and also save often and keep multiple saves, so if you mess up you can just delete the file and go back, rather than having to start again.

The first thing we need to do is to copy the files we need into the folder for your skin, so open the location you extracted the fmf files to and browse to here:

\skins\fm2008\panels

Within the panels folder copy the following files:

config.xml

global panels.xml

header.xml

menubar.xml

titlebar.xml

You will also need to get the footer quicklinks.xml file from the \panels folder.

Copy these files to the panels folder for your skin:

Documents\Sports Interactive\Football Manager 2009\skins\test\panels

Next we want to copy the header graphics to our Test Skin, so again browse to where you extracted the fmf files and locate this folder:

\skins\fm2008-widgets\graphics\interface

Now copy the interface folder and all its contents to the graphics folder for your skin. So you should now have the following folders within the folders for your skin:

Documents\Sports Interactive\Football Manager 2009\skins\test\graphics\interface

As you’ll notice the location you copy the files to within your skin is always the same as the location you copied them from.

Now before we start playing around with your skin we just need to edit the global panels.xml file to make skinning quicker.

Now open the global panels.xml file with Notepad++ (or your preferred program) and scroll down to the bottom on the last line (#106) you’ll notice the code:

</panel>

Now select the line above this and past the below code into the file:

<container class="titled_box" title="Skinner Panel V1.1" width="160" height="50" appearance="boxes/hints" colour="black" size="8" alignment="centre">

<layout class="stick_to_sides_attachment" alignment="bottom, right" inset="100"/>

<attachment class="moveable_attachment"/>

<widget class="action_button" text="Reload Skin" auto_size="vertical" appearance="button/button" width="148">

<attachment class="test_global_attachment" get_property="scid" value="23" mode="0" set_property="hidn" skip_if_null="false" skip_if_resetting="false" priority="1"/>

<event id="click_event" event_id="sPRF" event_target="scrn"/>

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

<layout class="centre_in_parent_attachment" alignment="horizontal" offset="0"/>

</widget>

<widget class="action_button" text="Confirm" auto_size="vertical" appearance="button/button" width="148">

<attachment class="test_global_attachment" get_property="scid" value="23" mode="1" set_property="hidn" skip_if_null="false" skip_if_resetting="false" priority="1"/>

<event id="click_event" event_id="conf" event_target="scrn"/>

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

<layout class="centre_in_parent_attachment" alignment="horizontal" offset="0"/>

</widget>

</container>

This is radestock’s Skinning Panel that allows you to refresh the skin with the click of one button without having to go into the preferences screen each time.

Now save the file, load FM09 and select your skin, also make sure you have the skin cache turned off and always reload skin on.

You’ll now notice that a small moveable gray box has appeared in the bottom right hand corner of your skin, now when you make any xml or graphical changes you just need to click that button twice to refresh the skin without having to go into the preferences screen.

One thing you need to remember to do is to delete or comment out that code when you have finished making the skin.

Now onto the skinning, first I’ll explain what the xml files control:

header.xml – tells the game to display the contents of the titlebar.xml and menubar.xml files (it also tells it to display the match titlebar.xml screen on the match screen rather than the titlebar.xml file) it is also used to position that white menubar graphic in the middle of the header.

menubar.xml – displays the icons that appear on the white menubar – continue button, world icon etc... It also calls the footer quicklinks.xml file.

footer quicklinks.xml – This displays the quicklink buttons, home news etc...

titlebar.xml – controls the rest of the header content – team name, logos, searchbar your name etc...

Graphic Locations

From this image:

These files have all been already copied into your skin folder:

Red Titlebar - \skins\test\graphics\interface\titlebar

Titlebar Overlay - \skins\test\graphics\interface\titlebar\overlay

White Trim - \skins\test\graphics\interface\titlebar\outline

White Menubar - \skins\test\graphics\interface\menubar

Black Menubar - \skins\test\graphics\interface\titlebar\background

Searchbox - \skins\test\graphics\interface\searchbox

Line between the back, next, manager buttons - \skins\test\graphics\interface\line.png

These files are located within the files you extracted, you only need to move them to your skins folder if you wish to edit them:

Quick Links (Home, News etc) - \skins\fm2008\graphics\icons\quick links

Continue Button - \skins\fm2008-widgets\graphics\button\custom\continue

Back Button - \skins\fm2008-widgets\graphics\button\custom\back

Next Button - \skins\fm2008-widgets\graphics\button\custom\next

Manager Button - \skins\fm2008-widgets\graphics\menu\manager

World Button - \skins\fm2008-widgets\graphics\menu\world

Bookmarks Button - \skins\fm2008-widgets\graphics\menu\bookmarks

Options Button - \skins\fm2008-widgets\graphics\menu\options

Quick Flicks - \skins\fm2008-widgets\graphics\button\custom\quickflicks

You’ll notice that the graphics are named and made differently depending on what they are so for the titlebar you’ll notice it is made from three files: bar_left, bar_middle and bar_right.

Basically as the titlebar needs to stretch horizontally to match your resolution it is made from three files:

bar_left controls how the left side of the titlebar looks.

bar_right controls how the right side of the titlebar looks.

bar_middle controls how the rest of the titlebar looks.

With the default files the bar_left and right files take up 20 pixels each, leaving the middle file to be replicated until it fills the screen.

So if you are going to make a fancy shaped header you need to make the shape out of the left and right files – you can make these files as wide as you want, just remember your shape has to fit a screen width of 1024, whilst also fitting in at high resolutions.

The same principle works for the rest of the graphics that just need to stretch horizontally.

Next we’ll have a look at the continue button, now before editing the continue button copy the folder for the continue button to the Test Skins folder (you may need to create the button and custom folders if they don’t already exist).

You’ll notice the continue button is made from 15 graphics and two xml files, as the continue button is interactive it has a different appearance depending on what you are doing with it:

button – is the default state

button_clicked – appears when you click on the continue button

button_disabled – appears when the button is disabled

button_navigated – doesn’t appear to be used.

button_over – appears when you hover the mouse over the button.

You’ll also notice that each state is also made from three files as the titlebar: _left, _middle and _right – as you can see the left file gives the button its rounded shape, whilst the right file is the pointed arrow bit, with the middle just a plain rectangle.

The xml files just tell the game where inside the graphic to display any text.

Now you should be able to change any of the graphics that appear in the header, next I’ll explain how you change the positions of the graphics/text in the header.

The file that you will be playing around with is the titlebar.xml file – I’ll explain the basics to get you going, the best way to learn is to look through the files yourself and see what editing certain things does, you can also look at the other xml files to see how content is displayed their as most of the coding is transferable, also look at other skins to see how the skinner did certain things.

When you open the titlebar.xml file you’ll notice most of the code is commented to explain what it does.

The first thing you need to do is ensure you close all of the tags so the game doesn’t crash, the two ways to close tags are shown in the first few lines:

<widget class="picture" id="pict" file="interface/bar" auto_size="vertical" cached="true">

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

</widget>

Now the first line opens the widget tag whilst the third line closes the widget tag. On the second line the layout tag is opened and closed in one line.

So <widget> is an open tag closed by </widget> so when you have a <somecode> it needs to eventually be closed by </somecode> the amount of <somecode> needs to equal </somecode> otherwise the game will give you an xml warning on start up.

Not the layout line closed itself: <somecode/> close themselves.

What the above example does is display the graphic bar located in the interface folder and attaches it to the bottom of the header container.

Another thing to note is that content at the top of the xml files appears as the bottom layer in the game, so take for example the coding on line #18 that tells the game to display the red titlebar image, line #33 then tells the game to display the right background logo, as you’ll notice from in game the background logo appears on top of the red titlebar, if this coding was the other way around you wouldn’t be able to see the logo as it would be underneath the titlebar.

Another thing you may want to know is how to get the game to recolour graphics or text to match the team colours.

This is done by adding the following code within the widget tag for the content you want to recolour:

<attachment class="get_global_attachment" get_property="bkcl" set_property="colr"/>

<attachment class="get_global_attachment" get_property="fcol" set_property="colr"/>

<attachment class="get_global_attachment" get_property="ocol" set_property="colr"/>

bkcl – sets the colour to the teams background/shirt colour (red for FC Utd)

fcol – sets the colour to the teams foreground/text colour (white for FC Utd).

ocol – sets the colour to the teams trim colour. (though with the trim match either of the other two colours most of the time it isn’t that useful).

If you are recolouring a graphic you also need to add: rthr="68" to the end of the line that calls the graphic – you can change the number to adjust the intensity of the colour, a lower number makes the graphic lighter, a higher number makes it darker.

For example to make the black menubar take on the foreground colour you adjust the following code on line #11:

<widget class="picture" id="pict" file="interface/titlebar/background/bar" auto_size="vertical" cached="true">

to read:

<widget class="picture" id="pict" file="interface/titlebar/background/bar" auto_size="vertical" cached="true" rthr="68">

Then below that add in the line:

<attachment class="get_global_attachment" get_property="fcol" set_property="colr"/>

So lines #11 and #12 now look like:

<widget class="picture" id="pict" file="interface/titlebar/background/bar" auto_size="vertical" cached="true" rthr="68">

<attachment class="get_global_attachment" get_property="fcol" set_property="colr"/>

If you now save the file and reload the skin you’ll notice the menubar has changed colour.

You’ll notice that it doesn’t look very good, if you are having the game recolouring graphics your best off making the graphic solid red, green or blue.

Another thing you can do is create extra graphics, so say you want the left corner of the titlebar to be recoloured to the foreground colour you can do this through creating a new graphic and some coding.

First we need to create the graphics so browse to:

\skins\test\graphics\interface\titlebar

Create a new folder and for this example we’ll call it cover, now copy the three bar graphics from the titlebar folder into the cover folder.

Now you just need to edit the files into the shape you want, for this example we are going to leave the _left and _right files alone and edit the _middle file so it is transparent – this will set the corners of the titlebar to the foreground colour and leave the middle as the background colour.

Now we need to do some coding, open the titlebar.xml file, for this example we just want the cover layer to sit on top of the red titlebar layer, leaving all the logos and text on top of them.

What you need to do is copy the existing code for the titlebar image (lines #19 to #27):

<widget class="picture" id="pict" file="interface/titlebar/bar" auto_size="vertical" cached="true" rthr="68">

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

<attachment class="get_global_attachment" get_property="bkcl" set_property="colr"/>

</widget>

Now we just need to make two changes to this file, on the widget class line we need to change the file to point to the graphic you have just created (interface/titlebar/cover/bar for this example) we also need to change the attachment class line to get the game to set the new layer s colour to the foreground colour (we change bkcl to fcol):

<widget class="picture" id="pict" file="interface/titlebar/cover/bar" auto_size="vertical" cached="true" rthr="68">

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

<attachment class="get_global_attachment" get_property="fcol" set_property="colr"/>

</widget>

So if you now save the file and reload the skin you’ll notice the corners of the titlebar have changed colour.

You can use the same tricks to modify the outline and overlay graphics aswell.

Now that you have modified the appearance of the graphics you may want to know how to move the content of the titlebar around.

The best way to find out how to move stuff around is through trial and error or by looking at how content is displayed elsewhere in the game or in other skins (once you have spent hours looking through the various xml files you should start to understand or be able to guess what the various codes do and what works and what doesn’t).

Each item is normally controlled by a couple of tags:

<container> - just acts as a container to hold various content, it’s also useful sometimes to set up blank/dummy containers to make blank space.

<widget> - these are used to call various components to the screen, graphics, text etc they quite often have a vague id with them, this tells the game what to display if something specific and as you’ll find some of these are hardcoded to only appear in certain places.

<layout> - tells the game where and how to display the content, unfortunately trial and error is the best way of finding out exactly how they work in a given situation.

<attachment> - will set some property to the item, i.e. the re-colouring command.

The titlebar image code from above is a good example:

<widget class="picture" id="pict" file="interface/titlebar/bar" auto_size="vertical" cached="true" rthr="68">

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

<attachment class="get_global_attachment" get_property="bkcl" set_property="colr"/>

</widget>

The widget tag tells the game to display the graphic bar from the interface/titlebar folder, the layout tag tells the game to stick it to the bottom of the header, whilst the attachment class tells the game to recolour it.

You’ll notice that the layout and attachment tags are within the widget tag.

An example of how the container tag works along with the other tags can be shown by the main logos container (lines #82 to #139 or the ones commented by the two  comments):

<container height="100">

<layout class="arrange_horizontal_attachment" layout="170,-1,170" alignment="centre" offset="0" gap="0" />

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

<container height="100">

<layout class="fit_children_attachment" alignment="vertical,extend" offset="0" />

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

<layout class="centre_in_parent_attachment" alignment="horizontal" offset="0" layout_children="true"/>

<widget class="picture" id="rgtF" scale_picture="true" keep_aspect_ratio="true" height="90" width="90" image_alignment="centre" >

<layout class="centre_in_parent_attachment" alignment="vertical" offset="-2"/>

<attachment class="get_global_attachment" get_property="mnpc" set_property="file" skip_if_null="false"/>

<attachment class="get_global_attachment" get_property="mprc" set_property="srec" skip_if_null="false"/>

<attachment class="get_global_attachment" get_property="bkcl" set_property="rrep"/>

<attachment class="get_global_attachment" get_property="fcol" set_property="grep"/>

<attachment class="get_global_attachment" get_property="ocol" set_property="brep"/>

</widget>

</container>

<container>

</container>

<container height="100">

<layout class="fit_children_attachment" alignment="vertical,extend" offset="0" />

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

<layout class="centre_in_parent_attachment" alignment="horizontal" offset="0" layout_children="true"/>

<widget class="picture" id="lftF" scale_picture="true" keep_aspect_ratio="true" height="90" width="90" image_alignment="centre">

<layout class="centre_in_parent_attachment" alignment="vertical" offset="-2"/>

<attachment class="get_global_attachment" get_property="scpc" set_property="file" skip_if_null="false"/>

<attachment class="get_global_attachment" get_property="sprc" set_property="srec" skip_if_null="false"/>

<attachment class="get_global_attachment" get_property="bkcl" set_property="rrep"/>

<attachment class="get_global_attachment" get_property="fcol" set_property="grep"/>

<attachment class="get_global_attachment" get_property="ocol" set_property="brep"/>

</widget>

</container>

So the first container tells the game to display three items (containers in this case) horizontally aligned centrally. The layout="170,-1,170" code tells the game that you want the left and right containers to take up 170 pixels each, whilst the -1 tells the game to make the middle container fill the rest of the space.

The next set of code creates the left side container, the layout tells the game to centre whatever is going to be displayed in the middle of the container.

Next the widget tag tells the game to display a logo, you’ll also notice that the coding tells the game to resize the picture to certain dimensions, you can change these values to resize the logos (especially handy if you change the height of the titlebar).

The attachment lines tell the game which logo to display and to recolour it if the default logo is displayed.

Finally the widget and that container are closed.

Next you have the dummy container, that is blank and just used to ensure that the logos appear in the corners.

Next you have the container for the right sided logo, with similar coding to the left logo, that container is then closed, and then the main container is closed.

Another useful example of coding is the coding used to display your name and your team name (the white text to the left of the screen)

This coding is located within the  container, (line #178 to #192):

<container width="170">

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

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

<layout class="stick_to_sides_attachment" alignment="left" inset="4"/>

<widget class="text" id="pers" text="" standard_spec="text,small" colour="white" alignment="left" auto_size="vertical" multiline="false">

<attachment class="get_global_attachment" get_property="user" set_property="text"/>

</widget>

<widget class="text" id="team" text="" standard_spec="text,small" colour="white" alignment="left" auto_size="vertical" multiline="false">

<attachment class="get_global_attachment" get_property="Tnam" set_property="text"/>

</widget>

</container>

The first layout line (arrange_vert...) tells the game to stack them vertically rather than horizontally, the next two lines tell the game where to display the items (you’ll notice further down the file the searchbox is displayed using similar code, but stuck to the right of the screen rather than the left).

Next up are the widget lines, these ones tell the game to display some text and how to display it:

text="" – this allows you to print some text to the screen, so if you type some text between the " it will be printed to the screen (not in this case as the attachment line below tells the game what to display)

standard_spec="text,small" – tells the game what text style/font/size to use, if you remember in the skin_name.xml file you copied in various font information, text,small tells the game to display this text in the text style declared and to use the small size, if you change that to title,large you’ll notice the font, size and style all change to match the title font.

colour="white" – tells the game what colour to display your text in, you can type in any colours that you have declared in the 'fm colours.xml' or 'colours.xml' files located within the settings folder.

If you look further down the file at the  bit you’ll notice that you can also declare the font style individually rather than using a standard_spec, for example the default title font style is set as:

<widget class="text" id="sect" alignment="centre_x,top" size="20" style="shadowed" font="fonts/verabd" multiline="false" auto_size="vertical">

size sets the font size, style allows you to change the style (there was a list of valid styles around I’ll see if I can find it) and font lets you change the font (as long as the font is located inside the games or your skins font folder).

You can also set the text to take on the team colours by adding the following line before the close tag </widget>:

<attachment class="get_global_attachment" get_property="ttcl" set_property="colr"/>

The ttcl code tells the game to use the clubs foreground colour, but to change the colour if it clashes with the background colour. You can change this to fcol or bkcl as for the graphics.

That should now allow you to edit the titlebar.

If you which to edit the match screen titlebar you'll need to edit the 'match title bar.xml' file. It's largely the same process. (And will be covered under another part of the guide).

If you like my work then feel free to send me a donation through paypal. Note this is completely optional all of my content will always be free.

Redistribution Terms

1. They are not sold or behind a paywall.

2. You don't advertise them 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.