Changing the global styles

For explaining the global styles, we will walk through the change of background colors. Any other changes will be similar in procedure.

All standard colors are declared as Sass variables in the global.scss, which is imported in all template specific style files (therefore the variables can be reused, and a change of the variable value will automatically update all templates using it).

Note

A list of color names is available on W3Schools HTML Color Names and also a color picker on W3Schools HTML Color Picker.

  1. Download the global CSS file (see Global CSS) and open it.

  2. The background should be set to transparent, the heading color to black:

    $heading-color: black;
$heading-bg-color1: transparent;
$heading-bg-color2: transparent;
$table-header-bg-color: transparent;
$table-cell-bg-color: transparent;
$table-cell-bg-color-alt: transparent;

  3. Save the file.

  4. Upload the modified global.css back in visionCATS to updated it.

  5. Display a report in visionCATS (or refresh one already opened) to test the changes.

  6. For all tables, a lighter border will make reading easier:

    th, td {
  border: solid 1px gray;
  page-break-inside: avoid !important;
}

  7. Upload the modified global.css back in visionCATS to updated it.

  8. Display a report in visionCATS (or refresh one already opened) to test the changes.

  9. The report should now look like that:

../../../../_images/colorStyles.png