Introduction

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 Folders

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 :  

• \media - contains the graphics files used by the skin - usually .png format
• \sounds - contains the WAV sound files used by MediaPortal and plugins
• \themes -  as of v 1.3.0 contains theme files - see Skin Themes
• \fonts -  some skins install font files for use in the skin, although in some cases these are installed directly to the Windows fonts folder by the Skin Installer (e.g. MPEI)

Additional sub-folders may be added in some skins, usually to support optional layouts, translations of text used in the skin, etc.

Media

The media folder should have all the textures that the skin file uses (normally in PNG format for best quality).

Packed Graphic Files

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.:

• ...\MediaPortal\Cache\

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

1. A 128MB GPU can only take 4 packed textures files.
   1. If your skin creates more, then it will not work with such gfx-cards!
2. texture sizes: no other than power of two dimensions should be used
3. texture sizes: trim all unused space around the actual texture (if any)

See: Optimize your Skin for further information.

Sound

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.

• back.wav
• click.wav
• cursor.wav
• photo.wav

The following sounds are used by plugins:

• notify.wav (MyMail plugin)
• MyTetris.Block.wav (MyTetris plugin)
• MyTetris.Knock.wav (MyTetris plugin)
• MyTetris.Level.wav (MyTetris plugin)
• MyTetris.Line.wav (MyTetris plugin)

'Global' XML files

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

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

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.:

• <allowoverlay>yes</allowoverlay>.

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

Topbar

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:

• topbarhome.xml - defines the topbar in the MyHome window, and
• topbar.xml - defines it in all other windows.

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

Control Types

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.

Example plugin with most controls implemented

If you want to see how the different controls look/work within MediaPortal download and install the plugin GuiControlsDemo, which can be found in the MP Repository.

Detailled Description of GuiControlsDemo

Skin Related Changes

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:

• 1.0.0 to 1.0.1 Changes
  • Dialogs 4th line
  • Extensions Plugin
  • Last.fm Hover Image
  • Recorded TV Redesign
  • Skin Select Button
  • Teletext Rework
  • TV Guide Groups Display
  • TV Guide Groups Handling
• 1.0.1 to 1.1.0 Changes
  • AllowOverlay Conditions
  • Channel Name Exposed to Skin
  • CI menu Extended
  • EPG Properties Added
  • Fadelabel text wrapping and button control with fadelabel
  • Hard Coded Labels Removed from #itemcount and #play.current
  • Image borders
  • Index Item Number Display
  • isWatched added to Shares View
  • MediaInfo Codec Properties
  • MediaInfo Enhanced Controls
  • Notify Icon in TV Guide
  • NowPlaying Progress Bar
  • Remember Last Focused Control
  • Shadow text
  • Skin.string(a,b) Fixed and Renamed to String.equals(a,b)
  • Thumbnail Panel Frames
  • VUMeter in Music Now Playing
  • ZAP OSD Channel Number Display
