BugWP logo BugWP
Back to Community
Home / Community / Plugin → Cookie notice & compliance for gdpr / ccpa

How to Change Cookie Notice Button Colors with CSS

22 threads Sep 16, 2025 Plugin → Cookie notice & compliance for gdpr / ccpa

Content

One of the most common questions about the 'Cookie Notice & Compliance for GDPR / CCPA' plugin is how to customize the appearance of the buttons, particularly their colors. While the plugin offers some basic color settings, many users find they need more control over the styling to match their website's design.

Why Custom CSS is Often Necessary

The plugin provides basic color options in its settings, but these may not always work as expected due to several factors:

  • Theme conflicts: Your theme's CSS might be overriding the plugin's styles
  • Specificity issues: The plugin's CSS may have higher specificity than your custom styles
  • Caching: Browser or server caching might prevent changes from appearing immediately
  • Plugin updates: Directly modifying plugin files will cause your changes to be lost during updates

Most Effective Solutions for Button Styling

Solution 1: Use WordPress Customizer Additional CSS

The safest method that preserves your changes through updates is to use the Additional CSS section in your WordPress Customizer:

/* For WordPress style buttons */
.cn-button.wp-default {
    background: #e3c57d;
    color: #ffffff;
}

/* For Bootstrap style buttons */
.cn-button.bootstrap {
    background-color: #2c9c49;
    color: black;
}

/* For hover effects */
.cn-button.wp-default:hover,
.cn-button.bootstrap:hover {
    background: #fff;
    color: #000;
}

Solution 2: Target Specific Buttons

If you need to style individual buttons differently (like the "No" button), you can use CSS targeting:

/* Target the third button specifically */
.cn-button.bootstrap:nth-child(3) {
    background-color: red !important;
    background-image: none;
}

Solution 3: Increase CSS Specificity

When your styles aren't taking effect, you may need to increase specificity:

#cookie-notice .cn-button.wp-default {
    background: #ebd0bb !important;
    border-color: #444;
    color: #fff;
}

Important Considerations

  • Always use !important declarations sparingly and only when necessary
  • Clear your cache after making CSS changes (browser cache and any caching plugins)
  • Test your changes on different devices and screen sizes
  • Consider using a child theme if adding CSS to your theme files

When CSS Changes Don't Work

If your CSS modifications aren't taking effect, consider these troubleshooting steps:

  1. Check for JavaScript errors in your browser console that might prevent CSS loading
  2. Disable other plugins temporarily to check for conflicts
  3. Verify that your theme isn't aggressively overriding button styles
  4. Ensure you're using the correct CSS classes for your selected button style (WordPress vs. Bootstrap)

While the 'Cookie Notice & Compliance for GDPR / CCPA' team has indicated they may add more styling options in future updates, currently CSS customization remains the most reliable method for achieving specific button colors and styles that match your website's design.

Related Support Threads Support