Consent Management: Customizing Appearance with CSS
10minFidesConsent Management
In this tutorial, we'll review how you can customize the appearance of Fides consent management using CSS.
After reading this, you'll be familiar with how to add CSS to your website and configure the various styles needed to customize the appearance of the consent experience for your visitors.
Prerequisites
For this tutorial, you'll need:
- A Fides Cloud or Fides Enterprise account
- The role of
OwnerorContributorfor your Fides organization. - At least one system with a data use on your data map. Read how to add systems to the Data Map now.
- At least one privacy notice configured. Read how to configure privacy notices now.
- Appropriate access to add or modify CSS on your website.
Styling Consent in Fides
You can fully customize your visitors consent experience with Fides. To do this, you can use CSS with CSS custom variable properties as outlined below.
Adding CSS to your website
Fides relies on a set of predefined CSS values to style the consent experience. To use these on your site, you will need to add these values to an existing CSS stylesheet or include a new CSS stylesheet on your website with these values.
Example: Interactive CSS Codepen
You can preview and adjust the CSS in this interactive codepen (opens in a new tab).
Fides CSS Stylesheet
Fides ships with an existing set of predefined stylesheet values to simplify customization, which you can view below:
Fides CSS
/**
* Fides Banner CSS styles
*/
:root {
/* Base Colors */
/* Base Color: Primary color that sets default component and button color */
--fides-overlay-primary-color: #cc0000;
/* Base Color: Color for backgrounds of notices and components */
--fides-overlay-background-color: #f7fafc;
/* Base Color: Body font color */
--fides-overlay-font-color: #4a5568;
/* Base Color: Link font color */
--fides-overlay-font-color-dark: #2d3748;
/* Base Color: Hover color for pop-up */
--fides-overlay-hover-color: #edf2f7;
/* Base Fonts */
/* Base Font: default font set across components, text and buttons */
--fides-overlay-font-family: Inter, sans-serif;
/* Base Font: font size for small text */
--fides-overlay-font-size-body-small: 0.875em;
/* Base Font: font size for all text */
--fides-overlay-font-size-body: 0.95em;
/* Base Font: font size for title text */
--fides-overlay-font-size-title: 1.2em;
/* Base Font: font size for button text */
--fides-overlay-font-size-buttons: 1.05em;
/* Buttons */
/* Button: Primary button color */
--fides-overlay-primary-button-background-color: var(
--fides-overlay-primary-color
);
/* Button: Primary button hover color */
--fides-overlay-primary-button-background-hover-color: #9569f4;
/* Button: Primary button text color */
--fides-overlay-primary-button-text-color: #ffffff;
/* Button: Primary button border color */
--fides-overlay-primary-button-border-color: transparent;
/* Button: Secondary button background color */
--fides-overlay-secondary-button-background-color: var(
--fides-overlay-background-color
);
/* Button: Secondary button hover color */
--fides-overlay-secondary-button-background-hover-color: #9569f4;
/* Button: Secondary button text color */
--fides-overlay-secondary-button-text-color: #2d3748;
/* Button: Secondary button border color */
--fides-overlay-secondary-button-border-color: transparent;
/* Text */
/* Title text: Font color */
--fides-overlay-title-font-color: var(--fides-overlay-font-color);
/* Body text: Font color */
--fides-overlay-body-font-color: var(--fides-overlay-font-color);
/* Link text: Font color */
--fides-overlay-link-font-color: var(--fides-overlay-font-color-dark);
/* Toggle */
/* Toggle: Active color for enabled toggle in 'on' position */
--fides-overlay-primary-active-color: var(--fides-overlay-primary-color);
/* Toggle: Disabled color for toggle that is disabled in 'on' position */
--fides-overlay-primary-active-disabled-color: #bda4f7;
/* Toggle: Inactive color for toggle in 'off' position */
--fides-overlay-inactive-color: #cbd5e0;
/* Toggle: Disabled color for toggle in 'off' position */
--fides-overlay-disabled-color: #e1e7ee;
/* Dividers */
/* Divider: Divider color between each privacy notice in pop-up */
--fides-overlay-row-divider-color: #e2e8f0;
/* Divider: Hover state of divider color between each privacy notice in pop-up */
--fides-overlay-row-hover-color: #e2e8f0;
/* Padding & Radius */
/* Padding: Padding space of banner and pop-up components */
--fides-overlay-padding: 1.5em;
/* Padding: Padding space for buttons */
--fides-overlay-button-padding: 0.5em 1em;
/* Radius: Corner radius of banner and pop-up components */
--fides-overlay-component-border-radius: 4px;
/* Position: Position of banner component when initially loaded */
--fides-overlay-banner-offset: 48px;
}
/* Positioning banner on screen in container */
div#fides-banner-container {
position: fixed;
z-index: 1;
width: 100%;
transform: translateY(0%);
transition: transform 1s, visibility 1s;
display: flex;
justify-content: center;
visibility: visible;
}
/* Banner specific custom styles */
div#fides-banner {
font-size: var(--fides-overlay-font-size-body-small);
background: var(--fides-overlay-background-color);
color: var(--fides-overlay-body-font-color);
box-sizing: border-box;
padding: var(--fides-overlay-padding);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: relative;
}
/* Positioning pop-up on screen in container */
div#fides-modal-container {}
/* Pop-up specific custom styles */
#fides-modal {}
/* Responsive banner */
@media screen and (min-width: 48em) {
/* Banner changes for mobile screen size */
div#fides-banner {
width: 75%;
border-radius: var(--fides-overlay-component-border-radius);
border: 1px solid var(--fides-overlay-primary-color);
}
div#fides-banner-container.fides-banner-bottom {
bottom: var(--fides-overlay-banner-offset);
}
div#fides-banner-container.fides-banner-top {
top: var(--fides-overlay-banner-offset);
}
}
@media only screen and (min-width: 80em) {
/* Banner changes for mobile screen size */
div#fides-banner {
width: 60%;
}
}