Jetpack css overrides custom styles and CF7 plugin rules

  • Resolved Giorgio25b

    (@giorgio25b)


    2 years, 5 months ago

    I have some css and js that are handling the labels of my CF7 form.
    All was working fine until I installed Jetpack 10.2, now running 10.2.1 I’m still seeing jetpack.css:06 taking over CF7 and my styles more specifically with this rules:
    .contact-form label span {}

    This is the jetpack.css overriding CF7 and my styles:
    https://c0.wp.com/p/jetpack/10.2.1/css/jetpack.css:06

    How can I avoid Jetpack to have such priority over my other css rules?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Dan (a11n)

    (@drawmyface)

    2 years, 5 months ago

    Hi there

    We actually have a Github issue open about this, so hopefully it will be resolved in future. You can follow that issue for updates:

    https://github.com/Automattic/jetpack/issues/5876

    In the meantime, you would need to override Jetpack’s .contact-form label span styles, using a more specific selector, like .wpcf7-form .contact-form label span

    Hope that helps!

    Thread Starter Giorgio25b

    (@giorgio25b)

    2 years, 5 months ago

    @drawmyface Thanks!
    the css temporary fix/hack is appreciated but I just wanted to point out the issue; I was not aware of the Github 5876, though it has been open almost 5 years.

    Thank you and since the workaround works for now I close this thread.

    .wpcf7-form .contact-form label span { 
    // magic happens again;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Jetpack css overrides custom styles and CF7 plugin rules’ is closed to new replies.