Page Comparison

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.

/* Header Section */
div.callout.panel{
    background-color:#CCEFB3;
    border-color:#6BA342;
}

...

/* 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

Image Modified

Menu Screen

Image Modified

Transaction Screen

Image Modified

Screen Fields

...

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

.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 */
::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.

Image Modified

Grids

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

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;
}

Image Modified

Related articles

...