How to configure your Advanced Theme Settings?

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.

 

Screenshot_2022-08-08_at_16.15.37.png

Step-by-Step Guide

  1. Access the System Configuration Module

    • From the home page, navigate to the System Configuration module.

      System_Configuration.png

  2. Open Settings

    • Select Settings within the System Configuration module.

      Settings.png

  3. Manage Settings

    • Click on Manage Settings.

      Screenshot_2022-08-08_at_15.16.01.png

  4. Select Advanced Theme Settings

    • In the category dropdown, choose Advanced Theme Settings and click Search.

      Screenshot_2023-03-08_at_16.52.39.png

  5. Configure the Three Theme Options

    • The following 3 theme options will appear:

      Screenshot_2023-03-08_at_16.52.07.png

    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

      Screenshot_2023-03-08_at_16.53.46.png
      How it will look online:
      Screenshot_2023-03-08_at_16.56.52.pngScreenshot_2023-03-08_at_16.56.46.png
      Screenshot_2023-03-08_at_16.56.41.png



    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.

      Screenshot_2023-03-08_at_17.05.26.png
      How it will look online:

      Screenshot_2023-03-08_at_16.54.30.png

    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).

      Screenshot_2022-08-08_at_15.29.05.png

      Outline will look like this:

      Screenshot_2023-03-08_at_17.07.01.png
      Solid will look like this:

      Screenshot_2023-03-08_at_17.06.10.png

  6. 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.

Was this article helpful?
0 out of 0 found this helpful