Customize ADC Screen Appearance with CSS

Owned by Darcy Curtin
Last updated: May 17, 2018
3 min read

The ADC screens are rendered in HTML, so you can use CSS to override some of the styling. All custom changes should be put in the NLINKCustom.css file only. Any other files are subject to replacement during an upgrade of the NLINK Server and so should not be modified.

The NLINKCustom.css file can be found (or created, if necessary) in the following directory under your Junot System installation: NLINK Server >> CoNNectors >> ADC5 >> Content

The examples show selectors you could put in your NLINKCustom.css to change the appearance of various screen elements.

These examples are not comprehensive. They are intended only to give you an idea of which elements to override. Please be aware that any such customization, particularly with regard to sizing, padding or other layout options, could have unexpected results, especially with responsive layout calculations.

Screen Sections

All the ADC screens have a header section and a main section. The logon screen has an additional message section at the bottom.

The default appearance is the blue screen on the left. The following entries in NLINKCustom.css result in the green screen on the right.

1. Header Section
/* Header Section */
div.callout.panel{
    background-color:#CCEFB3;
    border-color:#6BA342;
}
2. Main Section
/* Main Section */
.panel{
    background-color:#A8B2A0;
    border-color:#3A5924;
}
3. Message Section
/* Message Section */
div.alert-box.info{
    background-color:#6BA342;
    border-color:#3A5924;
}
.alert-box.info{
    background-color:#6BA342;
    border-color:#3A5924;
    color:white;
}

Logon Screen

Menu Screen

Transaction Screen

Screen Fields

Buttons

In addition to the button itself, you must consider the various states:

/* Buttons */
.button{
    background-color:#3A5924;
    border-color:#3A5924;
}
.button:hover, .button:focus{
    background-color:#2B421B;
    border-color:#2B421B;
}
.button[disabled], .button[disabled]:hover, .button[disabled]:focus{
    background-color:#4D7530;
    border-color:#4D7530;
}


Selected Text

Handling selected text in screen fields is highly browser-dependent. The default selector is as follows:

/* Selected Text */
::selection {
    background-color:#6BA342;
}

If that doesn't work, try also ::-moz-selection, ::-o-selection, ::-ms-selection, ::-webkit-selection, perhaps others.... Also, List Box controls ignore ::selection altogether. The selected text in the pulldown appears to be based on your Windows colors.

Grids

Grids are HTML tables, so there are several elements to consider. The following should get you started:

/* Grids */
table{
    background-color:#A8B2A0;
    border-color:#939C8C;
}
table caption {
    background-color:#3A5924;
    color:white;
}
table thead {
    background-color:#CCEFB3 !important;
}
tbody tr.even, tbody tr.alt, tbody tr:nth-of-type(even) {
    background-color:#C0CCB8;
}
tbody tr.odd, tbody tr:nth-of-type(odd) {
    background-color:#8ED958;
}
tbody tr:hover {
    background-color: #DAFFBF;
}
tbody tr.selected {
    background-color: #DAFFBF;
}