Summary
This guide walks you through configuring the Advanced Theme Settings for your application’s visual elements, including the dark background color, header background color, and secondary button style. Customizing these settings allows you to align the application’s appearance with your branding preferences, enhancing the user experience.
To select colors, you can use any color picker tool, such as HTML Color Codes. Simply choose your color, copy the hex color code (beginning with a #, e.g., #FB34HG), and paste it into the application’s theme settings.
Step-by-Step Guide
-
Access the System Configuration Module
- From the home page, navigate to the System Configuration module.
- From the home page, navigate to the System Configuration module.
-
Open Settings
- Select Settings within the System Configuration module.
- Select Settings within the System Configuration module.
-
Manage Settings
- Click on Manage Settings.
- Click on Manage Settings.
-
Select Advanced Theme Settings
- In the category dropdown, choose Advanced Theme Settings and click Search.
- In the category dropdown, choose Advanced Theme Settings and click Search.
-
Configure the Three Theme Options
- The following 3 theme options will appear:
A) Application's Dark Background Color
- Description: This setting customizes the background color for elements like the "Browse by Location" and "Browse by Time" boxes, as well as the calendar dates on the Activity Booking page.
-
How to Set: Enter your selected hex color code to set the desired background color. Example below: Black
How it will look online:
B) Application's Header Background Color
- Description: This setting changes the color of the main header across the application, such as the header on the top of the client’s website.
-
How to Set: Follow the same process to input a hex color code.
How it will look online:
C) Application's Secondary Button Style
- Description: The secondary button style applies to buttons when multiple actions are available on the screen. Options include Outline or Solid.
-
How to Set: Choose between Outline (shows an outlined button) or Solid (displays a filled button).
Outline will look like this:
Solid will look like this:
- The following 3 theme options will appear:
-
Save Your Settings
- After entering your selections, review them on the screen. If all settings appear correct, save your configurations to apply the changes to the application.
By following these steps, you can customize your application’s theme, providing a cohesive and personalized look that matches your branding preferences.