Customize Logo and Colors

Question

Hi, I got a question where are the informations stored for the colors of the navigation pane and forms, I need to set them to Web Equiv colors.

Any ideas?

Regards
Ingemar

Answer 1

Update 2018

Starting with Adaxes 2018.1 the settings are available in the Web interface configurator. For details, have a look at the following tutorial: https://www.adaxes.com/tutorials_WebInterfaceCustomization_SetCustomLogoAndColors.htm.

Original

Hello Ingemar,

For information on how to change the color of the Navigation Bar and forms in Web Interface, take a look at Set Custom Logo and Colors (you need steps 5 and 6).

However, the Web Interface Configuration tool that is recommended to be used for color customization in the above Tutorial allows you to select a color using the standard Windows color picker and sets the color as a HEX color code, e.g. #A3AFC1. If you need to set the color to a certain specific Web Color (e.g. "green" or "blue", you will need to edit the configuration file for the Web Interface manually. However, you should keep in mind that such method of specifying colors is not interpreted correctly by the Web Interface Configuration tool, and each time you use the tool to configure the Web Interface, the values that are not set as HEX codes will be overwritten with default values. So, we suggest that you do such a modification on the final stage of your Web Interface configuration.

To implement such changhes:

1. On the computer where your Adaxes Web Interface is installed, open the folder for the Adaxes Web Interface site that you want to configure. By default, Adaxes Web Interface sites are installed to the following folders:

   • Administrators:
     C:\Program Files\Softerra\Adaxes 3\Web Interface\Admin\
   • Help Desk:
     C:\Program Files\Softerra\Adaxes 3\Web Interface\HelpDesk\
   • Self-Service:
     C:\Program Files\Softerra\Adaxes 3\Web Interface\SelfService\

2. Find the Web.config file and open it with any text editor.

3. Find the brandableUiElement XML element.

4. The brandableUiElement XML element contains several sub-elements that define colors for different parts of the Web Interface:

   • <add key="NavigationPanel.BackColor" value="#4F657E" /> - Navigation Panel, background
   • <add key="NavigationPanel.FontColor" value="#FFFFFF" /> - Navigation Panel, font
   • <add key="MainMenu.NoneSelected.BackColor" value="#A3AFC1" /> - Main Menu, background
   • <add key="MainMenu.NoneSelected.FontColor" value="#FFFFFF" /> - Main Menu, font
   • <add key="MainMenu.Selected.BackColor" value="#4F657E" /> - Main Menu, selected item, background
   • <add key="MainMenu.Selected.FontColor" value="White" /> - Main Menu, selected item, font
   • <add key="DefaultButton.BackColor" value="#D34C23" /> - Default Button, background
   • <add key="DefaultPane.BackColor" value="#ECEEF2" /> - Web Interface Form/Caption, background

5. The color for each element is specified by the value key. So, to change the color for an element, you need to specify the color in the key. For example, the following line sets the color for forms/captions to green:
   <add key="DefaultPane.BackColor" value="green" />

6. When done with modifications, save the file.

Comments

Thanks a lot