How to configure your Theme settings

Summary

This guide provides step-by-step instructions for configuring the Theme settings in your application, including colours, fonts, images, and logos. These settings define the visual aspects of the user interface across the application.

Note: Theme settings are applied globally and cannot be modified at the group or facility level.

Color Configuration

You can use any colour picker tool, such as HTML Colour Codes, to select colours for your theme. After choosing a colour, copy the colour code and paste it into the application settings. The colour code must begin with a #(e.g., #FB34HG).

Step-by-Step Guide

1. Access Theme Settings

1. From the Home page, go to the System Configuration module.
   
   
   
   
2. Click on Settings.
   
   
   
   
3. Select Manage Settings.
   
   
   
   
4. In the category dropdown, choose Theme Settings, then click Search.
   
   
   
   
5. To make edits, click Edit on the right side of each setting.

2. Image and Logo Settings

For each of the following, click Choose File, select your image, then click Save.

• Activity Tile Image: This image will display on activity tiles.
  
  
  
  
• Homepage Image: Sets the background image for the homepage.
  
  
  
  
• Membership Tile Image: Displays on membership tiles.
  
  
  
  
• Application Logo: Sets the logo for the application.
  
  

These images will appear on the client’s gym website homepage as shown in the screenshots below:

• Homepage Image
  
  
  
  
• Homepage Logo
  
  
  
  
• Activity Tile Image
  
  
  
  
• Membership Tile Image
  
  
  

3. Brand Colour Settings

1. Primary Brand Colour: Enter the desired colour code and click Save. This will apply the primary colour across the website (e.g., button backgrounds).
   
   
   
   
   
   

2. Secondary Brand Colour 1: Enter the colour code and click Save to set the secondary brand colour (refer to the screenshots below).
   
   
   
   
   
   

3. Secondary Brand Colour 2: Click Edit on the right side, enter the colour code, and click Save to set the second secondary colour.
   
   
   
   

4. Font Style Settings

Choose your preferred fonts for body text and headings.

1. Body Font Style: Click Edit on the right side, select one of the following options, and click Save:
   
   

   • Lato
     
     
     
     
   • Roboto
     
     
     
     
   • Open Sans
     
     
     
     

2. Heading Font Style: Click Edit on the right side, select one of the following options, and click Save:
   
   
   
   

   • Garage Gothic
     
     
     
     
   • Lato
     
     
     
     
   • Open Sans
     
     
     
     
   • Roboto
     
     
     
     
     

5. Footer Settings

1. Click Edit on the right side.
2. Enter footer content (such as information or navigation links) and click Save.
   
   

Your Theme configuration is now complete, and your chosen settings will apply globally across the application. The results should match the screenshots below, reflecting your selected colours, images, and fonts.

Note: As accessibility is impacted by clients' config, Accessibility compliance depends on having sufficient colour contrast. This is determined by the colours set in your settings. If you're unsure whether your chosen colours meet accessibility contrast requirements, you can give OpenPlay permission to adjust them as closely as possible to your original palette while ensuring compliance.