Modifying style sheet definitions for iSeries Web components

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 iSeriesWebComponents.css style sheet file contains style definitions that pertain exclusively to the iSeries Web components that you insert in a JSP file.

As a general rule, you should create a new CSS file and copy into it the style definitions from the iSeriesWebComponents.css file that you want to change, rather than changing the iSeriesWebComponents.css file. Then, if this style sheet is replaced by updates provided for the product, your style changes are not overwritten.

  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.
    3. A CHARSET statement is automatically added for you in the file, and the default value is based on the character encoding value that you specified in Windows > Preferences > Web and XML > CSS Files. If you want your Web application to support UTF-8 encoding, you can change the default value in the preferences or change the CHARSET statement in the CSS file, for example @CHARSET "UTF-8";.
  2. Double-click iSeriesWebComponents.css in the theme > iSeriesWebComponents folder, to open it in the editor view.

    The source view for a CSS file opens in a frame on the right within the editor view, and a preview area opens 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 Label Web component, copy the following lines into your new CSS file:

    /* styles of a WLabel */
    .iwLbl {
        font-family: Arial, Helvetica, sans-serif;
    }

  4. Click .iwLbl 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 color of the text for the font definitions:
    1. Click Fonts in the left frame.
    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 style definition for the Label Web component and to view the effect in the preview area.
  6. Select File > Close to close the style sheet and to save your changes when prompted.
Note: The iSeriesWebComponents.css file is located in the iSeriesWebComponent folder within the theme folder. Some of the style definitions include links to images that are contained within an images folder within the iSeriesWebComponents folder. If you copy a style definition that includes a link to the images folder, you need to update the link to the image. For example, a link to an image in the iSeriesWebComponents.css file appears as:

background-image: url("images/b1.gif");

Since the new CSS file is contained in the theme folder, and not in the iSeriesWebComponents folder, the link to the image needs to be changed as follows to ensure that the image appears:

background-image: url("iSeriesWebComponents/images/b1.gif");

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.