Styling Your Layout

In this section:

When you create an HTML page in HTML Composer, the objects in the layout will display in your browser using the default browser styles. You can customize the appearance of your HTML page by adding a theme or template. You can also use the predefined templates available through the Template selector. The theme property is available from the Properties window of the DOCUMENT object.

Top of page

Adding a CSS or Script to the Layout

How to:

Cascading Style Sheets (CSS) or scripts can be added to your layout to determine the look of the webpage. This is a good way to quickly apply corporate styling to your layout or to assign global styling to a layout. It is also an easy method of assigning default styling to all elements in the entire layout with one action. Styling included in a CSS or script will display only in Preview mode.


Procedure: How to Add a CSS or Script to the Layout
  1. From the Insert menu, select CSS/Scripts.

    The Insert Web Files dialog box opens.

  2. Click the New button and navigate to the directory, in which your CSS or script resides. Select the file, and click Open.

    Note: You may also specify a fully-qualified URL or a relative URL that points to a stylesheet file or script file by entering it in the File name area. A fully-qualified URL must start with http:// or https://. A relative URL must start with a known context root that WebFOCUS uses, such as /approot/appname/scriptname.js.

  3. Add additional files if desired. Click OK to add the specified files.

Top of page

Setting HTML Page Properties


You can set properties for the HTML page you create in HTML Composer in the Properties tab of the Properties window.

Properties set for the HTML page will be inherited by most objects added to the layout. Once a style has been changed for an object in the layout, it cannot be styled with a template or theme. It is recommended that global styling of HTML page be set before properties are set for individual objects.

Reference: HTML Page Properties in the Properties Window

When the background of a report is selected, the Properties tab in the Properties window contains options that control the body of the HTML page.

Click a property to display a description of the selected property at the bottom of the Properties window.

Top of page

Customizing the Layout

All changes to your layout can be made in the Design view of HTML Composer or HTML editor. The changes made to a layout in an editor will be preserved when you reenter HTML Composer.