Extension Tutorial 3 - Application Styles v4.2.2

About this tutorial

Objectives

This tutorial teaches you how to apply styles.

Prerequisites

Tutorial 2 -  Screen and Field Identification

Before attempting this tutorial, please complete all of the steps in Tutorial 2.

Outline

Default Directories

Application Level Styles

How to set Application Styles (Group Box header)

Function Keys

Basic Font

Input Field

Centre Screen Content

Outer Div Style (Centred Content)

Menus

Dropdown Box

Popups

Text Box

Subfile Header

Subfile Body

Datatable - Download Button Panel

Datatable - Download Buttons

Application Background Image/Color

Default Directories

Note: The directories, images, and files used are based on a specific install of aXes. You will need to change these based on your own project.

Image path

   /ts/skins/images

Install Path for aXesJSM

   /axes421jsm/jsm/instance/www/instance/htdocs/ts

Web route directory aXesJSM

   /axes421jsm/jsm/instance/www/instance/htdocs

Install Path for aXesW3(older version of aXes)

   /axes421/ts

Web route directory aXesW3 (older version of aXes)

   /axes421/

Application Level Styles

  1. How to set Application Styles (Group Box header)

    2. This technique allows you to change the header style for the group box extension.

    1. Define a new Application style with a meaningful name. For example, ‘Card Header’

    2. Set the ‘styleFor’ property to ‘HTML element’
    3. For the class set it to ‘.md-card__header’

      4. Note: There are two underscores between card and header.

    4. Edit the Application Styles and set the following attributes:

      5.  Background-colour: !important

       Height: 15px

       min-Height: 15px!important

      Note: In this case, ‘!important’ overrides the Material Design style, which is applied to the group box header.

    5. Save your changes. The group box header will now pick up the new style.

  2. Function Keys

    3.  Name:         FButtonStyle

     StyleFor:     HTMLElment

     htmlTag:     button[id^="fkeyPanel-button"]

     Style:           Font-Size: larger!important

                         Background-Color: #oob050!important

                         Color: #ffff00!important

  3. Basic Font

    4.  Name:         Basic Font

     StyleFor:     HTMLElment

     htmlTag:     dummy, div#terminalContent *:not(.material-icons):not(.mdc- floating-label--float-above)

     Style:           Font-Size: 10

                         Font-Family: Verdana (non-proportional fonts: Lucida Console, Serif, monospace, Courier New)

                         Color: #c0504d

  4. Input Field

    5.  Name:         InputFieldBGrnd

     StyleFor:     HTMLElment

     htmlTag:     div.mdc-text-field

     Style:           Background-Color: #fdeada!important

  5. Centre Screen Content

    6.  Name:         CentreContent

     StyleFor:     HTMLElment

     htmlTag:     dummy, div#terminalInner

     Style:           Border-Left-Color: transparent

                         Border-Left-Style: Solid

                         Border-Left-Width: 1px

                         Border-Right-Color: transparent

                         Border-Right-Style: solid

                         Border-Right-Width: 1px

                         Margin-Left: auto

                         Margin-Right: auto

                         Width: 70%

  6. Outer Div Style (Centred Content)

    7.  Name:         OuterDivBackground

     StyleFor:     HTMLElment

     htmlTag:     dummy, div#terminalOuter

     Style:           Background-Color: #DD9D2B

  7. Menus

    8.  Name:         Menu Style

     StyleFor:     HTMLElment

     htmlTag:     #terminalContent .ax-terminal-5250menuitem span

     Style:           Color: #1F497D

  8. Dropdown Box

    9.  Name:         DropdownBox

     StyleFor:     HTMLElment

     htmlTag:     Select

     Style:           Background-Color: #fdeada!important

                         Background-Image: url(/ts/skins/images/other/blue/large/down-arrow_outline.png )

                         Background-Origin: Padding-box

                         Background-Position: right center

                         Background-Repeat: no-repeat

                         Background-Size: 16px 16px

  9. Popups

    10.  Name:         PopupStyle

     StyleFor:     HTMLElment

     htmlTag:     #win1.ax-terminal-window

     Style:           Background-Color: #fdeada

  10. Text Box

    11.  Name:         textbox

     StyleFor:     HTMLElment

     htmlTag:     div.mdc-notched-outline__idle, div.mdc-notched-outline

     Style:           Border-Color: white!important

  11. Subfile Header

    12.  Name:         Subfile Header

     StyleFor:     HTMLElment

     htmlTag:     div.md-sftable-header--full

     Style:           Background-Color: #fdeada

  12. Subfile Body

    13.  Name:         Subfile Body

     StyleFor:     HTMLElment

     htmlTag:     div.md-sftable--full

     Style:           Background-Color: #d99694

  13. Datatable - Download Button Panel

    14.  Name:         Download Button Panel

     StyleFor:     HTMLElment

     htmlTag:     div.dt-buttons.ui-buttonset

     Style:           Background-Color: #d99694

  14. Datatable - Download Buttons

    15.  Name:         Download Buttons

     StyleFor:     HTMLElment

     htmlTag:     button.dt-button,div.dt-button,a.dt-button,span.ui-button-text

     Style:           Font-Size: smaller

                         Height: 30px

                         Padding: 0px

  15. Application Background Image/Color

    16.  Name:         Background Image

     StyleFor:     Application Window

     Style:     Background-Color: #oob050

                         Background-Image: url(/ts/ts2/css/images/) !Important

                         Background-Origin: padding-box

                         Background-Repeat: no-repeat

                         Background-Size: 100% 100%