Overview

How to modify and create your own themes for aMPed

Introduction

As of v 3.6 aMPed introduces 'colorized' themes, which means you can modify or create new themes by simply changing the colors of text and graphics. Just edit the aMPed.colors.xml file in the related \Themes folder. You do not need to create any new graphics. Of course, you can still add your own graphics to the \Themes\media folder as well if you wish.

You may change themes either:

•  within MP GUI Skin Settings - selection is saved until you run aMPedConfig
•  via aMPedConfig -  selection is saved even when you reinstall aMPed or MP

Note: Custom themes are not saved when you reinstall aMPed or MediaPortal.

Known Issues

1. Vintage Basic Home Editor (which uses WPF/XAML) does not read the theme colors, so is now black and white.
2. Some controls in MediaPortal are hard coded and cannot be colorized at present:
   1. Progress bars
   2. Playlist controls
   3. Menu control on Classic (My) Home/Plugins
3. When changing Layouts (e.g. Fanart vs Wide Fanart) in MP GUI Skin Settings, the changes do not fully take effect until you open a new window (MP only processes the animations used to alter backdrop/overlay sizes on window open)

Create Your Own Theme

1. Copy one of the existing theme folders to a new folder in the \Themes folder and name it whatever you wish.
2. Load MP, ideally in windowed mode, or on a secondary monitor so you can see the results of your changes as you make them.
3. Open the aMPed.colors.xml file in any text editor like Notepad, or Notepad++ and modify the colors for the different graphics and text (see below for details)
4. You can observe the changes in MediaPortal as soon as you open a new window. 
5. If you wish to display a unique preview in aMPedConfig or MP config for your new theme, simply save screenshots and replace the existing preview.png image in the \Themes\\[themename]\media folder
6. Once you are happy with your new theme, make a backup copy so you don't lose it when you reinstall aMPed or MP.

That's it. You're done!

You can now select your new theme in aMPedConfig or switch to it in MP GUI Skin Settings. You may use your new theme with any font size or  layout, including the Basic Home layouts.

Post your new theme in the aMPed User Mods forum for other users to enjoy. It may end up in the next version of aMPed!

Editing the aMPed.colors.xml

aMPed uses Hex values in the format AARRGGBB (e.g. 90FFFFFF for white 90% opaque). This is the ONLY format that works consistently in all cases in MP.

• AA = Alpha channel hex value (transparency) - normally you do not need to change this, though you can if you wish.
• RR = red hex value
• GG = green hex value
• BB = blue hex value

Note: The aMPed.colors.xml file contains tips and comments that indicate which colors are used for which graphics and text. 

Graphics

Most textures in aMPed are semi transparent so you can blend overlays for different color effects.  You can set the following 7 texture colors:

1. #amped.bg.color - the main/base color of your theme
2. #amped.bar.color - often a slightly lighter or darked color than the background color works best
3. #amped.glass.color - use a color you wish to 'highlight' (or lighten/darken) the top/bottom bars
4. #amped.button.color - best results with a medium range color (to see the 'highlights' of the texture) especially one that contrasts with the background color.
5. #amped.border.color - use a light color in most cases so the borders will 'show up'. This color is also used for the actors background box so select a contrasting color from the text2dim.color used for actors text.
6. #amped.dialog.color - use a light color in most cases as the dialog backgrounds are already dark, so this mainly 'tints' the border
7. #amped.overlay.color - use a dark almost black color in most cases so text is readable even on light fanart backdrops

Text 

Four main text colors can be set:

1. text - usually the 'brightest' or lightest color for text you most want to see
2. text1 - default text so make sure it is 'readable' on background, bar, and overlay colors
3. text2 - usually a contrasting color to the text or text1 color
4. text3 - often a lighter or version of the bars color works well

with 3 different variations of each: 

1. f - focused color
2. nf - not focused color
3. dim - diffused color

In the provided themes, these are different levels of diffusion/opacity: but you can choose to use different colors if you wish.

You can also set the following 'standard' MediaPortal text colors:

1. shadow color
2. played color
3. remote color
4. download color

Buttons and Bars

If you wish to use buttons or bars from another skin, or create your own, just make sure all graphics are the same size as the existing ones in aMPed so they will position correctly on the screens.

Be sure to use the same names as the button and bar graphics you wish to customize, as stored in the skin\aMPed\media\ folder.