How to configure your Theme settings

Summary

This guide provides step-by-step instructions for configuring the Theme settings in your application, including colors, 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 color picker tool, such as HTML Color Codes, to select colors for your theme. After choosing a color, copy the color code and paste it into the application settings. The color 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 Color Settings

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

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

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

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 colors, images, and fonts.