Try OpenEdge Now
skip to main content
Customization Guide
Customizing the Business Process Portal look and feel : Customizing AppThemes
 

Customizing AppThemes

You can use an apptheme to change the look and feel of presentation pages — that is, the Task Details page, the Business Process Server Applications page and other pages in your applications. To customize the apptheme, you must modify the classes in the sbm_app01.css file in the apptheme01 directory. Changing the look and feel for an apptheme will modify all the pages in all your applications.
To customize the look and feel of pages in your applications for the Default form or JSP generated using XSL interface options:
1. Go to <App server specific folder>\sbm\bpmportal\css\apptheme01\sbm_app01.css.
2. Open sbm_app01.css with an external editor.
3. Make required changes in the appropriate classes. See the table below for information on apptheme classes.
4. Save the changes in the external editor you are using, and refresh.
5. The changes you have made are now displayed in the presentation pages of the applications.
Some of the more frequently used classes in the sbm_app01.css file are presented in the following table.
Table 11. AppTheme classes
Screen Element
Class name
Description
Application Page Body
.ApBody
Controls the fonts and page margins (HTML tag: Body).
Title
.ApSegTitle
Controls the title of the page (HTML tag: Text).
Text Field
.ApInptTxt
Controls the text boxes (HTML tag: Input).
Command Button
.ApScrnButton
Controls the command buttons on the page (HTML tag: Input).
Data Label
.ApSegDataLabel
Controls the labels of all user-defined dataslots (HTML tag: TD).
Data Value
.ApSegDataVal
Controls the content of all user-defined dataslots (HTML tag: TD).
General Label
.ApSegGenLabel
Controls the labels of all pre-defined system dataslots (HTML tag: TD).
.ApSegDataVal
Controls the content of all pre-defined system dataslots (HTML tag: TD).
Note: If you wish to change the images used in the apptheme01, then you should place the new images in the <App server specific folder>\sbm\bpmportal\css\apptheme01\images directory.