Examples & Tutorials
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:
1
<style type="text/css">
2
:root {
3
--dp-accent-color: #fff;
4
--dp-bg-color: #1F2937;
5
--dp-text-align: justify;
6
--dp-font-family: Inter var, ui-sans-serif, system-ui;
7
}
8
</style>
Copied!
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:
1
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
2
3
<style type="text/css">
4
:root {
5
--dp-accent-color: #fff;
6
--dp-bg-color: #1F2937;
7
--dp-text-align: justify;
8
--dp-font-family: Sofia;
9
}
10
</style>
Copied!
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:1
<style type="text/css">
2
:root {
3
--dp-accent-color: #4E46E5;
4
--dp-bg-color: #FFF;
5
--dp-text-align: justify;
6
--dp-font-family: Inter var, ui-sans-serif, system-ui;
7
}</style>
8
9
<img src="my-image.png"/>
10
Copied!
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
Last modified 9mo ago
Copy link