Web Terminal Styling

As Green Screens 5250 Web Terminal is web based, its UI is pure HTML, which means an easy customization. By using custom CSS styling it is possible to create custom themes for example for different environments.

There are two basic approaches:

• Use one of the predefined themes and customize it by adding your own colors; change theme name inside CSS and use programmatic approach to change the theme.
• Use scripting capabilities to add custom CSS classes to main terminal DIV elements, later create color schemes for those classes. This will enable different colors for different environments.

Inside web admin console, use header customization box to add custom CSS styling. The header is a global configuration element not tied to specific connection configuration. Here we can add a link to custom CSS styles or to add some overrides.

Predefined themes

Except default standard black screen with 16 terminal colors themes, we provide two custom themes:

monochrome - gray background and dark letters (CSS theme-gray)

  <link rel="stylesheet" href="css/as400_gray.css" type="text/css" />

commodore64 - blueish color theme (CSS theme-blue)

<link rel="stylesheet" href="css/as400_blue.css" type="text/css" />

The theme can be further customized by adding CSS class overrides to header script inside the web admin console.

To activate the theme, the theme must be initialized with custom script by adding the following code to the footer input box inside web admin console.

<script>  
// listen for application startup event
$(window).on('greenscreens', function() {
   Tn5250.Application.setTheme('theme-gray');
});
</script> 

Custom themes by host configuration

To customize styling for different terminal host connections, we have to generate CSS class names based on UUID and optionally HOST value from Tn5250.Application.getConfig(). In that case, CSS name is a unique value based on UUID and HOST values from the login screen, and it is added to application config by default when the terminal is connected.

For an example, if UUID = 0 (zero)

In header box input customization styling for specific environment like shown in this example

<style>
.uuid_0 .tngrid, .uuid_0-oia{
    background: #1c2640;  
}
.uuid_0 tr td {
    border-bottom: 1px solid #1c2640;
}
</style>