CSS Styling

Custom CSS

If you desire to edit or to make changes to any of the CSS that is applied by default, we recommend creating a css/custom.css file and making those customisations within it. This file is included after styles.css, allowing you to override any of the CSS defined within it. It will not be affected by future updates to the WHASOLS software.

  • We strongly recommend creating a css/custom.css file to contain or manage your additional custom CSS rules and not editing css/styles.css directly because it will make updating a way easier.
  • You may also wish to consider creating a child theme.

Using Font Awesome

To use Font Awesome icons, you can include the latest Font Awesome release shipped with WHASOLS by including the line below within the section of your template:

<link href="{$WEB_ROOT}/assets/css/fontawesome-all.min.css" rel="stylesheet">


Or Use Only (System will add the current theme paths automatically)

For CSS With Parameters:

{assetPath file='custom.css' media="print" onload="this.media='all'"}

For CSS Without Parameters:

{assetPath file='custom.css'}

For JS With Parameters:

{assetPath file='custom.js' async=''}

For JS Without Parameters:

{assetPath file='custom.js'}


Incase of URL or /templates added in asset Path as mentioned below then system will not add current texmplate path

{assetPath file='https://yourdomain.com/custom.css'}

Themes, in which the above line is not included, it will have it injected in these themes automatically. If you wish to avoid this behaviour, include the following line:

<--/css/fontawesome-all.min.css -->