Interface Customization

Interface Customization section lets you tailor the look and feel of your White Label solution to match your brand.

Using UI Appearance settings and CSS Styling, you can customize layouts, colors, fonts, and more. This ensures a seamless visual experience for your users, aligned with your brand identity.

UI Appearance

Zoho Analytics now features a modern, glassmorphic design that delivers a sleek, translucent look—enhancing visual clarity, usability, and overall user experience.

This upgraded interface not only elevates the appearance but also unlocks access to the latest capabilities introduced in recent updates—available exclusively in the New UI.

Note: Future enhancements will no longer be supported on the old interface.

The New UI supports powerful 6.0 features such as Slideshows, Visual Insights, Unified Metrics, Unused Views and Dashboard export PPT with themes.

Switching back to the old UI will automatically disable these advanced features.

To switch to the New UI:

  1. Navigate to Interface Customization under the White Label section.
  2. In the UI Appearance tab, simply choose your preferred interface style.

CSS Customization

The CSS customization options allow you to tailor the appearance and styling of your white label product (version of Zoho Analytics) to align with your brand.

To enable CSS Customization,

  • Navigate to Interface Customization under the White Label section.
  • In the CSS Customization tab, click on the toggle button CSS Customization to enable CSS Customization for your white label product.
  • Click the CSS Editor button to customize the appearance and styling of your white labeled product. The CSS editor allows you to modify visual elements like colors, fonts, and other graphical components to align with your brand. 
    To learn more about the customization options available for tailoring the look and feel of your product, click here.
  • You can choose to enable this customization to all the users or limit it to selected users.
  • On selecting Enable to selected users option, the Add Users button and a list of names and email addresses of the selected users will appear.
  • Click the Add Users button to add your domain users to the selected users list to whom CSS customization can be enabled.
  • Click Apply to save and implement the CSS customizations across the white labeled product, based on your selected styling preferences.

CSS Editor

The CSS Editor allows you to customize the styling across different sections of your product.

To edit the CSS,

  • Click the CSS Editor button on the CSS Customization page.

  • The CSS Editor page will open with the following tabs

    TabsDescription
    Properties

    Lists the customizable style properties organized by different product sections/pages. This allows targeted selection of elements to customize.

    You can select any property of a section to open its CSS and preview in the Editor and Preview tabs respectively.

    Editor

    The CSS code editor where you can directly edit CSS styles to customize visual properties.

    You can edit the code and revert the changes done in the Editor section. Click Run to visualize the changes in the preview section.

    The editor section includes a toggle button to switch between the following editing options:

    • UI - Customize the look and feel of your product directly by selecting colors and fonts without needing to write any code.
    • CSS - Perform customization by editing the product's CSS for more advanced and detailed styling.
    Preview

    Displays a live preview which dynamically visualizes all style changes applied in the Editor in real-time to see the direct visual impacts.

    It has three tabs - Home, Explorer, and Components. You can switch between the tabs to visualize the customizations applied in real-time.

  • You can select any property, customize its CSS, and preview its results in the Editor and Preview tabs, respectively.
  • Selecting the </> All section shows the entire CSS of your product.
  • The Global section includes Color Scheme and Typography properties. Any adjustments made to these properties will be applied across the entire product. By using the UI edit option for the Color Scheme, you can select theme colors from your logo and automatically generate a color palette based on your selection.
  • The Home Page section contains properties related to the product's home page. You can customize the Background and Tabs to personalize your home page.
  • The Explorer Page section includes properties of the workspace Explorer page in your product. You can customize the Background, Navigation Bar, and Navigation Bar Menu, and Tabs.
  • The Components section has properties related to the styling components of the product. You can customize the Buttons, Selections, Menu Dropdown, Card Style, and Tool Bar across the product.
  • Click Save to apply and save the CSS customizations to the white labeled product.