IBM BPM, V8.0.1, All platforms > Customize and rebranding interfaces > Customize Process Portal > Customize Process Portal spaces > Create and customizing styles
Create custom images for Process Portal spaces
You can create custom images to customize the appearance of controls, backgrounds, and borders in your space.
Many of the images used for controls, borders, and backgrounds are combined into a sprite. Grouping the images together in a sprite reduces the number of server requests that are required to populate the page with images. The default sprite, Sprite_01.png, is provided and is found in the WebDAV folder at public/themes/bspaceTheme/images.
The images in a sprite can be related to each other, dependent upon each other, or independent of each other. When you customize a sprite, you do not need to update all the images that are related to each other. However, dependent images must be updated together.
For example, a scalable button might consist of three parts (left, right, and center) all of which must be updated together.
The Sprite_01.png file contains images for tabbed navigation and widget toolbar icons. This file contains a number of images that are part of the space theme. Any modifications that you make to this file will apply to all spaces and styles across the space. If you want to modify the look of all spaces, create a theme rather than directly modifying any of the elements of the theme.
To create custom images to use in your spaces, it is advisable to keep them together in a sprite. The simplest method
is to copy the source for an existing sprite, such as Sprite_01.psd, modify it, and save the modified file in .png format.
The .psd source for the default set of sprites
is available for download on the 
support site. After you have the new sprite
in place, modify the CSS rules for that part of the user interface to ensure that the changes apply only to the related style.
The following table describes the images in the Sprite_01.png file. Images that are dependent upon or related to other images are noted in the description.
| Image | Description |
|---|---|
|
|
01 - Mode tab chevron – down - [Related to image 02] |
|
|
02 - Mode tab chevron – up - [Related to image 01] |
|
|
03 - Mode tab left (bidi LTR) - [Dependency on image 04, 05, 06, 07] |
|
|
04 - Mode tab right (bidi LTR) - [Dependency on image 03, 05, 06, 07] |
|
|
05 - Mode tab center, repeating - [Dependency on image 03, 04, 06, 07] |
|
|
06 - Mode tab right (bidi RTL) - [Dependency on image 03, 04, 05, 07] |
|
|
07 - Mode tab left (bidi RTL) - [Dependency on image 03, 04, 05, 06, 07] |
|
|
08 - Add page icon – normal - [Related to image 09] |
|
|
09 - Add page icon – hover - [Related to image 08] |
|
|
10 - Page tab section background |
|
|
11 - Page tab dropdown – hover - [Related to image 12] |
|
|
12 - Page tab dropdown – normal - [Related to image 11] |
|
|
13 - Selected page tab - left (bidi LTR) - [Dependency on image 15, 17] |
|
|
14 - Selected temporary page tab - left (bidi LTR) - [Dependency on image 16, 17] |
|
|
15 - Selected page tab - center, repeating - [Dependency on image 13, 16] |
|
|
16 - Selected temporary page tab - center, repeating - [Dependency on image 14, 18] |
|
|
17 - Selected page tab - right (bidi LTR) - [Dependency on image 15, 13] |
|
|
18 - Selected temporary page tab - right (bidi LTR) - [Dependency on image 16, 14] |
|
|
19 - Page tab divider |
|
|
20 - Actions menu dropdown twistie – normal - [Related to image 21] |
|
|
21 - Actions menu dropdown twistie – hover - [Related to image 20] |
|
|
22 - Widget menu dropdown twistie - widget border focused – [Related to image 23, 24, 25] |
|
|
23 - Widget menu dropdown twistie – normal – [Related to image 22, 24, 25] |
|
|
24 - Widget menu dropdown twistie – hover - [Related to image 22, 23, 25] |
|
|
25 - Widget menu dropdown twistie – pressed - [Related to image 22, 23, 24] |
|
|
26 - Maximize Widget - widget border focused - [Related to image 27, 28] |
|
|
27 - Maximize Widget – normal - [Related to image 26, 28] |
|
|
28 - Maximize Widget – hover - [Related to image 26, 27] |
|
|
29 - Minimize Widget - widget border focused - [Related to image 30, 31] |
|
|
30 - Minimize Widget – normal - [Related to image 29, 31] |
|
|
31 - Minimize Widget – hover - [Related to image 29, 30] |
|
|
32 - Restore Widget - widget border focused - [Related to image 33, 34, 35, 36, 37] |
|
|
33 - Restore Widget – normal - [Related to image 32, 34, 35, 36, 37] |
|
|
34 - Restore Widget - normal (bidi RTL) - [Related to image 32, 33, 35, 36, 37] |
|
|
35 - Restore Widget – hover - [Related to image 32, 33, 34, 36, 37] |
|
|
36 - Restore Widget - hover (bidi RTL) - [Related to image 32, 33, 34, 35, 37] |
|
|
37 - Restore Widget - widget border focused (bidi RTL) - [Related to image 32, 33, 34, 35, 36] |
|
|
38 - Widget control divider - widget border focused - [Related to image 39] |
|
|
39 - Widget control divider – normal - [Related to image 38] |
|
|
40 - Blank page button - left – hover - [Dependency on image 41, 42, 43, 44, 45, 46, 47, 48] |
|
|
41 - Blank page button - left – normal - [Dependency on image 40, 42, 43, 44, 45, 46, 47, 48] |
|
|
42 - Blank page button - left – pressed - [Dependency on image 40, 41, 43, 44, 45, 46, 47, 48] |
|
|
43 - Blank page button - center – hover - [Dependency on image 40, 41, 42, 44, 45, 46, 47, 48] |
|
|
44 - Blank page button - center – normal - [Dependency on image 40, 41, 42, 43, 45, 46, 47, 48] |
|
|
45 - Blank page button - center – pressed - [Dependency on image 40, 41, 42, 43, 44, 46, 47, 48] |
|
|
46 - Blank page button - right- hover - [Dependency on image 40, 41, 42, 43, 44, 45, 47, 48] |
|
|
47 - Blank page button - right- normal - [Dependency on image 40, 41, 42, 43, 44, 45, 46, 48] |
|
|
48 - Blank page button - right- pressed - [Dependency on image 40, 41, 42, 43, 44, 45, 46, 47] |
The following table describes the images in the Sprite_Style.png file. This file contains images for the banner area, widget toolbar, and horizontal portions of the widget border.
| Image | Description |
|---|---|
|
|
01 - Footer |
|
|
02 – Banner action link separator |
|
|
03 - Repeating banner image - lower left banner section |
|
|
04 - Non-repeating image - lower right banner section |
|
|
05 - Repeating banner image - upper left banner section |
|
|
06 - Non-repeating image - upper right banner section |
|
|
07 - Widget border - lower left corner |
|
|
08 - Widget border - lower horizontal |
|
|
09 - Widget border - lower right corner |
|
|
10 - Widget border - header - focus/hover state |
|
|
11 - Widget border - upper left corner |
|
|
12 - Widget border - header - normal state |
|
|
13 - Widget border - upper right corner |
The following table describes the images in the Sprite_Style_vertical.png file. This file contains images for vertical portions of the widget border.
| Image | Description |
|---|---|
|
|
01 - Widget border Vertical Left |
|
|
02 - Widget border Vertical Right |
Sprite_Style.png and Sprite_Style_vertical.png are specific to a space theme, and should be modified for each style. Styles are found in the WebDAV folder at /public/themes/bspaceTheme/spaceStyles. By convention, the name of the style is included in the name of the sprite.
For example, in the banking style folder, the sprite files are called Sprite_Banking.png and Sprite_Banking_vertical.png.
Create and customizing styles for Process Portal spaces
Related tasks:
Customize tab navigation for Process Portal spaces