Design_a_Skin

 

On 17 Nov 2011, pilehave indicated that this page or content is incomplete and still work in progress.

Introduction

Design Concepts

Getting Started

Skin Design Tools

You only need a few simple tools to create your own skin, but using the right tools will speed up the process.

Basically you need:

• A text-editing program that allows you to edit XML-files
• A graphics-editing program that can handle JPG, BMP and PNG-files

XML-editing

The most simple program you can find to edit text with is Notepad, which is installed on all Windows-versions, unless you actively uninstalled it. With Notepad you can edit text, HTML and XML-files, but the program is very simple and doesn't have an undo/redo-history.

We suggest that you use something a bit more sophisticated. Most HTML-editors also allows you to edit XML-files.

Some of the features that are worth looking for in HTML-editor could be:

• undo/redo
• color-coding
• syntax-insight (Microsoft calls it intellisense)
• autocompleting tags
• auto-indent/code-cleanup
• search and replace

Try out one or more of these free editors:

• CoffeeCup HTML-editor

If text-editing is not enough for you, one of our forum-users "NoBugS" has created a free WYSIWYG-capable skin-editor that is build to suit MediaPortal in any way.

Most skinners (user that creates skins) use another skin as the base of their work. We suggest using the "DefaultWide" skin as a starting point.

Read more about the architecture of a skin

Graphics-editing

Use any software that supports JPG, BMP and PNG. Adobe Photoshop is really useful for more advanced stuff like layers, masks and various effects, but programs like Paint.NET will do just fine. A key-feature is that the program must support transparency in PNG-files.

Use PNG for buttons, small graphics or graphics that requires transparency. Use JPG for large images without transparency, the nature of JPG allows for higher compression and smaller filesize than PNG does.

Pro-tips

When editing skin-files you can have MediaPortal running at the same time. This way, any saved change will show up in MediaPortal when you refresh the current window. Refreshing is possible in two ways:

• Navigate to another window and back again. This can be done by presing "H" (to go to myHome/BasicHome) and then back again by pressing "Esc".
• Use a small MediaPortal plugin called MyRefresh. Put it in your MediaPortal-process plugin folder (path varies, but on 32-bit Windows the folder-path is C:\Program Files\Team MediaPortal\MediaPortal\plugins\process). When you press F5, the window is refreshed.

An exception to the above; when editing references.xml or fonts.xml (which are two mandatory files in MediaPortal), the changes to these two files does not show up until you restart MediaPortal.

Changes to graphics-files does not show up until you clear the cache for the skin, and restarts MediaPortal.

Use the import feature of MediaPortal. This way you can reuse all of your hard work in many places. DefaultWide uses import, which is a simple tag, containing a reference to the XML-file you want to add to the document:

<import>common.time.xml</import>