Customize UX and styles

Table of Contents

Scope of customization
Custom styles for Orgs on multi-tenant clusters

ThoughtSpot allows you to customize the look and feel of embedded pages and elements to match the UI style and design of your host application and the branding guidelines of your organization.

Developers can use the following options to customize the appearance of embedded content and create a uniform experience for the users of their app.

Style customization features in the ThoughtSpot UI

You can customize key UI components, such as your application logo, favicon, font style for charts and tables, background color of the UI, background color of the top navigation panel, the color palette for your charts, page title, and footer text by either using the Style customization menu in the Admin tab or navigating to Develop > Customizations > Styles. If you are using the new experience, the Admin and Developer will be in the Application switcher the app switcher menu . To learn how to use these controls, see Customize layout and styles.

Note	Custom CSS changes take precedence and override the style customization settings applied via UI.

Advanced style customization with custom CSS

Custom CSS allows developers to override the default styles and UI element specifications in their deployments. Custom CSS provides granular control over the UI appearance and allows you to modify design elements such as buttons, labels, text styles, and typography. This feature is available only with the ThoughtSpot Embedded Edition license.

To customize themes and variables in the CSS file, developers must know the basics of HTML and CSS framework and how to build custom themes. For more information, see Advanced customization with custom CSS.

A hands-on tutorial is also available to learn how to test style customization capabilities using Visual Embed Playground.

Scope of customization🔗

The following table lists the customizable elements:

UI element	Customization via UI	Customization with CSS
Application-wide settings	✓ Background color application pages ✓ Navigation panel color+ ✓ Logo ✓ Favicon	✓ Background color of Liveboard, visualization, and Answer pages ✓ Navigation panel and its contents
Typography	✓ Font styles for charts and tables ✓ Page title ✓ Footer text	✓ Font styles, text color, and text-transform settings for the entire app
Charts and visualizations	✓ Color palette of charts and tables	✓ Font styles, text color, and text-transform settings for visualization and Answer titles, description text, and axis labels and titles on charts ✓ Visualization tile customization; for example, border-radius and background color.
Buttons elements	–	✓ Color and border-radius of primary, secondary, and tertiary buttons
Search bar	–	✓ Search text and tokens in the Search bar ✓ Buttons on the search bar The Go button (primary button) Background color of the secondary button; for example, the delete icon () that appears after you enter the search tokens.
Menu components	–	✓ Background color and text style of menu panels.

UI element

Customization via UI

Customization with CSS

Application-wide settings

✓ Background color application pages

✓ Navigation panel color+

✓ Logo

✓ Favicon

✓ Background color of Liveboard, visualization, and Answer pages

✓ Navigation panel and its contents

Typography

✓ Font styles for charts and tables

✓ Page title

✓ Footer text

✓ Font styles, text color, and text-transform settings for the entire app

Charts and visualizations

✓ Color palette of charts and tables

✓ Font styles, text color, and text-transform settings for visualization and Answer titles, description text, and axis labels and titles on charts

✓ Visualization tile customization; for example, border-radius and background color.

Buttons elements

–

✓ Color and border-radius of primary, secondary, and tertiary buttons

Search bar

–

✓ Search text and tokens in the Search bar

✓ Buttons on the search bar

The Go button (primary button)
Background color of the secondary button; for example, the delete icon () that appears after you enter the search tokens.

Menu components

–

✓ Background color and text style of menu panels.

Custom styles for Orgs on multi-tenant clusters🔗

You can now apply custom styles for each Org on a multi-tenant ThoughtSpot cluster.

Note	Custom styles and CSS overrides applied at the Org level take precedence over style customization settings at the cluster (All Orgs) level.