Custom Skin Tutorial

By reading this section you will learn to create your very own skin. It's simple and it's fast.

This tutorial only refers to the basic skin elements one needs to create a Creative Drop Down Menu skin.

Note* When adding a new element to your custom skin you will have to update the menu (just press edit, select your menu and click ok).

1. This will be the result of our work - a simple, elegant skin

Tutorial Files can be downloaded from here

2. Let's start by creating elements for the main menu:

The skin elements can be designed with any design tool
The skin elements are following some design rules that can be found in the documentation
The skin elements can have any name

A. The Background:

As we deal with a Drop Down Menu the background image for the menu should be a rectangle with a small height and a larger width, like the one in the following picture:

This image is in fact a .png image but you can use any kind of image that you find suitable (*.jpg,*.png,*.gif, ...).

B. For the Buttons :

OVER STATE

- Draw a rectangle to represent buttons in the menu:

UP STATE

For the up state a simple image was chosen:

C. Create a separator :

- draw a vertical line as the one you can see bellow:

3. Now that you have all the basic menu elements you need you can finally use the custom skin. There are few easy steps to follow in order to have the menu on page:

A. Create a menu using a built-in skin and click the OK button:

B. Click on the to edit the menu:

A window will open where you will be able to select the menu.

B. Click on the custom skin editor button,

Give a name to your custom skin and select the appropriate files for each skin element.

In this menu we used also designed a button separator which can be set from the “Details” tab.

C. Finishing the menu:

The final thing we will do is to remove the submenus from the menu because for this tutorial we designed elements just for the main menu.

The remove the submenu items, select one at a time and click on the button.

D. Customize any settings you need to:

To modify the parameters just click on the edit button and choose a menu from the drop down list:

The Layout Tab:

The Animation Tab:

The Text Tab:

Save a Preset:

The Preview Tab was not used because when dealing with custom skin you won't have a preview available. The tab only works with built-in skins.

The result is:

As you can see in few easy steps we've managed to create a custom skin that is functional and easy to integrate as design.