IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Create and customizing styles > Create styles
Customize menus for 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.
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.
By default, the menus in a space look similar to the one shown in the following example:
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.
- Menu border - Governed by dijitMenu
- Cleared menu item - Governed by dijitMenuItem
- Menu item separator for the top of an item - Governed by dijitMenuSeparatorTop
- Menu item separator - Governed by dijitMenuSeparator
- Menu item separator for the bottom of an item - Governed by dijitMenuSeparatorBottom
- 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.
/* 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.