VirtualDJ - VDJPedia

Skin SDK

Wiki HOME
Skin Developer SDK

This document should should give you an overview as to how to create or modify skins for Virtual DJ 8.

Default Skin
The Default skin can be extracted from Settings->Interface tab of VirtualDJ See how here

A skin is a .zip file containing the following files :

image_name.png
skincode_name.xml
preview_image.png (optional)
window_images.png (optional files for <window> elements)

The Image file

The Image file contains all the graphics needed in your skin. You can use the image editor of your choice to modify or create it, but you will need to ensure that it support PNG graphics, most of the good image editors do this (for example PhotoShop or CorelDraw). The PNG will usually have the width X and the height Y of your screen in pixels. Ensure that when you start your skin you start with a blank, transparent (alpha) background. In the first X rows you'll find the background used for your skin. The next rows are used to store additional graphics, like pushed or selected buttons.
Note: BMP and JPG files can also be used, but PNG offers transparency which can make your skins more powerful

The XML file

The .xml file describes each element of your skin. For each element, it defines what it should be used for, where are the graphics used for its various states (in coordinates from the .png file), and various other things. The xml file can be edited from a simple text editor (like notepad), but it's more likely that you will install a specific xml editor or an advanced Text Editor (like Notepad++)
Note : Windows will open a .xml file in internet explorer where you can read it but can't modify it).

The syntax of the xml file follows this pattern :


<skin name="" version="" width="" height="" nbdecks="" comment="" image="" author="" preview="" breakline="" breakline2"" >
  <element>
  </element>
...
..
   <element>
  </element>
</skin>

The xml file is composed of a root element (Skin), which contains all the elements of your skin.
the <skin> element can have :

name : provide a name for your skin (can be different than the zip filename.
version : define the version of the used SDK (8 for version 8)
width : the width of your skin in pixels (in most cases its the width of your image file and your screen)
height : the height of your skin in pixels (in most cases it will be the height of your screen)
nbdecks : define the number of the decks that your skin will use (optional)
comment : provide a comment - extra information for your skin (optional)
author : provide your name - author of the skin (optional)
image : provide the filename of your graphics file (Optional - if the graphics file has the same name as the xml file this is not required)
preview : (optional) the name of an image that is used as preview. It should be a screenshot, so that browser and panels are correctly filled, and not too large (600x338pixels is ideal) so that it loads quickly in the config window.
Breakline : (optional) They define the y-coordinates where the browser will be stretched when stretching the skin. Automatic breaklines will start a few pixels below the top of the browser object, and just above the right-bottom resize area. If your skin has other buttons next to the browser, ensure that the area between the breaklines doesn't include a button, or it may get stretched or compressed when resizing the skin. It will not be possible to resize the skin smaller than breakline 1, so try to keep this at the top of the browser.

Skin children elements
The available elements that can be used as children of the main <skin> element are:

All the above can be children (nested) inside a Container

Skin children - Containers :

Pre-defined Colors
Skin Element Position & Size
Browser in Window
Global Element Attributes
Default Icons

Wiki HOME