WPConsent uses CSS Custom Properties (or CSS Variables) to give you granular control over the banner’s styles.

Think of CSS variables as placeholders for style values (like colors, font sizes, and spacing). Instead of hunting through complex stylesheets, you can easily override these variables in one place to apply your changes.

This guide will show you how to use these variables and provide a complete reference list of all available options.

How to Use CSS Variables

To customize the banner, you need to provide your own values for the CSS variables. The most reliable way to do this is by targeting the banner’s main ID, #wpconsent-container, in your own stylesheet.

Here is the basic structure:

/* Add this to your custom CSS area */
#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-border-radius: 0px;
    --wpconsent-accept-bg: #0073aa;
}

You can add this custom CSS in several ways, 4 options are outlined in this article.

Complete CSS Variable Reference

Here is a full list of all CSS variables you can use to customize the WPConsent banner.

Layout & Positioning Variables

These variables control the banner’s size, shape, and position on the page.

--wpconsent-z-index

• Default: 900000
• Purpose: Controls the stacking order of the banner. Increase this if the banner is appearing behind other elements on your site.
• Example:

#wpconsent-container {
    --wpconsent-z-index: 999999;
}

--wpconsent-min-width

• Default: 526px
• Purpose: Sets the minimum width of the banner on larger screens (does not apply to mobile devices below 767px).
• Example:

#wpconsent-container {
    --wpconsent-min-width: 600px; /* Make the banner wider */
}

--wpconsent-padding

• Default: 15px 20px
• Purpose: Controls the internal spacing (padding) inside the banner.
• Example:

#wpconsent-container {
    --wpconsent-padding: 25px 30px; /* More internal spacing */
}

--wpconsent-border-radius

• Default: 10px
• Purpose: Sets the roundness of the banner’s corners. Use 0 for square corners.
• Example:

#wpconsent-container {
    --wpconsent-border-radius: 0; /* Square corners */
}

--wpconsent-shadow

• Default: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px
• Purpose: Defines the drop shadow effect for the banner. Set to none to remove it.
• Example:

#wpconsent-container {
    --wpconsent-shadow: none; /* No shadow */
}

---

Color Variables

These variables control the banner’s color palette. While many can be set in the admin interface, you can override them here for more control.

--wpconsent-background

• Default: Set via admin interface.
• Purpose: The background color for the main banner and the preferences modal.
• Example:

#wpconsent-container {
    --wpconsent-background: #ffffff;
}

--wpconsent-text

• Default: Set via admin interface.
• Purpose: The main text color for all content in the banner.
• Example:

#wpconsent-container {
    --wpconsent-text: #222222;
}

--wpconsent-border

• Default: var(--wpconsent-text) (inherits the text color)
• Purpose: Defines the border color for various elements within the banner.
• Example:

#wpconsent-container {
    --wpconsent-border: #e0e0e0; /* Light gray border */
}

--wpconsent-outline-color

• Default: Calculated as 20% opacity of the text color.
• Purpose: Used for subtle borders and separators, primarily in the preferences modal.
• Example:

#wpconsent-container {
    --wpconsent-outline-color: rgba(0, 0, 0, 0.1);
}

---

Button Color Variables

Control the appearance of the “Accept,” “Reject,” and “Preferences” buttons.

--wpconsent-accept-bg

• Purpose: Background color for the “Accept All” button.
• Example:

#wpconsent-container {
    --wpconsent-accept-bg: #28a745; /* Green */
}

--wpconsent-accept-color

• Purpose: Text color for the “Accept All” button.
• Example:

#wpconsent-container {
    --wpconsent-accept-color: #ffffff; /* White text */
}

--wpconsent-cancel-bg

• Purpose: Background color for the “Reject All” button.

--wpconsent-cancel-color

• Purpose: Text color for the “Reject All” button.

--wpconsent-preferences-bg

• Purpose: Background color for the “Preferences” or “Settings” button.

