Editing a Web Site style

The Web Site style can be selected during project creation if you choose to Enable for Web Site Designer in the Choose a Web Style page of the project creation wizard. Once you have selected the Web Site style, a sample template is applied to your WebFacing pages that is consistent with the templates that are available for selection using the Web Site Designer tools. For more information, see the Web Site Designer documentation.

The Web Site style should be used if you have other Web applications that are using Web Site Designer to apply templates and organize the navigation of your Web site. The sample template supplied with the Web Site style does not include any navigation bars or site maps. You should not include these until support for running multiple WebFacing projects in a single browser session is available. The WebFacing project, however, can be included in the navigation of your Web projects and can be modified with the same look and feel as your Web site.
Note: If your application requires a relative URL, the Web Site Designer style may not be suitable.

To see the directory structure in which a style is stored for your project, select the Navigator tab. In the Navigator view, the paths to the styles directories for a project are: <project_name>\WebContent\webfacing\styles and <project_name>\WebContent\theme.

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 pages or directly using tools supplied in the IDE. The Style properties pages make it easier to visualize the modifications that are being made and show 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 choose Open With > CSS Designer.

If you want to edit the layout surrounding the application area and command keys, edit the user-defined files using Web Site Designer or directly by selecting the files in the file system within the \theme and \webfacing\styles\chrome directories.

To edit the files in the \theme directory using the IDE's CSS editor, right-click the CSS file that you want to edit and select Open With > CSS Designer. To edit the layout and the frame, right-click the WFB_blue.jtpl file and select Open With > Page Designer for Template. To edit the PageBuilder.jsp file to which the style and template files are applied, right-click the PageBuilder.jsp file in the \webfacing\styles\chrome directory and select Open With Page Designer. To edit the template file associated with PageBuilder.jsp from within Page Designer, in the Design view right-click Open Page Template With > Page Designer for Template. This is the same as opening the WFB_blue.jtpl file directly using the Page Designer for Template. To edit the CSS style file associated with the template from within Page Designer for Template, in the Styles tab group choose the Styles view and right-click blue.css > Edit. This is the same as opening the CSS file directly using the CSS Designer.

To edit the files for the layout and frame using Web Site Designer, activate the WebFacing projects view and expand your project, then expand the Style > Web Site folders. Right-click the .website-config file, and select Open With > Web Site Designer. To edit the template, switch to the Navigator view, then right-click the *.jtpl files under the \theme directory, and select Open With > Page Designer for Template. To edit the CSS style, right-click the *.css files under .\theme and select Open With > CSS Designer.

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 \styles\apparea
  • application area
  • command keys
Yes
  • PageBuilder.jsp
  • User-defined .css files

\chrome

\chrome\html

\theme

  • layout
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