Apply your brand colours

Many aspects of the look and feel of the Client Portal can be modified to match your own brand guidelines, e.g. colours, fonts, formatting, etc. This is possible by amending the associated cascading style sheet (CSS).

Caution Changes made to the CSS are made at your own risk. Please ensure you have a backup of the default styles in case you need to roll back.

To modify the style:

  1. Navigate to the client folder, e.g. c:\webportal\client.
  2. Locate custom.css and take a copy, e.g. custom.css.bak.
  3. Open custom.css and edit as required. The default styles are shown below:

    4. footer {

        background: #FFFFFF;

        font-family: 'Open Sans', sans-serif;

    }

    body {

        background: #FFFFFF;

        font-family: 'Open Sans', sans-serif;

    }

    h1 {

      color: #6d6e71;

      font-weight: bold;

    }

    h2 {

      color: #6d6e71;

    }

    a {

      outline: 0;

      background-color: transparent;

      text-decoration: none;

    }

    a, a:visited {

      color: #e9510e;

    }

    a:hover {

      color: #e9510e;

      text-decoration: underline;

    }

    .logoLeftMargin {

        margin-top: 20px;    

        margin-left: 20px;    

        margin-right: 0px;    

        margin-bottom: 10px;

    }

    .logoRightMargin {

        margin-top: 10px;    

        margin-left: 0px;    

        margin-right: 20px;    

        margin-bottom: 10px;

    }

    .loginPad {

        padding-left: 40px;

        padding-right: 40px;

        padding-top: 40px;

        padding-bottom: 40px;

    }

    .sitePad {

        padding-left: 40px;

        padding-right: 40px;

        padding-bottom: 40px;

    }

    .milestonestyle

    {       

        font-weight:bold;

    }   

    .actionStyle

    {     

        font-weight:normal;

    }

    .btn-primary,

    .btn-primary:visited {

        background-color: #e9510e;

        border-color: #e9510e;

        color: #ecf0f1;

    }

    .btn-primary:hover,

    .btn-primary:active,

    .btn-primary:focus {

        background-color: #f25f1f !important;

        border-color: #f25f1f !important;

        color: #ecf0f1 !important;

    }

    .navbar-default {

      background-color: #323137;

      border-color: #323137;

      border-radius: 0;

      -webkit-border-radius: 0;

      -moz-border-radius: 0;  

    }

    .navbar-default .navbar-brand {

      color: #ecf0f1;

    }

    .navbar-default .navbar-brand > a {

      color: #ecf0f1;  

      text-decoration: none!important;

    }

    .navbar-default .navbar-brand:hover,

    .navbar-default .navbar-brand:focus {

      color: #e9510e;

    }

    .navbar-default .navbar-text {

      color: #ecf0f1;

    }

    .navbar-default .navbar-nav > li > a {

      color: #ecf0f1;

      text-decoration: none;

    }

    .navbar-default .navbar-nav > li > a:hover,

    .navbar-default .navbar-nav > li > a:focus {

      color: #e9510e;

    }

    .navbar-default .navbar-nav > li > .dropdown-menu {

      background-color: #323137;

    }

    .navbar-default .navbar-nav > li > .dropdown-menu > li > a {

      color: #ecf0f1;

      text-decoration: none;

    }

    .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,

    .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {

      color: #e9510e;

      background-color: #252525;

    }

    .navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {

      background-color: #252525;

    }

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,

    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

      color: #e9510e;

      background-color: #252525;

    }

    .navbar-default .navbar-nav > .active > a,

    .navbar-default .navbar-nav > .active > a:hover,

    .navbar-default .navbar-nav > .active > a:focus {

      color: #e9510e;

      background-color: #252525;

    }

    .navbar-default .navbar-nav > .open > a,

    .navbar-default .navbar-nav > .open > a:hover,

    .navbar-default .navbar-nav > .open > a:focus {

      color: #e9510e;

      background-color: #252525;

    }

    .navbar-default .navbar-toggle {

      border-color: #252525;

    }

    .navbar-default .navbar-toggle:hover,

    .navbar-default .navbar-toggle:focus {

      background-color: #252525;

    }

    .navbar-default .navbar-toggle .icon-bar {

      background-color: #ecf0f1;

    }

    .navbar-default .navbar-collapse,

    .navbar-default .navbar-form {

      border-color: #ecf0f1;

    }

    .navbar-default .navbar-link {

      color: #ecf0f1;

    }

    .navbar-default .navbar-link:hover {

      color: #e9510e;

    }

    @media (max-width: 767px) {

      .navbar-default .navbar-nav .open .dropdown-menu > li > a {

        color: #ecf0f1;

        text-decoration: none;

      }

      .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,

      .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {

        color: #e9510e;

      }

      .navbar-default .navbar-nav .open .dropdown-menu > .active > a,

      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,

      .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

        color: #e9510e;

        background-color: #252525;

      }

    }
  4. Save your changes.
  5. Log into the Client Portal to see the changes.