Standard View Skinning Tutorial

MC Skinning Tutorial– Standard View

Skinning is customization of the software User Interface. It is based on graphics and simple coding instructions to determine how the program looks and acts. Anyone can be a skinner and create custom interfaces for MEDIA CENTER to share with the MC community or for personal use.

---

Intro

The easiest way to create your own Standard View skin for J. River MEDIA CENTER is to modify an existing one. You can skin absolutely everything or select only certain parts to change.

Skinning involves making or altering image files to create the graphic buttons, frames, and icons etc. that appear on the software. As well as working with images, some modification of an xml file is required. Xml is a coding language and looks similar to html code. It controls things like image placement, colors of elements, stretching of elements, and so forth. The xml file may look daunting at first, but it is quite straight-forward once you understand how it is laid out. The various graphic elements of the player are placed in default positions, and this only changes if modifications are made to the xml file.

So, in order to skin MC you have to modify:

• A set of images (frame, buttons, sliders etc.)

• The main.xml document for your particular skin

---

Knowing where stuff goes

So, where are these images and xml file? When you download J. River MEDIA CENTER the application is contained in various folders that reside on your PC hard drive. All Standard View skins are found in the MegaSkins folder in this location:

C:\Program Files\J River\Media Center 12\MegaSkins

You can navigate to this folder by right-clicking on your Windows Start button and selecting Explore. In the MegaSkins folder you will see that each skin has its own folder. For example, there is a folder entitled Aruba, and this contains all the elements that form the Aruba skin (graphics and xml file).

Software tools required for making a skin

You will need a graphics program (Photoshop, Paint Shop Pro, GIMP or even the simple paint program that came with your PC). You will also need a text editor, such as Notepad (included free with your Windows PC) to make changes to the xml file.

TIP Here is a link to info about free image editing software:

http://graphicssoft.about.com/od/pixelbasedwin/tp/freephotoedw.htm

Want something a little more powerful than standard Notepad? Try Notepad++, a free source code editor:

http://notepad-plus.sourceforge.net/uk/site.htm

Important I’ll keep repeating this advice. Always back up your work at each stage of development!