Customize the User Interface

When you install Self-Service Analytics, default UI settings are applied. These settings include: logo, favicon, header and footer settings, banner links, login screen settings, and more. You can 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 to modify the default skin or a custom JavaScript (.js) file to include on every page.

The customization settings are organized into several categories.

Read…	For information about …
Customize the Application	Customizing the application title, favicon, uploading a custom CSS or custom JavaScript file.
Customize the Banner	Customizing the banner, links, and logos on each page.
Customize the Header and Footer	Customizing the header and footer information.
Customize the Login Dialog, Home Page Background, and About Dialog	Customizing the Login and About dialogs.
Change the Login Page	Customize the Login page users see.

​

Customize the Application

You can customize the Self-Service Analytics application title and favicon. You can also upload a custom .css to modify the default skin or a custom JavaScript (.js) file to include on every page.

You can restore many fields in this work area to the installed default by selecting the Revert icon.

​

Update Application Settings

Setting	Description
Page Title	Customize the page title. The default for fresh installations is Simba.
Favicon	Add a new favicon to replace the default favicon. Displayed on the tab of your browser window. The icon must be in .ico format with a recommended size of 32 x 32 pixels.
Custom CSS	Add your custom CSS file to modify the default Self-Service Analytics skin. This is referenced and used by every page.
Custom JS	Add a custom JavaScript (.js) file can be uploaded to include on every page of the UI.

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

Change Application Title, Favicon, CSS or JavaScript

1. Log in as a system admin or a member of the Supervisors group.

2. Select Tools > Customize UI from the Administration menu. The Customize UI work area opens.

3. Under Application, locate and update the appropriate areas: Page Title, Favicon, Custom CSS, or Custom JS.

4. Select Save to save and apply your changes.

​

Customize the Banner

Customize the UI banner to provide your own support link, documentation link, header logo, and brand icon.

You can restore many fields in this work area to the installed default by selecting the Revert icon.

​

Update the Banner and Menu Settings

Setting	Description
Support Link	Enable or disable a link for your users to access support. Update with your custom link as desired.
Documentation Link	Enable or disable a link for your users to access help information. Update with your custom link as desired.
Header Logo	Browse to add your header logo, shown in the expanded main menu. Provide in SVG or PNG format; maximum height supported is 72px.
Brand Icon	Browse to add your brand logo, shown in the collapsed menu. Provide as a square SVG or PNG format image, minimum 48 x 48px.

Change Banner and Menu Settings

1. Log in as a system admin or a member of the Supervisors group.

2. Select Tools > Customize UI from the Administration menu. The Customize UI work area opens.

3. Under Banner, locate and update the appropriate areas: Support Link, Documentation Link, Header Logo, or Brand Icon.

4. Select Save to save and apply your changes.

​

Customize the Header and Footer

Add a custom header or footer and adjust its height in the user interface. A custom header appears above the work areas in the application, and custom footers below.

​

Update the Header and Footer

1. Log in as a system admin or a member of the Supervisors group.

2. Navigate to Tools > Customize UI from the Administration menu to open the Customize UI work area.

   

3. Enable the Custom Header or Custom Footer slider. Specify HTML structures for your custom header or footer. Add inline styles or include the classes corresponding to your custom CSS file.

4. Optionally, specify the height (in pixels) of your header or footer in the Custom Height in Pixels field.

5. Select Save to save and apply your changes.

​

Customize the Login Dialog, Home Page Background, and About Dialog

You can customize the copyright information, terms of service link, Login screen logo, the Login screen background, and the Home screen background. Logo, copyright, and terms of service appear in the About dialog of the UI. The copyright information, Login screen logo, and Login screen background appear with the Login screen. The Home screen background appears on the Home page.

​

Update Login, About, Copyright and Related Settings

You can restore many fields in this work area to the installed default by selecting the Revert icon.

Setting	Description
Copyright	Enable or disable copyright information visibility. Update with your copyright information as desired. Appears on the About dialog and the Login dialog.
Terms of Service Link	Enable or disable a link for your users to terms of service. Update with your custom link as desired.
Login Page Logo	Browse to add your login page logo. Provide in SVG or PNG format, sized 500px by 184px, with a transparent background.
Login Background Image	Browse to add your login background image. Provide in JPG, SVG,or PNG format, with a transparent background.
Home Background Image	Browse to add your home page background image. Provide in JPG, SVG,or PNG format, with a transparent background.

Customize Login, About, Copyright and Related Settings

1. Log in as a system admin or a member of the Supervisors group.

2. Select Tools > Customize UI from the Administration menu. The Customize UI work area opens.

3. Under Login and About, locate the item you want to update, enable, or disable, and make your changes.

4. Select Save to save and apply your changes.

​

Change the Login Page

You can change the Login page of your Self-Service Analytics environment from the default values by uploading a custom CSS file. This enables you to use your organization’s color scheme and branding not only on the background image, but on the background animation, login box, and button. This topic describes:

• Change the Login Page Background Gradient
• Change the Login Dialog
• Change the Login Button Color

​

