Same form, different coloured font

[demonboy]

If you look on a blog page like this one https://followtheboat.com/busting-4m-waves-and-tropical-island-hopping-in-the-java-sea/ you can see a mailchimp sign-up form in both the sidebar and the footer. I have styled the form to have white text for the footer using:

#mc_embed_signup_scroll > div:nth-child(1) > label, #mc_embed_signup_scroll > div:nth-child(2) > label {color:#fff;}

… but of course this affects the styling in the sidebar too. How do I differentiate between the two so the one in the sidebar has black text?

Thanks!

[christian]

Hey @demonboy,

Your site’s currently in under construction mode so I couldn’t see the form. X/Pro has classes assigned to the top and bottom footers though. You can target both footers with .x-colophon. If you need to target the top footer only, you need to use .x-colophon.top. For the bottom footer, its .x-colophon.bottom.

Applied to your current CSS, it should look like this:

.x-colophon [your existing selector] {
/* CSS Properties */
}

X/Pro has a class for the sidebar too. It’s .x-sidebar. You can add it at at the beginning of your current selector like the sample above.

Hope that helps.

[demonboy]

Hi @christian_y… That’s useful to know about the footer and sidebar class. However I think I am copying the wrong selector. On the sidebar if I use Inspector I end up with this:

.x-sidebar #custom_html-7 > div:nth-child(2) > div:nth-child(3) > form:nth-child(1) > div:nth-child(1) > div:nth-child(1) > label:nth-child(1),
.x-sidebar #custom_html-7 > div:nth-child(2) > div:nth-child(3) > form:nth-child(1) > div:nth-child(1) > div:nth-child(2) > label:nth-child(1) {color:#000;} 

And the .x-sidebar is not working in this case. That selector seems way too convoluted to me! Any further advice? My website is no longer under construction so you can see this page now.

[christian]

Hey @demonboy,

Upon checking, your CSS works.

Here’s a tip to make the selector simpler. Use the class or even the ID (to be more specific) of parent elements.

Here’s a sample.

.x-sidebar #mc_embed_signup_scroll .mc-field-group label {
    color: red !important;
}

It’s quite extreme but it shows what you can use.

Hope that helps.

[demonboy]

I think that must have been a caching issue. Anyway, thanks for the tips, @christian_y

[jade]

You’re welcome, @demonboy.