Consent Mode Banner (CMB) Dialog Text/Background Colors

JSL
(@jslittlefield)

1 year, 2 months ago

I have a dark theme for my site. It appears the dialog text color for CMB is being pulled from the website theme but the back ground color is white. My default text color is almost white which makes the CMB dialog unreadable.

Would you advise me how to correct this or change the CMB background to match the background of the page it is appearing on?

Screenclip of Consent Mode Banner

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

mfrankiewicz
(@mfrankiewicz)

1 year, 2 months ago

Hello @jslittlefield ,

Regarding the dark mode issue, it can be fixed using the custom CSS styles setting. Please try enabling the plugin again, and I’ll help you create the necessary CSS rules that you can simply paste into the settings to ensure the Consent Mode Banner text is visible in your template.

Apologies for the delayed response, and let me know how you’d like to proceed!

Best,
Michał
Thread Starter JSL
(@jslittlefield)

1 year, 2 months ago
I’ve reinstalled CMB and enabled it, but I disabled it until I know you are available to look at it. I’ll see if I can recreate the situation in another site with less traffic.

I appreciate you following up with me on this. Once we get it resolved I’m happy to change my review.

Using the Developer Toolbox I found #consent-banner-settings, with background: #fff. I’ve tried modifying the theme CSS with:

.consent-banner-settings

{ /* color of modal box text */ background: #5f584f; }
- This reply was modified 1 year, 2 months ago by JSL.
- This reply was modified 1 year, 2 months ago by JSL.
Moderator Support Moderator
(@moderator)

1 year, 2 months ago
@mfrankiewicz If you request access to a forum user’s installation again, you will be banned from this site and your plugin may be removed. It is that serious and I have archived your reply.

You need to reply here that you understand and will not repeat that again.

While I know you have the best of intentions, it’s forum policy that you not ask users for admin or server access. Users on the forums aren’t your customers, they’re your open source collaborators, and requesting that kind of access can put you and them at high risk.

If they are paying customers (such as people who bought a premium service/product from you) then by all means, direct them to your official customer support system. But in all other cases, you need to help them here on the forums.

Thankfully are other ways to get information you need:
- Ask the user to install the Health Check plugin and get the data that way.
- Ask for a link to the http://pastebin.com/ or https://gist.github.com log of the user’s web server error log.
- Ask the user to create and post a link to their phpinfo(); output.
- Walk the user through enabling WP_DEBUG and how to log that output to a file and how to share that file.
- Walk the user through basic troubleshooting steps such and disabling all other plugins, clear their cache and cookies and try again (the Health Check plugin can do this without impacting any site visitors).
- Ask the user for the step-by-step directions on how they can reproduce the problem.
You get the idea.

We know volunteer support is not easy, and this guideline can feel needlessly restrictive. It’s actually there to protect you as much as end users. Should their site be hacked or have any issues after you accessed it, you could be held legally liable for damages. In addition, it’s difficult for end users to know the difference between helpful developers and people with malicious intentions. Because of that, we rely on plugin developers and long-standing volunteers (like you) to help us and uphold this particular guideline.

When you help users here and in public, you also help the next person with the same problem. They’ll be able to read the debugging and solution and educate themselves. That’s how we get the next generation of developers.
mfrankiewicz
(@mfrankiewicz)

1 year, 2 months ago
Yes @moderator, I understand, that’s a habit from our premium plugin support.

So again, thank you @jslittlefield, could you please enable visibility of consent banner for all users (not only for admins) for testing purposes?

Just uncheck this option:
- This reply was modified 1 year, 2 months ago by mfrankiewicz.
- This reply was modified 1 year, 2 months ago by mfrankiewicz.
Thread Starter JSL
(@jslittlefield)

1 year, 2 months ago

My settings screen does not have the checkbox you highlighted.

Screenshot of CMB Settings

I’ve duplicated the problem on a site that does not have any significant traffic. I use WP Multisite, so it is the same installation. JamesEAllen.com is the site, I changed the Appearance > Editor > Style > Pallets > {Dark}
mfrankiewicz
(@mfrankiewicz)

1 year, 2 months ago
Hello @jslittlefield, thank you and sorry for delayed response.

Please try to insert these styles in your theme template (or add it as custom css file and include it in template using wp_enqueue_style function):
```
#consent-banner-modal {
  background: #222;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 20px;
}

#consent-banner-settings {
  background: #222;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 20px;
}

#consent-banner-main h2 {
  color: #e6e6e6;
}

#consent-banner-modal .consent-banner-modal-wrapper p,
#consent-banner-settings p {
  color: #ccc;
}

#consent-banner-settings h2 {
  color: #e6e6e6;
  border-bottom: 1px solid #444;
}

#consent-banner-settings ul li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

#consent-banner-settings ul label {
  color: #e6e6e6;
}

.consent-banner-button {
  color: rgb(231, 78, 30);
  border-color: rgb(231, 78, 30);
  background-color: transparent;
}

.consent-banner-button:hover {
  color: rgba(231, 78, 30, .85);
  border-color: rgba(231, 78, 30, .85);
}

.consent-banner-button[href="#accept"] {
  color: #ffffff;
  border-color: rgb(231, 78, 30);
  background-color: rgb(231, 78, 30);
}

.consent-banner-button[href="#accept"]:hover {
  background-color: rgb(220, 114, 80);
  border-color: rgb(220, 114, 80);
}

@media (max-width:576px) {
  #consent-banner-settings .consent-banner-settings-buttons {
    background-color: #222;
  }
}
```
Banner will look like this with styles above:
michaloo
(@michaloo)

8 months, 2 weeks ago

Hi @jslittlefield,

let us know if the issue was resolved. For now, I will close this thread, but feel free to open another one if any other assistance is required.

All the best,