Customize styles and layout

Customize styles and layout

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. To learn how to use these controls, see Customize layout and styles.

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

Important

If you apply customization changes both via UI and custom CSS, the custom CSS changes take precedence and override the style customization settings in the UI.

Scope of customization🔗

The following table lists the customizable elements:

UI elementCustomization via UICustomization 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 (icon search bar close) 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. To enable this feature in your instance, contact ThoughtSpot Support.

Note

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