Summary
In this guide, we will show you how to configure the Theme settings which will be used for various visuals such as colours, fonts, images, logos etc...
To choose colours, you can use any colour picker tool such as the HTML Color Codes
With your mouse, select the colour that you want, copy the colour code and paste it into one of the application colour settings. They Must be entered with a # at the beginning. For example #FB34HG.
N.B: These settings can only be set at the Global Level. They cannot be overridden at the group or facility level.
Step-by-Step Guide
1. From the home page, go to the System Configuration module
2. Go to Settings
3. Go to Manage Settings
4. In the category drop-down, select the Theme Settings and click on search
To configure them, click on Edit on the right-hand side.
- Activity Tile Image
Click on Choose file and upload the desired image and click on Save.
- Homepage image
Click on Choose file and upload the desired image and click on Save.
- Membership tile image
Click on Choose file and upload the desired image and click on Save.
- Application logo
Click on Choose file and upload the desired image and click on Save.
The Home page Logo, Activity Tile Image, Membership tile image and home page image will appear on the home page of the client's gym website as per the screenshots below:
Homepage image
Homepage Logo
Activity Tile image
Membership Tile Image
- Application's primary brand colour
Add the desired colour code and click on save
This will set the primary colour on your website (see the purple buttons on the below screenshot).
- Application's secondary brand colour 1
Add the desired colour code and click on save.
This will set the secondary brand colour 1 on your website (see screenshot below).
- Application's secondary brand colour 2.
On the right hand side, click on edit.
Add the desired colour code and click on save
This will set the secondary colour 2 on your website (see screenshots below).
- Application's body font style
Click on Edit on the right-hand side and choose between the 3 options below and click on Save
- Lato
- Roboto
- Open Sans
- Application's footer (typically used to add information and navigation options at the bottom of web pages).
On the right-hand side, click on edit.
Enter the value and click on Save.
- Application's heading font style
Click on Edit on the right-hand side and choose between the 4 options below and click on Save
- Garage Gothic
- Lato
- Open Sans
- Roboto