Customising the CSS

Customising the CSS

Overview

The HelpMaster web portal colours are determined by values in the CSS files which can be edited for a customized colour theme.

The CSS files for the web portal are located in a directory similar to:

C:\inetpub\HelpMaster\HelpMaster Web Site\wwwroot\css

This may be different according to where you installed HelpMaster.

The CSS hierarchy

The CSS of the HelpMaster web portal is:

  • Bootstrap v4.3.1.css

  • Inspinia.css

  • HelpMaster.css

  • User.css

The default colours

For the most part, the default HelpMaster web portal colour themes matches the default colour values and naming convention of the Inspinia default styles which are:

CSS label Colour Colour value
Default Grey
#e7eaec
Success Blue
#1c84c6
Warning Yellow
#f8ac59
Primary Green
#1ab394
Info Teal
#23c6c8
Danger Red
#ed5565

Customising the colours

Approach 1

Do a global search/replacing on the file “Inspinia.css” for the values in the table above, with your desired colours

Approach 2

Over-ride CSS elements in User.css

eg. If you wanted all “Success” panels to have a purple border, you could override the default css int User.css with this…

.panel-success {
    border-color: #c61c1c;
}

    .panel-success > .panel-heading {
        background-color: #c61c1c;
        border-color: #c61c1c;
        color: #ffffff;
    }

This would result in…

CSS Customization example