Creating and modifying classic WebFacing styles

To create a new style in WebFacing you must have a project with a selected classic WebFacing style, which is a standard, uncustomized style. Modifications to the style are based on the selected style and apply only to the current project. To save the style, right-click your project and select Style > Save as and give the style a name. Once you have created a user-defined style, you can save subsequent modifications to the same style name. This style then becomes available for selection the next time you choose a Web style during project creation or the next time you select a style to replace the current project style. To replace a style, right-click your project and choose Style > Select Style. To see the directory structure for the location of a style within your project, select the Navigator tab. In the Navigator view, the path to the styles directory for a project is <project_name>\WebContent\webfacing\styles.

If you want to edit the style that is used for the application area and command key elements, edit the apparea.css file in the \apparea directory using the Style properties page or directly using tools supplied in the IDE. The Style properties pages make it easier to visualize the modifications that are being made and shows you how these changes apply to the DDS elements such as window and subfile records. The changes made through the Style properties pages are then applied to the corresponding style class names in the apparea.css file. To use the IDE's CSS editor, right-click the file that you want to edit and select Open With > CSS Designer.

If you want to customize the area surrounding the application area and command keys, modify the CSS file in the \chrome directory (not applicable to portlet styles). To change the layout of the page, edit the file PageBuilder.jsp, in \chrome\html. The command key section is defined in CmdKeys.jsp .

Properties for styles are stored in two separate directories of the styles folder inside the WebFacing project:
Files that can be edited for style changes Directory where files are stored Part of Web page they apply to Editable using properties pages?
apparea.css \apparea
  • application area
  • command keys
Yes
  • PageBuilder.jsp
  • CmdKeys.jsp
  • User-defined .css files
\chrome\html and \chrome
  • layout
  • command keys
No
Note: You do not need to reconvert your source files to have any style changes take effect.
Related reference
Web Settings
Related information
Customizing your WebFacing applications

Feedback