Creative Drop Down Menu Documentation
Table of Contents >Design Rules for Skin Elements

Design Rules for Skin Elements

By reading this section you will learn about skins and styles, 
how to make one, tips and tricks and general guidelines to simplify your work.

Quick Links

• The Tallest Skin Element’s Rule

• All design elements have to be drawn at a minimum scale

• Resize a complex design

• All button states skin elements should have the same dimension

Quick Links

The Tallest Skin Element’s Rule ( for main menu) :

For Drop Down Menus the element with the biggest height, usually the background, sets the height of the other skin elements.

For example:
We have the following menu, that has a background bigger than skin’s buttons, and the buttons are positioned at the bottom:

1. The alignment for buttons is set up in the same manner as well: left, center, right, depending on the background.
2. The resize options are available for custom made skins as well as for built in skins.

The Widest Skin Element’s Rule ( for submenu ):

For Drop Down Menus (submenus) the rule of the widest element is applied.

For example:
We have the following menu, that has a background bigger than skin’s buttons, and the buttons are centred:

1. The alignment for buttons is set up in the same manner as well: left, center, right, depending on the background.
2. The resize options are available for custom made skins as well as for built in skins.

All design elements have to be drawn at a minimum scale

Because they will only scale to a bigger size, never to a smaller one.

In this picture, the button’s photo and the background have minimal dimensions. The background and the button resize until reaching the necessary dimension.

Resize a complex design:

In case you’ve been using gradients or any other design feature and the shapes don’t look the way you’ve expected them to, use custom resizing window having in mind the rules in the following help file: “How does automatic resize work?”

All button states skin elements should have the same dimension,

As seen in the following picture:

The fuchsia and green highlighted areas are the transparent areas of the button, and as it can be seen they have the same dimension.