--wpconsent-preferences-color

• Purpose: Text color for the “Preferences” or “Settings” button.

---

Typography Variables

Control the font sizes and line height of the banner text.

--wpconsent-font-size

• Default: Set via admin interface.
• Purpose: The base font size for the main body text in the banner.

--wpconsent-title-size

• Default: 20px
• Purpose: The font size for the banner’s main title.

--wpconsent-line-height

• Default: 1.4
• Purpose: Controls the line height for banner text, affecting readability.

---

Interactive Element Variables

Customize smaller elements like the close button.

--wpconsent-close-size

• Default: 12px
• Purpose: Sets the size (width and height) of the ‘X’ close button icon.

--wpconsent-close-color

• Default: #454545
• Purpose: Controls the color of the ‘X’ close button icon.

---

Accessibility Variables

These variables are critical for ensuring your banner is usable for everyone, especially those using keyboard navigation.

--wpconsent-focus-outline-color

• Default: #007cba (WordPress blue)
• Purpose: Sets the color of the focus outline that appears when navigating with a keyboard. Ensure this has good contrast against your background.

–wpconsent-focus-outline-width

• Default: 2px
• Purpose: Controls the thickness of the keyboard focus outline.

--wpconsent-focus-outline-offset

• Default: 2px
• Purpose: Sets the distance between the focused element and its outline.

---

Settings/Preferences Button Variables

These variables style the small floating button that allows users to reopen the consent modal. 

Note: These are global variables and should be applied to the :root selector, not #wpconsent-container.

--wpconsent-floating-button-bg

• Purpose: Background color of the floating button.

--wpconsent-floating-button-color

• Purpose: The icon/text color for the floating button.

---

Advanced Customization Examples

Here are a few “themes” you can use as a starting point. Just copy and paste the code into your custom CSS.

Example 1: Modern Dark Theme

#wpconsent-container {
    --wpconsent-background: #1a1a1a;
    --wpconsent-text: #e0e0e0;
    --wpconsent-border-radius: 15px;
    --wpconsent-padding: 25px 30px;
    --wpconsent-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

    --wpconsent-accept-bg: #4caf50;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: #424242;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #616161;
    --wpconsent-preferences-color: #ffffff;

    --wpconsent-close-color: #e0e0e0;
    --wpconsent-focus-outline-color: #4caf50;
}

Example 2: Minimalist Clean Design

This example makes the “Reject” and “Preferences” buttons appear as text-only links.

#wpconsent-container {
    --wpconsent-background: #fafafa;
    --wpconsent-text: #212121;
    --wpconsent-border-radius: 0;
    --wpconsent-padding: 20px;
    --wpconsent-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wpconsent-min-width: 480px;

    --wpconsent-accept-bg: #212121;
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg: transparent;
    --wpconsent-cancel-color: #212121;
    --wpconsent-preferences-bg: transparent;
    --wpconsent-preferences-color: #212121;

    --wpconsent-font-size: 14px;
    --wpconsent-title-size: 18px;
    --wpconsent-line-height: 1.6;
}

Example 3: High Contrast for Accessibility

#wpconsent-container {
    --wpconsent-background: #000000;
    --wpconsent-text: #ffffff;
    --wpconsent-outline-color: #ffffff;

    --wpconsent-accept-bg: #00ff00;
    --wpconsent-accept-color: #000000;
    --wpconsent-cancel-bg: #ff0000;
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg: #ffff00;
    --wpconsent-preferences-color: #000000;

    --wpconsent-focus-outline-color: #ffff00;
    --wpconsent-focus-outline-width: 3px;
    --wpconsent-focus-outline-offset: 3px;

    --wpconsent-close-color: #ffffff;
}

---

Browser Compatibility

CSS Custom Properties are supported in all modern browsers (Chrome, Firefox, Safari, Edge). Older browsers like Internet Explorer will not support these customizations and will see the default theme.