michaeltmurrayuk Posted November 16, 2008 Share Posted November 16, 2008 Welcome to what will over the coming months (hopefully) become a compressive guide to skinning Football Manager. The main point of this thread is to gather up all the useful skinning posts into one locked thread. This thread will contain a copy of the post containing the guide/coding example etc... with a link to the original thread where discussion can take place. Also note that posts will only be added to this thread, after at least a week of being posted – just to allow any mistakes or problems to be ironed out. FM2010 - I'm in the process of updating the guides for FM2010, as well as checking the helpful threads to see if any changes are needed for FM2010. So for the movement the links below will be in two parts; FM2009 links and FM2010 links - the FM2010 links will work for FM2010, the FM2009 ones may or may not but haven't been tested unless otherwise stated. Contents FM2010 Skinning Guide COMING SOON Links to Useful Threads for FM2010: How to Change Font Colour: Club Information Screen Changing the footer bar to match the team colours Various examples for Custom Attribute Colours Changing Tactics Screen to Non Perspective How to re-enable Background changes provided you have patch 10.2 How to get Stadium/Club Background images to show (provided you have done the above fix aswell) FM2010 Skinning Resources/Mods (For Skinners): COMING SOON FM2010 Skinning Resources/Mods (For Endusers and Skinners): [FM2010: TEMPLATE] BASE SKINS (for changing colours adding 2D pitch graphics) Alternative Player Ratings screen (now displays player motivation). [Mod] Custom Split Views Mod for FM2010 ---------------------------------- FM2009 Skinning Guide Skinning Guide Part One: The Basics Skinning Guide Part Two: Changing the Settings (Fonts & Colours) Skinning Guide Part Three: Editing the Header Parts One and Two of the Skinning Guide are now available to download in various formats (.doc, pdf and xps) from here Links to Useful Threads for FM2009: TV View Widgets Changing Transparency of Gray Background Changing Columns on Squad/Tactics View Editing Logo box within the news panel Editing Best/Overall XI screen Editing quicklinks linked screen Adjusting strength of Fore/Background team colours Editing the Match Ratings Screen How to Remove Timebar from match screen How to stop the game from recolouring the titlebar text How to colour code the footer Adding the Preffered Foot into the Tactics screen How to add extra Continue Time-out Options How to Remove Mini-pitch from tactics screen How to edit the Slider Text Colour (That green text at the end of the slider) How to resize the logos on the match overview screen How to change the Match Commentry appearance How to Change Font Colour: Club Information Screen FM2009 Skinning Resources/Mods (For Skinners): radestock's Skinning Panel and Background selecter - The Skinning Panel makes skinning awhole lot quicker, whilst the background selecter lets you allow users to change the background in game. radestock's Skinning Panel v2.0 radestock's Sidebar Widget FM2009 Skinning Resources/Mods (For Skinners and EndUsers): radestock's Numbered Tactical Sliders - adds numbers in addition to the description to the tactical sliders. Surferosa's Opposition Instructions Panel - Modifies the Opposition Instructions Panel to make it easier to use, to modify the files yourself check out this Thread Surferosa's Squad Management Panels - Modifies the views of the Team Squad and Tactics Screen. To Modifiy the default files yourself check out this Thread Larger Match Screen Mod - A Skin/Mod that increases the screen space assigned to the pitch, can be easily applied to most other skins by endusers. Base Skins Template - Blank Template skins for people who only want to change colours, balls, stars etc... Link to post Share on other sites More sharing options...
michaeltmurrayuk Posted November 18, 2008 Author Share Posted November 18, 2008 FM09 Skinning Guide Part One: The Basics This is a simple guide to help people start skinning with Football Manager 2009. Before you start you will need a few things: - A Copy of FM2009 with the latest patch installed, as the latest patch may have updated/changed some of the files you may need. - The Resource Archiver Tool, that was installed with the game. - A Text Editor – Notepad is fine, however I’d recommend a program like Notepad++ or a web editor such as Kompozer – these have colour-coded code and line numbers that make it easier to edit the larger xml files. - Graphics Software – whilst Photoshop is popular it is expensive, free alternatives if you don’t already have a graphics program, are Paint.net (upgraded version of MSPaint), or The GIMP (open source alternative to Photoshop, but not all that user friendly), among others – if you do need to use Photoshop you can download a 30 day trial from adobe’s site. Basically the program needs to be able to handle transparent png files. First you need to extract the fmf archives. This is done by using the Resource Tool that was installed with FM09 and this will be located in: \Football Manager 2009\tools\resource archiver If you have not used the archive tool before I recommend reading the user guide that was installed with it and is located in the above folder. So extract each of the fmf files from the below locations , into an easy to find folder that is not within the install or User Data folder for FM09: \Football Manager 2009\data \Football Manager 2009\data\updates\update-***\data Where *** is the patch number, so far we are on 910, I also recommend when extracting the patch files to overwrite the original unpatched files, as they are more uptodate and saves you using old files that may have errors in them. So now that you have extracted all the fmf files we can start making your first skin. If you look inside the folder that you have extracted the fmf files to, you should see a skins folder. Open this and there will be several sub-folders, these are the default FM09 skins that come with the game. Now what we are going to do to set up your first skin is copy the fm2009 folder and the config.xml file from the skins folder to the skins folder in your User Data folder which is by default: \Documents\Sports Interactive\Football Manager 2009\skins (If you don’t have a skins folder just create a new folder and call it skins). Now the first bit of skinning we are going to do is to rename the fm2009 skin – you can pick your skinname now or just use a placeholder, for this example I will call the skin Test. So first you rename the fm2009 folder test – avoiding spaces, caps and any fancy formatting. Now open the folder called test and you will notice three folders (graphics, panels and settings) and an xml file called fm2009.xml. Now rename the fm2009.xml to test.xml – the name of this xml file needs to match exactly the folder name. Next open the test.xml file in your chosen xml editor. Now what we are interested in is this code: <!-- skin details --> <string id="name" value="FM 2009[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 --> <flags id="parent" value="fm2009-widgets"/> Now the <!-- --> tags denote comments, anything within these tags are not read by the game and act as hints/comments for you. (the text will appear green in Notepad++) Now the first line tells the game what to call your skin in game, so change "FM 2009[COMMENT: skin for FM 2008]" to “Test Skin” The next line is where you put your name/nickname, then you can put in a short description of your skin, so for this skin put This is a Test Skin. Then the final option is a version number, when you release a finished skin it is generally good to start at version 1.0, then go up as you revise, but this isn’t important. Now the last line is new for FM09: <flags id="parent" value="fm2009-widgets"/> What this does is it tells the game where to look next if it cannot find the file it wants in the folders for this skin – so if you have a look in the panels folder for the test skin you’ll notice it’s empty, so the game will then look in the fm2009-widgets folder for the files it needs. If you go back to the skins folder that you extracted, and go into the fm2009-widgets folder, you’ll notice there’s no panels folder in there if you open the fm2009-widgets.xml file, you’ll notice its parent skin is fm2008 so next the game will look for the files in the folders for the fm2008 skin, it will then look in the fm2008-widgets folder and if it still cannot find what it’s looking for it will then look in your User Data folder and then look in the fmf files in the data folder. What this means is if you are not going to edit a file you do not need to include it with your skin, and if you put a file in your User Data folder and the game won’t read it, it means the game is reading the file from one of the skins folders. Now if you want your skin to look like the FM2008 skin, rather than the FM2009 skin you can change that last line to: <flags id="parent" value="fm2008"/> So the game will now never look in the fm2009 or fm2009-widgets folders for any files to do with this skin. When you save the file you have basically created your first skin. Now to get the skin into the game, load the game and go to the Preferences -> Display & Sound Menu, untick ‘Use Skin Cache’ and tick ‘Always Reload Skin on Confirm’ then click confirm, after the current skin has reloaded, go back into the Preferences -> Display & Sound Menu and you should be able to select the Test Skin in the drop down menu. And there you go you have just made your first FM09 skin. Now to edit the appearance of your skin you need to copy the files you want to edit from their location in the extracted folders to the same folder for your skin. So for example if you wanted to change the coding for the foot of your skin, you’d copy the footer.xml file you extracted from the fmf files from *** \skins\fm2008\panels to (where *** the folder you extracted the files to at the beginning): \Documents\Sports Interactive\Football Manager 2009\skins\test\panels To edit the graphic for the footer you’d copy the graphics from: ***\skins\fm2008-widgets\graphics\interface\footer To: \Documents\Sports Interactive\Football Manager 2009\skins\test\graphics\interface\footer (Creating the extra folders if need be). Yes locating the files to edit can be a bit of a challenge with FM09, but they will all be located somewhere within the files that you extracted at the start. I will follow this up with specific detailed guides on how to edit the xml files and the graphics. Original Thread For Discussion Link to post Share on other sites More sharing options...
michaeltmurrayuk Posted November 21, 2008 Author Share Posted November 21, 2008 FM09 Skinning Guide Part Two: Changing the Settings (Fonts & Colours) First read Part one of the Guide – This part of the Guide (and the future parts) will assume you have extracted all the required files from the fmf files and have already created the base of your skin (which will still be referred to as Test in the guide). Before you start I advise you have the following folder locations open: The Folder that you extracted the fmf files to. Your User Data folder open to your skins folder (\Documents\Sports Interactive\Football Manager 2009\skins\test) The Fonts folder for your computer (if replacing the fonts)( C:\Windows\Fonts) Football Manager 2009 (to test any changes) Your xml editor. And your image editing program to get the RGB values for colours from if changing the colours. Editing the Fonts First I will show you how to edit the font of your skin, so first we need to paste some extra code into the test/test.xml file, so open test.xml with your xml editor and paste the following code into the file before the </properties> line: <real id="bgop" value="0.0"/> <!-- Background opacity to determine how see through this colour is --> <integer id="cmod" value="1"/> <!-- Colour Mode --> <!-- TOOLTIP PROPERTIES --> <flags id="hnfn" value="fonts/vera" comment="hint font"/> <integer id="hnst" value="0"/> <!-- Style --> <integer id="hnss" value="8"/> <!-- Font size --> <!-- TITLE PROPERTIES --> <flags id="tlfn" value="fonts/vera" comment=" title font "/> <integer id="tlss" value="17"/> <!-- Large font size --> <integer id="tlsn" value="15"/> <!-- Normal font size --> <integer id="tlsl" value="9"/> <!-- Small font size --> <integer id="tlst" value="shadowed"/> <!-- title text style --> <!-- MENU PROPERTIES --> <flags id="mnfn" value="fonts/vera" comment=" popup menu font "/> <integer id="mnss" value="7"/> <!-- Small font size --> <integer id="mnsn" value="8"/> <!-- Normal font size --> <integer id="mnsl" value="10"/> <!-- Large font size --> <!-- BUTTON PROPERTIES --> <flags id="cnfn" value="fonts/vera" comment=" Button Font "/> <integer id="cnss" value="7"/> <!-- Small font size --> <integer id="cnsn" value="8"/> <!-- Normal font size --> <integer id="cnsl" value="10"/> <!-- Large font size --> <!-- TEXT PROPERTIES --> <flags id="txfn" value="fonts/vera" comment=" Text font "/> <integer id="txss" value="7" /> <!-- text size small --> <integer id="txsn" value="8" /> <!-- text size normal --> <integer id="txsl" value="10" /> <!-- text size large --> <!-- font settings --> <list id="font_settings"> <record> <flags id="font" value="vera" /> <!-- bold modifiers (modifies the base bold value for bold text) --> <record id="bold"> <real id="horizontal" value="2.0" /> <real id="vertical" value="2.0" /> </record> <record id="semi_bold"> <real id="horizontal" value="1.0" /> <real id="vertical" value="1.0" /> </record> <record id="light_bold"> <real id="horizontal" value="0.5" /> <real id="vertical" value="0.5" /> </record> <record id="very_light_bold"> <real id="horizontal" value="0.3" /> <real id="vertical" value="0.3" /> </record> <record id="plain"> <real id="horizontal" value="0.5" /> <real id="vertical" value="0.5" /> </record> </record> </list> That is the coding for the default font type, size and style. To change the actual font you will need to create a fonts folder in your Test Skins folder so you have skins/test/fonts and then copy the font file you want to use into the fonts folder and change the value="fonts/vera" line above to match the font you want to use, so say you wanted to use the tahoma font in your title text, you’d copy the Tahoma font file to your test/fonts folder and change the value="fonts/vera" line for the title text to value="fonts/tahoma" To adjust the font size change the value for the large/normal/small line until you are happy, you can also change the text style (there is a list of working commands around somewhere – I’ll see if I can dig it out.) The fonts for specific screens can alsp be controlled by the code that calls the text – which will be in the various xml files from the panels folder, for example the match title bar.xml file controls the font used in the scoreboard – to edit these fonts you just need to edit the font="fonts/verabd" line in the line of code that calls the text, and these can be edited as above by changing the font name to match the new font you put in the fonts folder. An alternative way to change the font is to rename your new font to vera (and verabd) and put the renamed file into the test/fonts folder – this is quicker, but you have less control as every instance of the font will be changed. Changing the Text Colours Next I’ll show you how to change the colour of the code in the game, first we need to copy some files into our skins folder, first make sure you have a test/settings folder, if not create it and then copy the following files from the fm09_extracted/settings folder to the test/settings folder – colours.xml, config.xml and fm colours.xml (you may already have the config.xml and fm colours.xml files in your test/settings folder if so you don’t need to overwrite them) Colours.xml – in this file you will only really be interested in the first two blocks of text, and this file controls the colour of the main text, menu text and tree text among others. Fm colours.xml – controls the special colours – attribute, loan player, user colours etc... the file is generally well commented. To change the colour, just change the RGB values – they run from 0-255, where R=255 B=255 G=255 is white and 0 0 0 is black, 255 0 0 is red, 0 255 0 is green and 0 0 255 is blue. You can find the RGB value for certain colours, by using your image editing program or by looking at one of many colour tables that are on the web. If you don’t know what a line corresponds to change it to a colour that stands out and scan through the game screens until you see that colour. And finally if you want to change the range each attribute colour applies to you just need to edit the following text from the panels/player profile.xml file (first copy it to test/panels/): <!-- attribute colouring --> <integer id="exca" value="16" /> <!-- excellent threshold --> <integer id="excn" value="11" /> <!-- normal threshold --> <integer id="excl" value="6" /> <!-- low threshold --> By default: 1-5 low att colour. 6-10 normal att colour. 11-15 good att colour.. 16-20 excellent att colour. When you have saved your changes to get the changes to show in game, load the game and go to the Preferences -> Display & Sound Menu, untick ‘Use Skin Cache’ and tick ‘Always Reload Skin on Confirm’ then click confirm or select the Test Skin if not already selected. Original Thread For Discussion Link to post Share on other sites More sharing options...
michaeltmurrayuk Posted April 22, 2009 Author Share Posted April 22, 2009 FM09 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: <!-- RADESTOCK'S SKINNER PANEL --> <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> <!-- END OF SKINNER PANEL --> 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): <!-- titlebar image --> <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"/> <!-- set the colour of the image to the team background colour --> <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): <!-- titlebar image --> <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"/> <!-- set the colour of the image to the team background colour --> <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: <!-- titlebar image --> <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"/> <!-- set the colour of the image to the team background colour --> <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 <!-- main logos container --> comments): <!-- main logos container --> <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"/> <!-- left sided main logo --> <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"/> <!-- Primary Logo --> <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"/> <!-- tells the picture to listen to the 'main picture' global property being set, and set its own file property from it --> <attachment class="get_global_attachment" get_property="mnpc" set_property="file" skip_if_null="false"/> <!-- tells the picture to listen for the 'main picture needs recolouring' property and sets its own 'should recolour' property from it --> <attachment class="get_global_attachment" get_property="mprc" set_property="srec" skip_if_null="false"/> <!-- the background, foreground and outline colours of the object we use for recolouring the default main picture if there is one, and it should be recoloured --> <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> <!-- dummy container --> <container> </container> <!-- right sided main logo --> <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"/> <!-- Primary Logo --> <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"/> <!-- tells the picture to listen for the 'main picture needs recolouring' property and sets its own 'should recolour' property from it --> <attachment class="get_global_attachment" get_property="sprc" set_property="srec" skip_if_null="false"/> <!-- the background, foreground and outline colours of the object we use for recolouring the default main picture if there is one, and it should be recoloured --> <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> <!-- main logos 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 <!-- manager and club names --> 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 <!-- title area --> 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). --- Original Thread for Discussion Link to post Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.