Skip to content

Global Styling and Whitelabelling

This section describes how to add custom colours and fonts to your report.

Styles

Datapane Teams allows you to define a global style block which will apply to all of your reports. In this block you can (re)define the default font, background colour and more.

Example of a styled report

To use this feature, you'll need to have Admin Access. Head over to Settings -> Visual Settings, and scroll to the Styling section, where you'll see a block of HTML/CSS which looks like this:

<style type="text/css">
    :root {
        --dp-accent-color: #fff;
        --dp-bg-color: #1f2937;
        --dp-text-align: justify;
        --dp-font-family: Inter var, ui-sans-serif, system-ui;
    }
</style>

You can edit this block to add your brand colours, load in a custom font or even add a logo. Any assets that you add will be displayed in a bar at the top of your report, and these changes will apply retroactively to your old reports.

Adding a custom font

If you have a brand font, you can load it in as follows:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />

<style type="text/css">
    :root {
        --dp-accent-color: #fff;
        --dp-bg-color: #1f2937;
        --dp-text-align: justify;
        --dp-font-family: Sofia;
    }
</style>

Note that this will only apply to the headings and prose - UI text in DataTables, Select blocks etc will stay as the system default.

Adding a custom header

Anything you add under the <style> block will be added to the top of your report as a default header. You can use this to load in a custom image, text or analytics script as follows:

<style type="text/css">
    :root {
        --dp-accent-color: #4e46e5;
        --dp-bg-color: #fff;
        --dp-text-align: justify;
        --dp-font-family: Inter var, ui-sans-serif, system-ui;
    }
</style>

<img src="my-image.png" />

Whitelabelling

To use our Whitelabel feature, simply add a company logo under Settings - Visual Settings. Your company logo will be displayed instead of the Datapane logo in the following places:

  • Login pages
  • Shared reports
  • Shared report embeds