This is just a basic skinning guide to help introduce new people to skinning, and will just cover some basic information to get you started. If you already know how to skin then sorry this isn’t for you. You can also download this guide in MS Word Format or as a PDF file, for offline reading.
Before you start you will need a few things:
The first thing you need to do is to extract the files from the .fmf archives. So browse to where you installed the game (C:\Program Files\Sports Interactive\Football Manager 2008 by default), open the data folder and you should see 16 files with the .fmf extension – select them all and copy them. If you have applied a patch, you may find some more fmf files in C:\Program Files\Sports Interactive\Football Manager 2008\data\updates\update-802\data – you may want to copy these aswell.
Now paste these 16 files into somewhere that is easy to find (put them in a folder within your My Documents Folder, or in a folder in the root of a drive).
MAKE SURE THE LOCATION YOU PICK IS NOT INSIDE ANY FOLDER USED BY FM!
Once you have done that use the Resource Tool to extract the fmf archives, you can just extract them into the folder you copied the fmf files to. (I’d extract the files from the updates folder into an updates folder, rather than overwrite the unpatched files – after you have extracted all the files, you may want to see what changes have been made and overwrite the unpatched extracted files.)
Once you have extracted all the archives, you should have 16 folders with the same name as the fmf files, with various folders, xml files and png graphics inside. You can now delete the copies of the fmf files you made. (you can also delete the licensed faces, kits and logos if you don’t need them to save space).
You should now have no need to touch anything else within your install directory for FM – everything you need for skinning is within these 16 folders. (unless you later install a new patch, that may include updated fmf files).
Now to start skinning, go into the skins folder and copy the fm2008 folder and the config.xml file (you can also copy the fm2008_r folder if you plan on making a rightsided skin – I’ll come to the specifics of that later).
Now goto your User Data folder (My Documents\Sports Interactive\Football Manager 2008 by default) and open the skins folder (if you don’t have one create a new folder called skins), now paste the fm2008 folder and config.xml file you copied into this folder (if there is already a config file in the skins folder, there is no reason to overwrite it).
Well done you have now created your first skin, albeit identical to the default skin.
Now the first thing to do with your new skin is to give it a different name, so you can tell it apart from the default skin – when picking a new name use a shortname using lowercase alphanumeric characters (a-z, 0-9) you can also use – and _ avoid using CAPS, spaces and non-standard English characters (such as ã, or ø).
Once you have thought of a name rename the fm2008 folder with your new name (if you don’t have a name call it something like myskin08 – you can always rename it later).
When you open the folder you’ll notice there is a file called fm2008.xml – now you need to rename this to match the folder name (in my example you’d rename it myskin08.xml).
Now open the newly renamed xml file in your favourite text editor (you may need to right click and select open with... then browse to your program if the xml file opens in a web browser, as you cannot edit it in a web browser).
The first thing to point out when you open the file is you’ll notice several bits of code surrounded by <!-- --> anything contained within these brackets will not be read by the game, and act as comments explaining various things. (if you are using Notepad++ comments are shown in green text by default).
Next near the top of the file you’ll notice the following section of code:
<!-- skin details -->
<string id="name" value="FM 2008[COMMENT: skin for FM 2008]"/> <!-- The name of the skin -->
<string id="author" value="Sports Interactive"/> <!-- The author name -->
<string id="description" value="Default Skin"/> <!-- Short description -->
<string id="version" value="1.0"/> <!-- The version number -->
This is basically the information that appears on the preferences screen in game when you come to select a different skin. On the name line change FM 2008 to what you want your skin to be called – this doesn’t have to be the same as the folder or the xml file. Replace Sports Interactive with your name/username/nickname and replace Default Skin with a short description about your skin, you can also change the version number when you release later versions. I’ll come back to the rest of the code in this file later. Now just save and close the file.
Go back to the myskin08 folder (or whatever you called the skin – I’ll refer to this folder as myskin08 from now on), you’ll notice in addition to the xml file there is a panels folder, if you open this folder you’ll notice several xml files – these control the basic layout of your skin:
Footer.xml - Controls the info that appears at the bottom of the screen.
Header.xml, menubar.xml and titlebar.xml – control what appears in the header, titlerbar.xml controls the team name, logos etc…, whilst menubar controls the menu options and the position of the quicklinks bar.
Sections.xml - Controls the sidebar menu.
Global panels.xml - Controls where the header, footer and sidebar appear on the screen.
Now the first bit of actual skinning I suggest you do is to copy Radestock’s Skinning Panel into your Global panels.xml file – makes skinning a lot quicker and also is a life saver when you mess up the sidebar.
Skinning in FM is made from two parts – xml files and png graphics. The game also has a priority over what comes first – first the game will read the files from your skins folder (myskin08 in this case), if it doesn’t find certain files there, it will then read them from your User Data folder (the My Documents folder), if nothing is found there it will then read the default files from the fmf files in the Program Files folder.
This saves you from having to add every graphic file to your skin – you only need to include stuff you have edited. (Apart from those xml files that were already in the panels folder)
This brings us back to the files you extracted first of all. First you have to make sure you do not actually change any of the files in these folders, otherwise you’ll have to extract them again – if you want to edit one of the files copy it to your myskin08 folder, keeping the same file structure – so say you wanted to edit the calendar.xml file from the panels folder, you’d copy the calendar.xml file from the panels folder within the folder you extracted the files to to myskin08/panels, and say you wanted to edit the footer graphic, you’d copy the graphics from /graphics/interface/footer to myskin08/graphics/interface/footer. This means if you mess up or change your mind you can just delete the files from the myskin08 folder, and the game will go back to using the default files.
Editing the xml files
If you have no experience of programming or webpage editing (html), the first thing I’d advise you to do is to open the xml files and scan through them, so you become familiar with the general code and layout.
Now the best way to learn how to skin is through trial and error, I’d recommend after having scanned through the files, to spend a couple of hours changing small things in the files to see what stuff does.
It’s best to have the game running whilst doing this – load up the game, select your skin, I’d advise against playing a proper save as you may need to exit without saving. Now open one of the xml files make a small change, save the file, in the game if you are using Radestock’s panel click it twice to reload the skin (if not you’ll have to go to the preferences menu, turn off the skin cache, click always reload skin and click ok). I’d also suggest you make a note of what your change did/affected – either as a comment in the file, or notes on paper/other file.
The xml files in the panels and screens folders control the layout of various screens – the file names of most let you know what they edit, also in some files you’ll find commented lines that explain what screen they effect, whilst other files will have a line of code that tells the game the title of the page.
Editing the Graphics
All the graphics for the skins are contained within the graphics folder, if you want to edit them for your skin copy them over from the graphics folder where you extracted the fmf files, and paste them into your skins folder (myskin08/graphics – you’ll need to create the graphics folder) – you also need to make sure they keep the same folder structure when you copy them into the myskin08/graphics folder.
The easiest way to edit the files is to copy over one folder at a time, then open the png file from your myskin08 folder with your graphics program, edit the file and resave it.
The graphics are made up in a couple of different ways – graphics that don’t need to scale with different resolutions are made from one file (the weather icons, quicklink icons).
Graphics that have a variable width (titlebar, continue button) are made from three parts: _left, _middle and _right. The middle part is normally just 1 pixel wide, and is uniform so it can be called several times to fill the space needed for the graphic. The _left graphic controls the appearance of the left side of the graphic, whilst the _right file controls the appearance of the right side of the graphic. So if you are making the current continue button (\graphics\button\custom\continue\large) – it’s got a straight left side and middle, with the right side having the arrow and a curve – the game will display the _left and _right graphics once and replicate the _middle one until the button is the desired size.
Other Graphics that need to have a variable width and height (menus, screen content area) are made from nine graphics (graphics\menu\dialog – there are nine box graphics) – you now have a _top_left, _top_middle, top_right and _middle_left, _middle_middle, _middle_right and _bottom_left, _bottom_middle and _bottom_right. These work the same way as the continue button, but this time only the corner graphics are static and the other five will be replicated to fill the space.
You also have different graphics for when you are hovering over the graphic with the mouse, when you have clicked the button or for when the option is disabled.
The best thing you can do to learn where each graphic goes is to recolour the graphic in a bright colour(red) and see what goes red, also most of the xml files will give you the location of the graphic it is calling.
When you are saving files, use the save for web option in Photoshop, selecting PNG-24 file type and enabling transparency. The easiest thing to do is to copy the existing file to the myskin08 folder, open the copy in your graphics program and create your new graphic in that file and save it, that should ensure the new graphic works.
One thing I do recommend against including with your skin is new pitch graphics (player icons, balls, nets) or logos, faces and kits – as the files in the skins folder will have priority over the users other files, and not everyone who uses your skin may want to use the same pitch icons as you.
Conclusion
That concludes the basics of skinning, and should allow you to start skinning, I’ll again reiterate the best way to learn skinning is by trial and error – edit something save, see what it does in game, repeat...
I also recommend keeping notes or commenting your work. Also when you have done a fair bit of editing (or have got part of a file how you want) backup the file, or that bit of code – I know from experience how annoying it is having to delete the file and start again, when you broke something and couldn’t fix it.
Also have a look at xml files for other skins, to see how they have done certain things. If you do get stuck, or need specific help ask in the SIgames Skinning forum (with a descriptive title) and someone who knows may help you (though it may take time – it’s not the most active of forums).