Customizing menus for Heritage Process Portal spaces

Spaces include menus that present users with options. These menus are based on a standard dijitMenu implementation that is provided by the Dojo toolkit. You can customize the appearance of these menus by modifying rules in the cascading style sheet (CSS) file of your custom style.

Before you begin

You must have a local, renamed copy of an existing style folder. The CSS file that you modify to customize your menu is contained within this new folder.

About this task

By default, the menus in a space look similar to the one shown in the following example:
The graphic shows a drop-down menu, with the Edit Settings menu selection highlighted.

You can customize the color of the borders, text, and background for menus in your spaces by updating specific rules that govern the appearance of different elements.

The following diagram and list highlight the different elements that can be customized, and the related attributes in the existing CSS rules.
The graphic is a diagram of the customizable elements of a menu. Each of the elements is described in the list that immediately follows the graphic.
  1. Menu border - Governed by dijitMenu
  2. Cleared menu item - Governed by dijitMenuItem
  3. Menu item separator for the upper part of an item - Governed by dijitMenuSeparatorTop
  4. Menu item separator - Governed by dijitMenuSeparator
  5. Menu item separator for the lower part of an item - Governed by dijitMenuSeparatorBottom
  6. Selected menu item - Governed by dijitMenuItemSelected

Example

The following example code demonstrates how the menus can be restyled to provide a different color scheme. In the example a dark gray color scheme is used instead of the default white color scheme.

The graphic is supplemental information that shows the appearance of the menu after the example code is revised.
/* Menus */
.customStyle .dijitReset .dijitMenuItem {
background: none repeat scroll 0 0 #555555;
}

.customStyle.dijitReset .dijitMenuItem .dijitMenuItemLabel {
color: #EEEEEE;
}

.customStyle.dijitMenu .dijitReset .dijitMenuSeparator{
background-color: #444444;
}

.customStyle.dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorTop{
margin: 0px 0px 0px 0px;
border-bottom: #444444 1px solid;
}

.customStyle.dijitMenu .dijitReset .dijitMenuSeparator .dijitMenuSeparatorBottom{
margin: 0px 0px 0px 0px;
border-bottom: #555555 1px solid;
border-top: #404040 1px solid;
}

.customStyle.dijitPopup .dijitMenu {
border: 1px solid #444444 !important;
}

.customStyle.dijitMenu .dijitMenuItemSelected {
background-color: #ffdda8 !important;
}

.customStyle.dijitMenu .dijitMenuItemSelected .dijitMenuItemLabel{
color: #333333 !important;
}

What to do next

Upload the customized style to the WebDav folder. See Uploading custom styles for Heritage Process Portal spaces.