WPConsent is designed to be easily customized to match your site’s branding. While it’s built to work out-of-the-box without conflicting with your theme, you have control over its appearance using a modern CSS feature called CSS ::part() selectors.

This guide explains why WPConsent is built this way and how you can safely apply your own styles.

Why WPConsent Uses Shadow DOM

You might notice that targeting banner elements with standard CSS (like .wpconsent-button) doesn’t work. This is intentional and is thanks to a technology called Shadow DOM.

What is Shadow DOM?

Shadow DOM is a web standard that creates an isolated “bubble” for the WPConsent banner. This isolation provides two key benefits:

1. Style Isolation: Styles inside the banner (like our button styles) cannot leak out and affect your main website.
2. Protection from External Styles: Styles from your theme or other plugins (like button { background: red !important; }) cannot accidentally break the banner’s layout or appearance.

By using Shadow DOM, WPConsent ensures maximum compatibility with all WordPress themes and plugins, providing a consistent, functional banner across all sites.

How to Customize with CSS ::part() Selectors

To allow customization into this isolated bubble, WPConsent “exposes” specific elements using a part attribute. You can style these parts using the ::part() pseudo-selector.

Step 1: Add Your Custom CSS

You can add your custom CSS in the same places you normally would. In your theme or using a code snippets plugin like WPCode. For more options on how to add CSS to your site check out this article.

Step 2: Use the ::part() Syntax

All WPConsent part selectors must start by targeting the main container, #wpconsent-container. From there, you use ::part() to target the specific element you want to change.

Here are a few common customizations to get you started.

Example 1: Move the Floating Settings Button

After the banner is dismissed, a floating “settings” button can appear. By default, it’s on the bottom-left. Let’s move it to the bottom-right corner.

#wpconsent-container::part(wpconsent-settings-button) {
    left: auto;
    right: 20px;
    bottom: 20px; /* Make sure to set the bottom position too */
}

Example 2: Change the “Accept All” Button in the Preferences Panel

The “Accept All” button inside the preferences modal (wpconsent-preferences-accept-button) defaults to the style of the main banner’s “Accept” button. You can override it to give it a unique style.

Let’s make it a blue gradient.

#wpconsent-container::part(wpconsent-preferences-accept-button) {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
    border: none;
    font-weight: 600;
}

Complete Part Reference Table

You can customize dozens of elements within the banner and preferences modal. Use this table to find the correct part name for the element you want to style.