Customizing the Zoomdata User Interface

When you install Zoomdata, the default UI settings are applied. These settings include: logo, favicon, header and footer, and so on. Zoomdata enables you to manage links to help content, customize copyright info, and change or remove the link to terms of use. To match the style of your company, you can also upload a custom .css file to modify the default Zoomdata skin. This article guides you in customizing the UI of the installed Zoomdata instance as required.

Access to the UI settings is done using the supervisor login credentials.

To start configuring the UI, click Customize UI .

TIP: To preview and save the configured UI settings in each section, click the Apply to Interface button at the top of the page.

MODIFYING THE APPLICATION TITLE

The application title is displayed on the tab of your browser window:

Figure 1

By default it is set to 'Zoomdata'. You can change it by removing the default value and specifying the required one in the Page Title field. This field is required.

Figure 2

CONFIGURING HELP CONTENT SETTINGS

You can configure the links to be displayed in the help menu and change their labels in the UI.

By default the following items are available on the menu (Figure 3):

Figure 3

You can customize your help menu using the Help Content section (Figure 4).

Figure 4

To configure the items in your Help menu, click the Zoomdata Links tab.

You can configure the following items in your Help menu:

Show the link to contact Zoomdata. By default this menu item is enabled. The default label is Contact us with a question .

Figure 5

You can change it by specifying a new label in the Label for link field.
The next step is to configure settings for the response when a user clicks this menu item.

If you want the contact form to be displayed, select the Show Zoomdata's default contact form (Figure 3):

Figure 6

To show the message, select the Show customized contact message option and type the message text to be displayed.

Show the link for Zoomdata Support . By default this menu item is enabled. The default label is Support Site .

Figure 7
If you click this menu item, you navigate to the Zoomdata support portal. To change the label for this item, specify the required text in the Label for link field.

Show the link for Quickstart Tutorials . By default this menu item is enabled. The default label is Show Quickstart Tutorials .

Figure 8

If you click this menu item, the quick start videos are displayed (Figure 8). To change the label for this item, specify the required text in the Label for link field.

Figure 9

LOGIN PAGE FOOTER

In the Login Page Footer section you can modify the copyright info and terms of use.

The copyright info and the link to the terms of user are displayed on:

Figure 10

System info section:

Figure 11

Changing the Copyright Info

You can modify copyright info in the Copyright Line section. By default, standard Zoomdata copyright information is displayed.
If you want to add a different one, select Custom Copyright and specify the required text in the corresponding field.

Select None to hide the copyright info.

Figure 12

Configuring Terms of Use

By default, the Terms of Use link leads to the page listing the standard Zoomdata terms. To provide your terms of use, select URL and specify the URL in the corresponding field. Select None to hide terms of use.

Figure 13

CUSTOMIZING ARTWORK

In the Customize Artwork section you can configure all your identity images used on your Zoomdata instance.

Favicon

The favicon is displayed on the tab of your browser window:

Figure 14

To upload different favicon, click Upload Image in the Favicon section:

Figure 15

The file that you want to upload must match the following requirements:

image size: 32x32 px
file format: .ico

Header Logo

The header logo is displayed on the menu bar of Zoomdata working area:

To upload different logo, click the Upload Image button in the Header Logo section:

Figure 16

The file that you want to upload must match the following requirements:

image max height: 72 px
file format: .svg or .png with transparent background

Login Page Logo

The login page logo is displayed on your login page:

Figure 17

To upload different logo, click the Upload Image button in the Login Page Logo section:

Figure 18

The file that you want to upload must match the following requirements:

image size: 500px * 184px
file format: .svg or .png with transparent background

Login Page Background Image

You can change the background image displayed on the login page. Click Upload Image in the Login Page Background Image section:

Figure 19

The file that you want to upload must match the following requirements:

image size: 2560 x 1600 px
file format: .jpg or .png

ADDING CUSTOM CSS FILE

To modify the Zoomdata skin to match the style of your company, you can upload a custom .css file.

Zoomdata recommends you to check the html structure of the page to provide the rules for the corresponding selectors in your .css file. To override existing CSS rules, use !important.

Click Upload Image in the Custom CSS file section:

Figure 20

ADDING CUSTOM HEADER AND FOOTER

You can add custom header and footer for each page of Zoomdata and configure them as required. To enable header or footer, select the Turn On Custom Header or Turn On Custom Footer checkbox in the corresponding section.

Create html structures for your header or footer in the fields below.

To modify these elements, you can either add inline styles or include the classes corresponding to your custom .css file.

Specify the height of the header or footer.

Figure 21

Click Apply to Interface . Your changes are applied and saved.

APPLYING THE CHANGES

When you completed your work on customizing the UI of the required section your Zoomdata instance, click Apply to Interface . Your changes are applied and saved. To restore the default settings back, click Restore All Defaults . Your changes are overwritten by the defaults.

Was this topic helpful?