CSS

⚠️

We strongly advise the use of the theme property to control the look and feel of the dashboard. We recommend keeping the usage of CSS classes to a minimum.

If there is something that the theme property does not allow you to control. Please get in touch with our support team to see how we can help.

To make the dashboard look and feel like the rest of your website, we've added CSS class names which allow you complete control over the customization of your dashboard.

You can write a CSS file that uses the vizzly_ prefixed CSS class names to override the Vizzly base styles.

Before you start writing your CSS, remember to add the disableVizzlyTheme React prop to the Dashboard component and then start making your CSS changes. You'll see a more un-opinionated version of the Vizzly dashboard, and it will be easier to add your own theme and maintain in the future.

For example, if you're using a library such as react-helmet (opens in a new tab) that supplies the Head component in this example, then your diff might look something like this;

import Vizzly from "@vizzly/dashboard";
 
 
export default () => (
  <>
+    <Head>
+      <style>
+       .vizzly_button {
+           background: green;
+       }
+      </style>
+    </Head>
 
    <Vizzly.Dashboard
+      disableVizzlyTheme
      {/* ... rest of the dashboard props ... */ }
      />
  </>
)

Available CSS classes

This is an exhaustive list of CSS classes which can be used to customize the Vizzly dashboard. We recommend combining this list with searching through the elements using the inspector developer tool (opens in a new tab) to target the components which you want to customize.

If there is a part of the Vizzly dashboard that you'd like to make customizable, please contact us through your shared slack channel with us, and we'll see what we can do to help.

View all CSS classes

.vizzly_button

Sets the default button styles.

.vizzly_listview

Targe the listview component used to manage measures, dimensions, sorts, global filters etc.

.vizzly_listview-item

Styles the individual rows in a listview component.

.vizzly_listview-new-item

Style the button at the bottom of a listview utilized by users to add a new item.

.vizzly_modal-header

Style the header of a modal.

.vizzly_modal-content

Style the content of a modal.

.vizzly_modal-footer

Style the footer of a modal.

.vizzly_modal-overlay

Style the background of a modal, used to differentiate the content of the modal from the background.

.vizzly_modal-wrapper

Target a modal.

.vizzly_data-set-preview

Target the table component used to display a preview of a data set during the flow of creating a new chart.

.vizzly_pick-component-type

Target the grid used to display the available component types.

.vizzly_modal-empty-library

Target the modal which contains the charts in the users library, when the library is empty.

.vizzly_modal-library-preview

Target the preview chart shown in the component library.

.vizzly_modal-library-list

Target the list of charts shown in the component library.

.vizzly_dashboard

Target the parent element of the Vizzly dashboard.

.vizzly_modal-close

Style the close modal button.

.vizzly_modal-library

Target the modal when the component library is shown.

.vizzly_modal-editor

Target the modal when the component editor is shown.

.vizzly_accordion

Style the accordions used throughout the chart editor.

.vizzly_accordion-content

Style the content of an accordion.

.vizzly_panel-property

Target each of the data and style properties.

.vizzly_tab-group

Target the parent element of a tab.

.vizzly_tab-button-list

Target the parent element of a list of tabs.

.vizzly_tab-panel

Target the parent element for each panel of content in a tab group.

.vizzly_tab-button

Style the buttons used in a tab group.

.vizzly_select

Style a select input.

.vizzly_button-group

Target a wrapper for a collection of buttons.

.vizzly_input

Style HTML inputs.

.vizzly_populated-cell

Target the cell of a dashboard when it contains a chart or table.

.vizzly_empty-cell

Target the cell of a dashboard when it is empty.

.vizzly_selected

Combine this with other classnames to target an active option of a select input.

.vizzly_loading

Combine this with other classnames to target a component when it is in the loading state.

.vizzly_disabled

Combine this with other classnames to target a component when it is in the disabled state.

.vizzly_error

Combine this with other classnames to target a component when it is in the error state.

.vizzly_sm

Used on components which by default, are smaller in size.

.vizzly_primary

Combine this with the button classnames to style a primary button.

.vizzly_secondary

Combine this with the button classnames to style a secondary button.

.vizzly_subtle

Used on components which by default, are not as prominent on the page. This is used on buttons and other HTML inputs.

Importing the CSS

As you customize the Vizzly dashboard using CSS classes, you can import these styles in the idiomatic ways;

You can set the styles in the head tag of the HTML document.
As a separate CSS file referenced in the head tag of the HTML document.
Using a CSS in JS approach such as styled-components (opens in a new tab) to create global styles.

Troubleshooting

"My custom styles are having no effect"

There's a few simple things that might be causing the issue;

Be sure that you have set the disableVizzlyTheme={true} property on the Vizzly.Dashboard React component.
Be sure that you are targeting an HTML element with valid CSS (opens in a new tab).
Be sure that the CSS selector is finding the element on the page. You can use the chrome developer tools in the "style" section to do this. You'll see the styles you want to be applied are crossed out.

After checking the above and the problem continues, then it is time to increase the specificity of the CSS references. You can do this by targeting the HTML element multiple times with the same selector. For example, instead of just specifying the selector like so;

button.vizzly_primary {
  background: red;
}

you can utilize the v class which will also exist on the HTML element which has vizzly_ classnames on, and reference the element like so;

.v.button.vizzly_primary {
  background: red;
}

If it is still being overridden, you can keep adding the v class until your styles take effect. For example;

.v.v.v.v.button.vizzly_primary {
  background: red;
}