Change the Login Page Background Gradient

Use the Customize UI work area to change the background. You can also change the gradient animation color of the background to match the changes you apply to the Login Page background. Use the selector illustrated below:

#init-page-gradient { background: orange !important; }

​

Change the Login Dialog

You can change the color of the Login dialog for your Self-Service Analytics environment by using a selector as shown below:

#login-box.samlEnabled.collapse_login_box { background-color: orange !important; }

You can also make the Login dialog transparent by specifying a back-color value of the following:

background-color: rgba (0, 50, 50, 0) !important;

​

Change the Login Button Color

You can change the color of the Login button by following the example of the selector below:

input.btn.btn-success.btn-large {
	background-color: red !important;
}

You can change the hover color of the Login button by following the example of the selector below:

input.btn.btn-success.btn-large:hover { background-color: blue !important; }

​

Change the Libraries

Style the look-and-feel of your by changing the outline colors, background colors, icons, and fonts. Customize:

• The background color of the library
• Library side panel menu
• The background for the My Favorites section of the library

​

Change the Libraries Background Color

You can change the background color of the library for your tenant account(s), by following the example of the selector below:

.zdView-Home. zd-home { background-color: lightBlue; }

​

Change the Library Sidebar Menu

You can change the color of the sidebar menu, used in the dashboard library, self-service reports library, as well as within visuals and dashboards, by following the example of the selector below:

.zd-side-pane { background-color: red !important; }

​

Change the My Favorites Background

You can change the background color of the My Favorites section within the libraries, by following the example of the selector below:

.zd-home .zd-carousel-home { Background-color: lightBlue; }

​

White Label the Self-Service Analytics Interface

Self-Service Analytics provides ways you can change the default UI settings for the interface. If you prefer more customization options, upload a custom CSS file that includes the changes you want to apply to the interface.

If you want to change the default logo, copyright information, or help content see Customize the User Interface.

The white labeling capabilities are described here to help you understand the extent of control of customizations you as a developer have over the look-and-feel of the interface your users see and interact with.

The Self-Service Analytics user interface is often enhanced between releases and those enhancements may affect the application’s CSS. You should plan time to update your custom CSS between version upgrades.

​

What Can I Do With White Labeling?

• Make the Self-Service Analytics Login page look like your company’s colors and theme
• Re-theme banners, backgrounds, and tiles for the Home Page
• Change the colors within the Self-Service Analytics client
• Translate the text into other languages. Work with your insightsoftware technical support representative to do this.

​

What Do I Need?

• System admin access to the tenant account(s) you want to customize
• Familiarity with CSS

​

Where Do I Get Started?

• Change the Login Page
• Change the Librarie
• Translate the Self-Service Analytics Interface

​

Translate the Self-Service Analytics Interface

You can translate the Self-Service Analytics interface into other languages. Self-Service Analytics supports standard i18n languages. See https://perldoc.perl.org/I18N::LangTags::List#LIST-OF-LANGUAGES.

To translate the interface, you must have a specific advanced setting switched on. Please contact technical support for information about this setting.

Translation files in the format vocabulary-<xx>_<YY>.json are used in the translation. The English translation file is provided and is named vocabulary-en_US.json.

• Linux Environments: Located in the /opt/zoomdata/client/i18n folder.
• Windows Environments: Located in the <install-path>/client/i18n folder.

Translate the Self-Service Analytics interface:

1. Locate and copy the provided English translation file vocabulary-en_US.json in the appropriate /client/i18n folder.

2. Rename the copy of the file. Be sure to name it in the format vocabulary-<xx>_<YY>.json, where <xx> is a two-character code representing the language you want to use and <YY> is the dialect. See https://perldoc.perl.org/I18N::LangTags::List#LIST-OF-LANGUAGES.

3. Translate the JSON values to the right of the JSON keys (after the colon) in the file. All values should be specified in quotes. The JSON keys should not be translated because the keys are used by the Self-Service Analytics code.

   Here is an example of part of a translated translation file:

   

   This file is CSS-friendly. For example, <b> and </b> around a JSON value or part of a value indicate that the value should be bold.

   Finally, placeholders (variables) are used throughout the file and should not be changed or removed, although they can be relocated within a JSON value, as needed for your translation. Placeholders appear surrounded by % symbols (for example, %name%) in the translation file. Self-Service Analytics code inserts a value for these placeholders, based on where the JSON key is used in the product. For example, a dashboard name might be inserted for the placeholder %name% for one JSON key, but a visual name might be inserted for a different JSON key that also uses the %name% placeholder.

4. Save your translated file.

5. Contact your insightsoftware technical support representative for additional steps.

If you import an exported source that has an associated translation file, you must re-upload the translation for that source.

​

Ensure Your Custom Favicon Sticks in Browser Tab

Problem : You added a custom favicon to the Self-Service Analytics user interface, but it changes back to the default Self-Service Analytics icon.

Resolution : Try clearing your browser’s cache after uploading a custom favicon. This should resolve the issue and your custom icon should display as expected afterward. If this does not resolve your issue, contact Technical Support.