The MediaPortal graphical user interface is a modular solution that uses skins to separate the look and feel from the logic in the application code. MediaPortal application functionality is surfaced through user interface windows (GUIWindow) containing many graphical user interface controls (GUIControl). However, without a skin file, none of this functionality is visible to the user.
The user accesses the functionality surfaced from the application code through skins which are defined using XML. The application will load the appropriate XML skin file upon initialization (based on Window ID). For example, when MediaPortal starts, the first skin generally loaded will be the myHome.xml or BasicHome.xml skin file depending on which option the user has configured.
The use of XML simply provides a structured way to tell MediaPortal the layout, type of control and coordinates of every item on screen such as color of text, transparency if graphics etc. By changing the XML file within a skin the entire look and feel can be modified. Although the details are very different, the idea is the same as making a webpage however XML files are CASE SENSITIVE.
Skin files are contained in the
skins folder within the main MediaPortal application folder.
Within the main skins folder there are sub-folders for each skin (e.g. Default and DefaultWide are installed with MediaPortal) and those folders contain the individual skin XML files (e.g. myHome.xml).
The following sub-folders are used :
Additional sub-folders may be added in some skins, usually to support optional layouts, translations of text used in the skin, etc.
The media folder should have all the textures that the skin file uses (normally in PNG format for best quality).
MediaPortal 'packs' and caches png images from the media folder (not sub-folders).
The packed graphics files (are located within individual skin folders in the Cache folder e.g.:
Why are they needed?
Packed textures decrease the workload of the GPU with every single rendering pass.
How are they created?
Packed graphics are generated at runtime and are used to help keep the rendering portion of the application as efficient as possible. They are created only when no packed graphics already exist.
They can be identified by the filename prefix packedgfx and end with either .bxml (binary xml) or .png.
When the individual graphic files of a skin are modified, the packed graphic files and the related .bxml files must be deleted (i.e. recached) otherwise the changes will not be visible in MediaPortal.
What skin designers have to pay attention on when designing skins
See: Optimize your Skin for further information.
The sounds folder contain WAV files used by the MediaPortal application and plugins.
The following sounds are included in the default skins for navigational sounds. They can be adjusted in the configuration utility under General settings, Keys and Sounds.
The following sounds are used by plugins:
A number of xml files are used by MediaPortal 'globally' - i.e. they are displayed by the software under certain conditions and may be displayed in any or all windows: Dialogs, Media Overlays, Topbar
Dialogs are displayed when a user presses the More/Info key on their remote or the F9 key on their keyboard, or sometimes when a user selects an option from a context menu. Different Dialogs display depending on the window and current action. See List of Dialogs
Media Overlays, sometimes called 'previews', are the small windows that overlay the currently playing video, TV or music on any window. The default overlays (videoOverlay.xml, musicOverlay.xml) can be turned on or off in any xml using the <allowoverlay> window element e.g.:
A 'special' xml: videoOverlayTop.xml is also displayed whenever the default overlays are used and video is playing. The controls in this file display 'on top' of the video window.
Media overlays can also be defined uniquely in a skin xml file and then imported (see <import> files below) into any xml thus replacing the default overlays when <allowoverlay>no</allowoverlay> is set in the xml.
. For further Information: See Media Overlays
The topbar displays at the top of most windows when the mouse hovers there, or when users select the up arrow key in most menus. It enables control of playback functions as well as exit MediaPortal, fullscreen video, home screen, etc.
There are two xml files which define the topbar:
Both topbars are fully 'skinnable'. Topbar.xml can automatically hidden or disabled in any xml using the window elements (before the <controls>): <autohidetopbar> (yes/no) and <disabletopbar> (yes/no) see Skin XML Structure for syntax.
See also Topbar
Depending on the value of the control type tag in the control element above there will be additional tags specific to that type of control. A list of all available controls and a description on how to use them can be found on the Skin Controls page.
In virtually every MediaPortal release, changes for bug fixes, reworks and new skin features may require skin updates.
For information on the changes between versions: