Customisation

Overriding Colours

The theme offers 14 additional colour schemes (15 in total including the default green):

  • Green: #55A79A;
  • Red: #BE3E1D;
  • Purple: #b771b0;
  • Pink: #CC164D;
  • Orange: #e67e22;
  • Blue: #00ADBB;
  • Pink: #c71c77;
  • Lime: #b1dc44;
  • BlueDark: #34495e;
  • RedDark: #a10f2b;
  • Brown: #91633c;
  • CyanDark: #008b8b;
  • Yellow: #D4AC0D;
  • Slate: #5D6D7E;
  • Olive: #808000;
  • Teal: #008080;
  • GreenBright: #2ECC71;

Each additional one has a separate .css file within the /css directory: ie. colour-COLOURNAME.css

These files can be used as an example of how to implement your own colour schemes.

Example - Add the following to your <head> tags below the

<!--Your custom colour override-->
<link href="css/colour-blue.css" id="colour-scheme" rel="stylesheet" />

NOTE: You will need to do this on all pages to implement site wide. The “colour-scheme” ID tag is only required if you want the jQuery colour switcher to be functionality. Quickest way to hide the colour switcher is to add .colour-switcher { display: none; } to your CSS.

If you are comfortable with using Sass it’s recommended to override the colour scheme by altering the $primary_colour variables and then recompiling the CSS, see the assets/scss/example-custom-colour.scss file for an example.