Modifying stylesheets

If you need to alter only a few screen elements, we recommend modifying the existing stylesheets of the default theme - theme01. The Task Details page, the Business Process Server Applications page and other pages in your applications use a different theme called apptheme01. The out of the box Business Process Portal uses the same look and feel for theme01 and apptheme01. However, you can retain the default theme01, and use another theme for all application pages. The utilities such as calendar invoked from these two pages also use apptheme01.

When you are modifying the stylesheets of theme01, ensure that apptheme01 is also correspondingly modified so as to maintain consistency.

The following sections describe various modules, attributes and variables you need to work on during the customization of the Business Process Portal.

The paths to css, buttons, icons and jsp files are specific to the application server.

Default CSS

Business Process Portal uses a number of stylesheets (.css files) listed in the folder:

<App server specific folder>\sbm\bpmportal\css\theme01

The main CSS style file is bm-all.css, which contains majority of application styles. The class names reflect the expected use. For example, class LogoBg is used to define style for logo background.

Buttons

The buttons use classes to define their style, and classes use images to define the look and feel. The classes are listed in the folder:

<App server specific folder>\sbm\bpmportal\css\theme01

and they use images listed in the folder:

<App server specific folder>\sbm\bpmportal\css\theme01\images

The image names reflect the expected use. For example, scrn_button.gif is used to show the normal state of screen button, scrn_button_dis.gif is used to show the disabled state, and scrn_button_hvr.gif is used to show the mouseover state.

If you replace any images for buttons, ensure that the original size is not changed.

Icons

The icons used in Business Process Portal are listed in the folder:

<App server specific folder>\sbm\bpmportal\css\theme01\images

The image names reflect the expected use. For example, icon_support.gif is used to show the support link icon.

If you replace any icons, ensure that the original size is not changed. Also verify that the icons displayed in the Business Process Portal are of the correct resolution.

JSP files

The individual pages of Business Process Portal and the popup windows are jsp files. The jsps files are located within their corresponding folders in the folder:

<App server specific folder>\sbm\bpmportal

The jsp file names reflect the expected use. For example, tasks.jsp and task_list.jsp are used to display list of tasks.