Standard View Skinning Tutorial

From JRiverWiki
Revision as of 15:36, 18 July 2007 by PeterS (talk | contribs)

Jump to: navigation, search

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!

If you want to use elements of a skin created by someone else, it is good etiquette to ask permission. At the very least give them credit in your skin description. Some skinners are very protective of their work, and copyright laws may come into play.




Where to start?

So where to start? First, pick a skin you want to use for modification. For this tutorial I will use the Noire skin, but any existing skin will do.

1.

1. Navigate to the Noire skin folder.

2. Make a copy of the folder, and put it on your PC desktop.

3. Rename the folder with your new skin name, for example, TekNik

4. Open the folder and in amongst the many image files, you will find the main.xml file. Open the file with text editing software, such as Notepad, MS FrontPage etc.

5. For Noire, the top lines of the xml will read thus:

<MJMS version="3.0">

<SKIN Name="Noire" Author="Pixtudio" EMail="infor@pixtudio.com" WebSite="http://www.pixtudio.com" About="Copyright Pixtudio" />

Here you need to add your own details between the quote marks: <MJMS version="3.0">

<SKIN Name="TekNik" Author=" YOURNAME " EMail="YOUREMAIL" WebSite="YOURWEBSITE" About="Copyright YOURNAME" />

6. Save the changes to the main.xml file, and then take the whole TekNik folder and put it back in the MegaSkins folder here:

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

Now when you open up the MEDIA CENTER software, the TekNik skin will be listed as an independent skin (of course, it will still look exactly like Noire, because you haven’t changed any images yet, but you have given it your chosen name and taken the first step to creating your very own skin.