Overview

The use of the Skin Editor is very easy and the best way to edit the existing skins to your needs, or to create complete new Skins.

In fact, there are so many different ways to create a new skin, that I will only explain the main features of the Editor.

So, if you have any questions how to create special functions that are not described here, just leave your question in the MPDisplay++ Forum here on the Team MediaPortal Website. I'll place a link here, when the Skineditor is released and for everyone accessable.

General Overview

The SkinEditor is separated into 5 tabs.

Skin Settings

The Main Screen you see above is the Skin Settings tab.

Here you can set the overall Skin Settings like Skin Author Name, Default Language & Skin Style, Pre setting if Labelscrolling is activated or not, Setting of the Default SkinOption and the possibility to add Preview Images of the different SkinOptions and  a Description for those.

Skin Editor

This is the SkinEditor tab. More explanations will follow in this Tutorial.

Style Editor

The Style Editor tab...

Here you are able to set different Styles for Fonts, Images, Lists, etc. depending on which Style Option is choosen in the MPD++ Config.

e.g. Titan Skin is using a "default" Style

 and a "Blue" Style. In this case you can see the Background Image for the choosable Skin Style.

Image Editor

In this tab you can add images you want to use in your Skin. This is one option for doing this... The other one is just to copy/paste the images with your windows explorer. You can do as you want...

Info Browser

Within this tab you can see what Tags are coming from MediaPortal, which WindowID, DialogID or Focused Control is up when navigatin through MP. Also you can easily add Property Tags by clicking on the "+"- Icon left of the MPTags.

Test Area

This tab is for live editing your Skin while MediaPortal is running. This will be the best way, for example, if you want to check if all your edited Visible Conditions are correct.

How to create a new Skin

First of all go to the “File” Tab and click on Menu entry “New”
The following Window appears:

Type in the Name of your Skin, choose the Resolution you need and proceed with the “OK”- Button.

Attention:
In some cases you have a 16x9 Aspect Ratio with a native Resolution of a 4x3 Screen. In this case you have to use the resolution of a 16x9 Screen (in my Case, I have a Thermaltake DH102 with a native Resolution of 1024x768 but in 16x9 Aspect Ratio I have to use a Resolution of 1280x720)

Adding the first Window

In the lower left corner is a Button named “Add”. Click there to open the following window:

Type in the Name of the Window you want to create, usually you start with the BasicHome Screen with ID “0”. Also you have to set the Window Type. As the BasicHome Screen you want to create should show the Informations of your MediaPortal BasicHome Screen (ID 35) you have to set the Window Type to “MediaPortal Window”.
The other Window Types are described in the Skin Documentation in this WIKI.

Click “OK” to proceed.

First settings for the new created window

Here you can set additional settings for this window like how you want to style your Background for this window in case you don’t want to add it as an image control (described later). BUT… Here you can’t use Tags like fanart handler pictures! In this case you have to use an image control.

Here you also set the Visible Condition for showing up this window. In this case it should be “IsMediaPortalWindow(35)”

Adding Controls to the Window

With a right click of the mouse you can add several controls / groups to the created Window. In the following chapter we want to explain how all controls can be set.

Soon there will be more content to view...

Related

• Tutorials