Skins

The MRA has the ability for you to customise its look and feel by loading a backdrop and graphical buttons. This allows people with an artistic flare to develop the graphical masterpieces and everyone else to benefit from them.  All the Skins developed for the MRA will be available from the Skins Downloads pages. 

This page describes the following in detail for you:

• use of the Skins tab
• how to develop Skins
• how to distribute your own developed Skins

The following is an example of the screen display of the Skins Tab.  Please either select the Hot Spots on the picture or refer below screen shot for details of each element on this tab.

Available Skins
This displays alist of the currently available Skins which can be loaded.

Tip: Single-clicking the selected Skin will preview it in the Preview window.

Back to screen display

Load Skin
Load the currently selected Skin into the MRA.

Back to screen display

Save Skin
Save any amendments that you have made to the colour scheme for the current Skin as a theme.  The Skin can then be distributed as a complete article by zipping up the content of the directory and forwarding to me.

Back to screen display

Settings
This set of controls enables you to configure the settings for the currently loaded Skin.  For all colour controls you can select from any pre set colours or create you own custom colours.

These settings include:

• Text colour
• Background colour
• Button background colour
• Button text colour
• Highlighted Button text colour
• Frame Box colour
• Radio On colour
• Button caption position
• Whether you want to use Graphic Buttons for this Skin

Back to screen display

Settings - Text Colour
Enables you to set the required colour for all Text used within the MRA (excluding button text). 

Back to screen display

Settings - Background Colour
Enables you to set the required colour for the Background.

Back to screen display

Settings - Button Background Colour
Enables you to set the required colour for the Button Background.

Back to screen display

Settings - Button Text Colour
Enables you to set the required colour for the Button Text.

Back to screen display

Settings - Highlighted Button Text Colour
Enables you to set the required colour for the Highlighted Button Text when the button is active.

Back to screen display

Settings - Frame Box Colour
Enables you to set the required colour for the Frame Box outline.

Back to screen display

Settings - Radio On Colour
Enables you to set the required colour for Radio buttons when they are active.

Back to screen display

Settings - Use Graphic Buttons
Enables you to set whether your Skin is using Graphical Buttons, i.e. those represented by a separate graphic. If the Skin does not use the buttons then leaving this option clear will speed up the load time of the MRA as it does not try to look for available buttons.

Back to screen display

Settings - Button Caption Position
Enables you to set the required position for button text - soon to be implemented.

Back to screen display

Preview Backdrop
Enables you to preview the backdrop of a Skin before installing it. (as described in Available Skins).

Back to screen display

Clear Skin
Enables you to clear the current Skin and return to the default settings for the MRA.

Back to screen display

Launch FIFA
As it says, once you have installed your required league you can run the game directly from the MRA.  It will select the correct version of FIFA to run based on the settings against this version of the Game.

Back to screen display

Exit
As it says, exit the MRA.

Back to screen display

How to Develop a Skin
To create customised themes (Skins) for the Sweetpatch MRA you can create any or all of the following graphics.  They must be the exact size else the MRA will automatically clip them. 

The Skins .cfg file
All the files required for a skin should be packaged together in a folder. This folder should contain:

• Skin.cfg
• Backdrop.jpg or backdrop.bmp (unlike the previous version this version does NOT currently support the .gif format)
• It can also contain a bitmap image for a button called button.bmp

The best way to create a new Skin would be to copy the Sweetpatch Skin Folder and then replace the images with yours, and then use Sweetpatch to change the colours.

Skin background image
Your skin can have a background image, this image must be 618 x 452 pixels. This image must be called backdrop.jpg or .bmp. Unlike the previous version this version does NOT currently support the .gif file format.

Changing the Colours
To change the colour of a skin element i.e. the Text Colour, click on the coloured boxed to the right of "Text" in the Skins Settings Frame.

You will then be presented with a color 'chart' (as below image) which you can pick a basic colour to change the Text to.

If you need to us a colour which is not on the Basic Chart then click on the button 'Define Custom Colors>>' and it will then open out the dialog as below.

From here you can then set your custom color, after you have 'created' the correct colour just press the 'Add to Custom Colors' Button and then Ok.

Tip: the Red, Green & Blue values are decimal, so if you have a 'Web' colour which is in hex convert each of the two hex numbers into their decimal values, you can use the Windows Calculator for this. (You have to use the Scientific view for this). e.g.

The colour pink above is #FF80C0

This is split in their hex numbers of

• Red - FF
• Green - 80
• Blue - C0

These translate in decimal

• Red - 255
• Green - 128
• Blue - 192

As you can see above.

Defining a Custom Button
You can now define one Bitmap which will be used as a backdrop for all the buttons. This bitmap has a size of 89 by 29 pixels. It will make any part of the button transparent which is the same colour as the pixel in the top left hand corner. By using only one bitmap now, it saves a lot of time for a developer and also these buttons can be used by any language as they do not have any text 'printed' on them. e.g.

Would produce a button with 3 Red Circles, the yellow outside would be transparent.

The example above would have a transparent circle inside the middle circle.

Conclusion
I hope you find this a useful addition to the MRA, especially if you are graphically minded, as the options for customisation should now be unlimited.

Back to screen display

How to distribute my own developed Skins
If you have developed your own Skins that you would like the world to benefit from then please create a zip file with the name of your Skin, i.e. Chelsea.zip, which contains all the files for your Skin, including:

• The Backdrop file
• The Button.bmp file if used
• The Skin.cfg file
• A readme.txt file to describe the Skin and any other details you want to mention