DynarchMenu Skin files

The menu skin system is based on 2 kind of CSS files: ones that only define the layout (no colors) and others that only define colors (no layout). Currently the following layout files are distributed with DynarchMenu:

• hmenu.css — this is the basic style which is included automatically by all others; it defines the menu layout, at the most basic levels, with no colors whatsoever.
• hmenu-3d.css — this layout adds pieces needed for a “3D” menu look, like the Windows 9x/2K menus. Includes “hmenu.css”.
• hmenu-extended.css — this layout is suitable for menus similar to Microsoft Office XP menus (flat menus and highlighted items have a thin border). Includes “hmenu.css”.

The above files do not normally need to be included manually; they are automatically included from the skin files (the ones that define colors). Currently there are 5 color themes (skin files) distributed with DynarchMenu:

• skin-xp.css — color theme that resembles Windows XP menus. Includes “hmenu.css”.
• skin-modern.css — color theme that resembles the menu colors from Mozilla Modern theme. Includes “hmenu-3d.css”.
• skin-win98.css — color theme that resembles the menu colors in Windows 98. Includes “hmenu-3d.css”.
• skin-win2k.css — color theme that resembles the menu colors in Windows 2000 (or in XP with “Classic Windows Theme”). Includes “hmenu-3d.css”.
• skin-system.css — color themes that uses the system colors on the end-user's machine. This is very appropriate for web-based applications. Includes “hmenu-3d.css”.
• skin-xp-extended.css — colors are similar to those in Windows XP menus, additionally the items in popup menus have a thin border like in Microsoft Office XP menus.

You can switch themes from our “Preferences” menu, to see how they look.

Writing your own CSS file

If you want to customize the CSS files, the method we recommend is that you write your customizations in a separate CSS file, similar to our default color themes. Doing so will ensure you that you won't have too much trouble if you ever upgrade your installation of DynarchMenu, because you will have the custom options in a separate file.

Following there is a small example. Note how it loads the original stylesheet first, and thereafter it customizes only the desired elements.

/* file: skin-custom.css */
/* loads layout: hmenu.css (suitable for flat menus) */
/* if you put your stylesheet in the same directory as the default
   stylesheets, then you can skip the path in the next line and only
   import "hmenu.css" (the paths are relative to the CSS file which
   issues the "import" command) */
@import url("/path/to/hmenu/hmenu.css");

/* Following you just need to define background, foreground and border
   colors and you wrote your own theme!  Easy, isn't it?  For complete
   examples see our default skins, for instance skin-xp.css. */

.dynarch-horiz-menu {
  background-color: #000; /* black for the horizontal bar */
  color: #f22;            /* with a red foreground */
}

.dynarch-horiz-menu .item {
  border-color: #000;     /* make sure items also have a black border */
}

.dynarch-horiz-menu .hover {
  background-color: #600; /* hovered items show a dark red bg */
}

.dynarch-horiz-menu .active {
  background-color: #822; /* a bit lighter bg for the active item */
}

.dynarch-horiz-menu .separator div {
  /* the vertical separator is a "3D" red line */
  border-left-color: #f22;
  border-right-color: #600;
}

/* etc. */