Updating style definitions in a style sheet file

When you create a dynamic Web project and select Default style sheet (CSS file) and iSeries Web Components Tag Library for the Web project features, the Master.css file and the iSeriesWebComponents.css file are included in the Web project. The Master.css file is located in the WebContent > theme folder, and the iSeriesWebComponents.css file is included in the WebContent > theme > iSeriesWebComponents folder.

The Master.css style sheet file contains a basic set of style definitions for HTML tags that can be used in HTML and JSP files.

  1. To create a new style sheet in the theme folder:
    1. Right-click the theme folder and select New > CSS File to open the New CSS File dialog box.
    2. Enter the name for the new CSS file in the File Name field and click Finish to create the file in the Web project and to open the file in the editor view.
  2. Double-click Master.css in the theme folder to open it in the editor view.

    The source view for a CSS file appears in a frame on the right within the editor view, and a preview area appears in a frame on the left. A Styles view also opens in the bottom left of the IDE. As you click each of the tag definitions in the source view, the preview area displays the effect of the style definition for that tag. At the same time, the Styles view is synchronized to the selected tag definition.

  3. Copy the style definitions that you want to change into your new CSS file. For example, if you want to change the style definition for the BODY tag, copy the following into your new CSS file:

    BODY
    {
        BACKGROUND-COLOR: #FFFFFF;
        COLOR: #333366;
        FONT-FAMILY: 'Times New Roman'
    }

  4. Click BODY in the source view of the style sheet to highlight the line, then right-click and select Edit to open the Set Style Properties window.
  5. To change the font definition for BODY:
    1. Click Fonts in the left frame.
    2. Click Times New Roman under Font family and click Remove.
    3. Click sans-serif in the right field and click Add.
  6. To change the background color for BODY:
    1. Select Background (beneath Fonts).
    2. Click the Color button, select a basic color in the palette, and click OK.
    3. Click OK to apply the style definition changes to the BODY tag and to view the effect in the preview area.
  7. Select File > Close to close the style sheet and to save your changes when prompted.

If you created a template file that included links to existing style sheets, you can apply your new style sheet to the template file:

  1. Double-click the template file to open it in the editor view.
  2. Click the Source tab to display the source for the template file.
  3. Locate the LINK tags for the style sheets that have been applied to the template file. These tags are between the <HEAD> and </HEAD> tags in the source view.
  4. Select your new style sheet file in the theme folder, and drag and drop the file to the line in your template file that you want to insert it before. This action automatically adds a link to your new style sheet.

The order of the style sheet links in the file determines the order in which the style definitions are applied. Style definitions in the first style sheet that is linked in a file are superseded by style definitions in the next style sheet that is linked in the file. If a style definition in a style sheet is for an element that is not in any other style sheet, that style definition is used. This cascading effect of the style sheets is based on the order in which they occur in the file.

If you do not use a template file to enhance the design and style of your JSP files, you can apply the style sheet to individual JSP files. Use the same steps described above for applying the style sheet to a template file.