Skip to main content

Color and Appearance Settings

In this section, you have the option to set appropriate colors for the application's appearance, for various sections and parts of the application. You can also try different fonts that best suit your needs. During the configuration, you will see the desired changes directly in the application preview. If you are using a watermark, ensure its transparency is set so as to maintain good readability of the map backgrounds.

You have the option to set these colors in the application:

  • Primary Color - Main - This color is used to highlight steps in the configurator and color buttons for switching between steps (the "Back" button and the "Next Step" button).
  • Primary Color - Light - This color is used as a lighter shade of the main color, e.g., for unfinished steps in the configurator.
  • Primary Color - Dark - This color is used as a darker shade of the main color.
  • Text Color - This color is used for text in the application.
  • Background Color - This color is used as the background in the configurator.
  • Card Color - This color is used as the background in boxes and cards (such as in the help section).
  • Secondary Card - This color is used for pop-up windows with interactive help.
  • Success - Color - This color is used in the dashboard to display prices and grants.
  • Info - Color - This color is used in informative pop-up messages.
  • Warning - Color - This color is used in warning messages.
  • Negative / Error Color - This color is used in error messages and in the dashboard to display negative values in graphs.
  • Positive Color - This color is used in the dashboard to display positive values in graphs.

You can select a color either by clicking on the desired color and finding the suitable shade, or you can enter the exact HEX code of the color, for example, white color has the HEX code "#FFFFFF". Using the "Reset" button will restore colors to the default values.

During the color configuration, you will see the desired changes directly in the application preview. You can also switch to different parts of the application, such as "Introduction", the "Address" step, and the "Dashboard" step. You can switch by clicking on the desired area at the top of the screen:
image info

Application Font​

In this section, you can set the application's font. Use the selector to choose the desired font, and you can also use the search field to enter part of the font name or the entire font name and select the desired font from the filtered options.

Logo in the Map Corner​

You can add your logo to the lower left corner of the map. Insert the URL of your logo into the "Logo URL in the Map Corner" field, and the logo will be displayed in the lower left corner of the map in the application.

Watermark Over the Map​

In this section, you can enable/disable a watermark that will be displayed over the map with the chosen transparency.
image info

Insert the URL of the selected image into the "Watermark URL" field, which will be displayed as a watermark over the map. In the "Watermark Opacity" option, you can set the opacity of the watermark.

Setting the Introductory Image in the Application​

In the "Introduction" section, you have the following options:

  • You can skip the introductory step of the application by checking this button, and the application will start at the address entry step.
    image info

  • You can set the appearance variant of the introductory step by selecting from the offered options. The variant preview will be immediately displayed on the right side of the screen.
    image info

  • You can set any image in the introductory step by inserting the URL of the image:
    image info