Themes

Using themes

A Likno Drop-Down Menu Trees theme is a collection of elements which can give your tree a unique look.

A theme is comprised of the following:

• A unique set of icons (for more details see the imagesDir topic)
• A set of 3 CSS styles for the normal, mouse over and selected states respectively (for more details see the cssClasses topic)
• A style for the background of the tree, which may include a tileable background image

To use a theme in the API, all you have to do is use the setImagesDir and addClass functions, as you can see in the example for the addClass function.

Designing your own themes

To design your own theme, you have to follow these steps:

1. Design a custom set of icons, in most cases at 16x16 pixels size, and save them in the PNG or GIF format using the filenames described in the imagesDir topic.
2. GIF icons can have 1-bit transparency (which basically means "hard" edges around the icons), while PNG icons can have per-pixel transparency, blending with the tree background and allowing for some nice shadow/glow effects. For PNG icons you do not need to worry about the lack of transparent PNGs by Microsoft Internet Explorer 6 or earlier, because it is handled automatically by the tree code internally.
   Great care must also be taken so that the icons are tileable. For example, the connecting lines (if any) must blend seamlessly at the edges.
3. Design a set of 3 CSS styles for the default normal, mouse over and selected states respectively. Although there are no limitations in the CSS styles which you can use, care must be taken not to "break" the tree look. For example, if you define a very big font size, the items will be drawn too high apart and the tree will become dysfunctional.
   See the example for the addClass function on how to use these classes in your trees.
4. Design a CSS style for the background of your tree, usually comprising of a border style, a padding and a background color or image. If you define a background image, care must be taken again that this image is tileable and does not obscure the icons or the text of the tree.