• 1.1.0 to 1.2.0 Changes
  • AudioVideoDelayPossible
  • Auto Hide Pause OSD
  • Back Button Control (history)
  • Button3Part
  • Checkbutton Control Created
  • Common Control IDs
  • CoverFlow Control Created
  • CoverFlow keepaspectratio and thumbZoom
  • Dialog Animation on Close
  • Duplicate ID handling changed
  • Enhanced TV Notification
  • EPG Search
  • Fadelabel Flickering Text
  • Fadelabel Wrapping
  • FFDShow Post Processing OSD bar
  • File Stack Dialog - Filename exposed to Skin
  • Filmstrip Keepaspectratio
  • Filmstrip scrollbar
  • Font Aliases
  • Global Define Tags
  • Hidden Animations Execute on Windowopen
  • Image Alignment
  • Image Caching <shouldCache>
  • Image Masking
  • Image Tile Fill
  • Incompatible Plugins Dialog Skin
  • Itemtype in database views
  • Keyboard Skinning
  • Language select with dialog
  • Line Spacing in Text control
  • Listcontrol Popup Additional Info While Scrolling
  • Listcontrol Scrollbar
  • ListControl Scroll Fix and Loop Delay
  • Listcontrol Textcontent3
  • Localized Strings Beginning with Numbers
  • MPE Tools with Version Check (1)
  • Music Browsing Skin Properties
  • Music Now Playing Focus
  • Music Now Playing Love/Ban Buttons
  • Music Now Playing Love/Ban Dialog
  • Music Now Playing Skin Properties
  • Music View Group Images
  • myVideoTitle.xml new skin property
  • Open Plugins with a Parameter
  • OSD Subtitle "Forced Only" Button
  • Program Reminder Button removed from mytvprogram.xml
  • Progress Bar Updates
  • Progressbar use only middle Texture
  • Radio Guide Changes
  • Shadow Text Alpha Blend Logic
  • Shadow Text in Text Control
  • Shadow Text Maximum Width
  • Skin Expressions
  • Smsinputcontrol control Removed
  • Spinbutton Control Created
  • StackLayout shift buttons
  • Table Layout for Group control
  • Thumbnailpanel Scrollbar
  • Topbar Visibility Conditions
  • TV Guide (1)
  • TV Schedule Notify Conflict
  • Video Info Review Button
  • Visibility Condition System Date
  • Visibility Condition System Time
  • Visiblechange Animations
  • VolumeBar width
  • Weather Images Moved
  • Window IDs > 999 (1)
  • XML Cleanup
• 1.2.0 to 1.3.0 Changes
  • Camera Support
  • Checkbutton Implementation
  • Comskip Timeline
  • Conditional <include>
  • Enhanced #defines
  • Enhance textXOff in Buttons
  • Fadelabel allowFadeIn
  • Filmstrip SpinCanFocus
  • Filmstrip Thumb zoom and alignment
  • GUI settings changes
  • Image Overlay
  • ListControl unfocused alpha
  • MenuButton Control
  • MenuButton in MP plugins
  • MyVideos new skin controls
  • MyVideos new skin properties
  • New color skin tag for DVD/BluRay folders
  • Radio Guide Group button
  • SelectButton texture size
  • Skin Functions
  • Skin Settings
  • Skin Themes
  • TextboxScrolllup Scrolling
  • TextColorNoFocus
  • Text Padding
  • Text scrolling on Checkbutton, Togglebutton
  • TV Guide genre colors
  • Updated Default(Wide) Skins
• 1.3.0 to 1.4.0 Changes
  • 'Disable LiveTV dialog' Skin setting
  • Album & Artist Info Skin Properties
  • Blu-ray Settings Skin Changes
  • Comskip / Chapter Markers for MyVideo
  • Decoder Settings
  • Settings Startup, Resume and GUI
  • Skin Version Updated
  • Togglebutton removed
• 1.4.0 to 1.5.0 Changes
  • Y-offset in TextBoxScrollup
• 1.6.0 to 1.7.0 Changes
  • Duration in Video Shares View
  • Expressions in Hyperlink, Action, OnXXX
  • Wake On Lan feature
• 1.8.0 to 1.9.0 Changes
  • <oninfo> and <onESC> skin control attributes
  • Date.local property added
  • New video resolution logos
• 1.9.0 to 1.10.0 Changes
  • Volume overlay
• 1.10.0 to 1.11.0 Changes
  • Live TV media logos
  • MyVideo #isfolder property
• 1.12.0 to 1.13.0 Changes
  • Signal and quality level on TV OSD
• 1.14.0 to 1.15.0 Changes
  • Possibility to add progressbars to listcontrols
  • Possibility to open MyVideos with a parameter
• 1.16.0 to 1.17.0 changes
  • Add watched/unwatched and other icons for thumbnailpanel/filmstrip/coverflow
• 1.24.0 to 1.25.0 Changes
  • Add the ability to choose the type of pause for designers in the slideshow
  • Main, Version, CVS (Edition) label in Splash screen - pos, size from skin
  • New EXIF Properties in GUIPicture
• How to Add Changes