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 widget toolbars for Process Portal spaces

The widget toolbar is the part of a widget that contains the title, the context menu icon (down arrow), and the minimize and maximize icons. You can customize widget toolbars to change the icon images used in your spaces.

Here is an example of a basic widget toolbar:

When you hover over the toolbar, a different image is displayed. When you hover over an icon in the toolbar, yet another toolbar image is displayed. The default and hover variations of the icons and toolbars are found in Sprite_01.png. (For more information about sprites and their uses see Create custom images.)

The toolbar icons consist of an arrow for the context menu, a separator, a minimize and a maximize icon. When minimized or maximized, the icon for the current mode is replaced with a restore icon. Each icon has three images:

The toolbar icons are controlled by CSS rules that you can modify to hide icons or provide different icons for these parts of the toolbar. A number of CSS rules for the minimize, maximize, restore and menu icons and their hover states are contained in the webDAV_folder/public/themes/bspaceTheme/theme.css file. These rules refer to the relative path, webDAV_folder/public/themes/bspaceTheme/images/Sprite_01.png.

To customize your toolbar:

  1. Follow the steps to create your own style, copying an existing style folder and renaming it, for example, to customStyle.
  2. Put a copy of Sprite_01.png in your custom style folder. You can make updates to this sprite following the steps for creating your own images.
  3. Open the customStyle.css file and modify the rules to customize your widget toolbar.

The following list includes common rules that you can customize.

Maximize icon appearance

The following rule controls the normal appearance of the maximize icon: 

  
.customStyle .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1300px; }
The addition of bspaceOverEditBar to the bspaceMaxIcon class name controls the icon that is used when you hover over the toolbar. 
.customStyle .bspaceOverEditBar .bspaceMaxIcon { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1250px; }

The hover modifier is used to control the orange icon used when you hover over the maximize icon. 

.customStyle .bspaceMaxIcon:hover { 
background-image: url(./Sprite_01.gif); 
background-position: 0px -1350px; }

Minimize icon appearance

The following rules control the appearance of the minimize icon in normal, toolbar hover, and icon hover states: 

 .customStyle .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1450px; } 
.customStyle .bspaceOverEditBar .bspaceMinIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1400px; } 
.customStyle .bspaceMinIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1500px; }

Restore icon appearance

The following rules control the appearance of the restore icon in normal, toolbar hover, and icon hover states: 

 .customStyle .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1600px; } 
.customStyle .bspaceOverEditBar .bspaceRestoreIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1550px; } 
.customStyle .bspaceRestoreIcon:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1700px; }

Separator appearance

The following rules control the appearance of the separator graphic in normal and toolbar hover states: 

 .customStyle .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1900px; } 

.customStyle .bspaceOverEditBar .bspaceSeparatorIcon { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1850px; }

Context menu down-arrow icon appearance

The following rules control the appearance of the context menu down-arrow icon in normal, toolbar hover, and icon hover states: 

 .customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1100px; } 

.customStyle .bspaceTheme .bspaceOverEditBar a.lotusActionMenu { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1050px; } 

.customStyle .bspaceTheme .lotusWidget2 a.lotusActionMenu:hover { 
background-image: url(./Sprite_01.png); 
background-position: 0px -1150px; }

Widget toolbar title color

For readability, you might also want to modify the color of the widget title displayed in the widget title bar. 

.customStyle .decoration-titlebar { 
color: #FFFFFF; }

After you have modified the customStyle.css file, save it, and upload your custom style to the WebDav folder.

After making all of the modifications in the example, the widget toolbar has the following appearance depending on the state:

Create styles for Process Portal spaces