Is an embedded MailChimp form background color controllable via Additional CSS?

[Doug]

Using Inspect, I tracked the white signup form field at bottom of the page to the this Div element.

<div id="mc_embed_signup">

Further exploring in Inspect, I found the following code block:

#mc_embed_signup {

}

And when I changed the background parameter to #dcdcdc

background: #dcdcdc;

The background of the signup box changed to gray.

So to change this on the site, I went into Customize > Additional CSS and entered

#mc_embed_signup {
    background: #dcdcdc;
}

But it didn't do anything.

I also tried removing the #, and changing it to a .`, but neither did anything.

I'm curious if it's possible to change that background color value in the Additional CSS area, without having to alter the style.css document.

Thanks
doug

https://apparentinsights.com/

[Victor Font]

Try adding the !important keyword to your code. You're code is probably being placed first in the inline styles and it's being overridden by the embedded style.

#mc_embed_signup {
    background: #dcdcdc !important;
}

When I was looking at your source code, you have multiple h1 tags on the page. This is very bad for SEO and accessibility. There should only be 1 h1 tag on a page. All of your social media icons are wrapped in an h1. Not only that, but the code is wrong and causing errors.

This is your code:

<h1 class="wp-svg-bubbles-2 bubbles-2"style="color:#808080;">

There's no space between the class and additional style. This is the corrected code:

<h1 class="wp-svg-bubbles-2 bubbles-2" style="color:#808080;">

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug]

Thanks, Victor. That worked great.

Yes, on the social media icons, I wasn't clear on how those worked. I removed the h1 tags, which I thought were related to size but aren't. Thanks for noting that.

d

[Author]

Posts