Understanding the skin structure:
Menu skin determines the basic “look and feel” of a Menu control. The new skinning
model uses CSS classes and 'multiple CSS classes on elements' technique to apply
layout to the elements created by Menu. No more xml definitions, pure css only.
By default, all menu skins are located at "~/componentus/menu/skins/" directory
within application directory. You can override this setting by specifying your own
path through the SkinBaseUrl property. Each subdirectory within
the Skins directory is a different skin. The name of the directory is equal to the
skin name.
Menu has a number of pre-defined skinnable elements (menu groups, items) which have
specific class names defined. Using CSS selector syntax you can override the default
style and define your own custom style. Default CSS class names are defined, as
follows: [SKINNAME] plus [CLASSNAME with a leading underscore] . So if your skin
name is MyCustomSkin, your default CSS class names have to be: .mycustomskin_rootmenu,
.mycustomskin_subitem and so on.
Skin particulars are:
- images directory
It contains images for the menu skin elements (items, groups, scrollers, etc). It's
not allowed to rename this directory: directory name images is fixed.
- skin.css file
It defines the styles for the menu elements. Filename skin.css is fixed.
Skin testing:
Right-click the menu control and select AutoFormat..., select desired skin from
the
list and click Apply button, close editor or you can simply set the Skin property
to the name of desired skin.