Set custom logo and colors

In this tutorial, you will learn how to set your company logo, website icon (favicon), and change the default colors of Adaxes Web interface.

  1. Open Adaxes Web interface configurator.

     How
    • On the computer where Web interface configurator is installed, open Windows Start menu.

    • Click Adaxes Web Interface Configurator.

    To configure the Web interface, you need to have the appropriate permissions.

     Permissions

    The permissions to configure the Web interface are delegated via security roles. By default, only service administrators have the appropriate permissions. To enable other users to configure the Web interface, grant them the corresponding permissions.

    To create a security role that grants the permissions to configure Web interface:

    • In Adaxes Administration console, right-click your Adaxes service, point to New and click Security Role.

    • Enter a name for the new security role and click Next.

    • On the Permissions step, click the down arrow embedded into the Add button and click Configure Web Interface.

    • Click Next and follow the steps in the wizard.

  2. In the top left corner, select the Web interface you want to customize.

  3. In the left navigation menu, click Logo and colors.

    To set the logo, in the Logo section, click Set.

    If you would like your logo to scale well on any resolution, you need to use a logo in the SVG (Scalable Vector Graphics) format. Another benefit of using an SVG logo is that you can replace its colors with theme-dependent colors. They dynamically adjust to the selected Web interface theme and are designed to look good on both, dark and light themes.

     How to use theme-dependent colors in SVG logo { #theme-colors}

    SVG images are constructed using XML elements that describe how the shapes of the image are drawn. The color of each element can be defined by the class attribute of that element. To apply theme-dependent colors, you need to use CSS classes provided by Adaxes in the elements of your logo.

    To view available theme dependent colors, click Details in the Logo section.

    You don't have to use theme-dependent colors for all elements of your logo. You can use them only for the elements that don't look clear enough on both themes.

    Favicon

    To set the icon, in the Favicon section, click Set.

    The file should be in the .ico format. The recommended dimensions of images are 16x16, 32x32, and 48x48 pixels.

    The icon is displayed in the tabs of the web browser.

     View screenshot { #collapse4}

    Colors

    In the Colors section, change the colors of Web interface elements.

  4. Save the changes.

    The settings in a section can be applied to other Web interfaces. For this purpose, in the top right corner of the section, click the down arrow button and then click Apply to other Web interfaces.

     View screenshot { #collapse3}