Web Terminal Styling

As Green Screens 5250 Web Terminal is web based, it's UI is pure HTML meaning 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 predefined themes and customize it by adding our own colors
  • 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.

In web admin console, use header customization box to add custom CSS styling. Header is global configuration element not tied to specific connection configuration. Here we can add 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, theme-gray-oia)

      <link rel="stylesheet" href="css/as400_gray.css" type="text/css" />
    
  • commodore64 - blueish color theme (CSS theme-blue, theme-blue-status)

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

Theme can be further customized by adding CSS class overrides to header script in web admin console.

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

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

Custom themes by host

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

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>