As the fields of the screens are captured, the terminal attributes of the ClearPath application are captured. The ClearPath ePortal software assigns Cascading Style Sheet (CSS) classes to each attribute or combination of attributes. The captured attributes include:

You can configure ePortal Developer so that CSS classes are included at runtime for each field on your web page. The CSS classes correspond to the terminal attributes that were captured. In order for the CSS classes to be included, all of the following must be true:

You can use CSS to map how the various attributes from the captured terminal application appear on the web page. For more information on CSS, refer to http://www.w3schools.com/css/.

How to Style Your Web Page

There is a CSS class for each terminal attribute or combination of terminal attributes. In addition, for UTS, there is a class for each color, for both background and foreground. The color class names are of the form bg_<color> and fg_<color>, where <color> is one of the colors listed above.

These classes are defined in one or more CSS files; the location of the CSS file(s) depends on the project type:

If you wish to change the defaults that ePortal provides, you can use Visual Studio to edit the appropriate CSS file to define you own style rules. In this way, you can map the terminal attributes to the style that appears on the web page. Below are a few simple examples.

Example: Configure Different Font for Bright

By default, the Bright terminal attribute is mapped to bold, black text, as follows:

.t27Bright {
    color:black;
    font-weight:bold;
}
…
.utsBright {
    color:black;
    font-weight:bold;
}

You can configure the bright text from the terminal to be rendered in a different font to make it stand out even more than just being bold. To do this, add the following rule to the end to the appropriate CSS file. In this case, the font-family rule is added to the already existing rules for color and font-weight.

.utsBright,
.t27Bright {
    font-family:Andale Mono;
}

Example: Eliminate Colors (UTS only)

Even though ClearPath ePortal has captured color information, you can ignore this information and simply present all text as black text on a white background in your web presentation. To do this, you can add the following rules to the end of the appropriate CSS file; by adding these rules last, they will override the default definitions for the bg_color and fg_color classes:

    .fg_Black, 
    .fg_Red, 
    .fg_Green, 
    .fg_Yellow, 
    .fg_Blue,
    .fg_Magenta,
    .fg_Cyan,
    .fg_White {
        color:Black;
    }

    .bg_Black,
    .bg_Red,
    .bg_Green,
    .bg_Yellow,
    .bg_Blue,
    .bg_Magenta,
    .bg_Cyan,
    .bg_White {
        background-color:White;
    }

Example: Remap a Foreground/Background Color Combination (UTS Only)

If you always use a red foreground on green background for error messages in your UTS application, you can define a CSS rule to remap the foreground and background colors. By default, the definitions for the bg_Green and fg_Red classes are:

    .bg_Green {
        background-color: Green;
    }
    .fg_Red {
        color: Red;
    }

However, if you also use a green background with a different color foreground for non-error cases, you might want to leave the bg_Green class definition unchanged. Instead, you can define a more specific CSS rule that only applies when the background green and foreground red classes both occur together. For example:

    .bg_Green.fg_Red {
        background-color: white;
        color: red;
        font: bold large serif;
    }