some hover styles

  • Resolved harrydevries

    (@harrydevries)


    2 months, 2 weeks ago

    Maybe i am just being a bit dumb (if so my apologies beforehand). I would like to set some hover styles for the 3 buttons but no luck so far. I just use my own stylesheet. Maybe i am using the wrong selectors lol :

    .wpconsent-preferences-cookies, .wpconsent-cancel-cookies, .wpconsent-accept-cookies{
    transition:all .3s ease-in-out!important;
    }

    .wpconsent-preferences-cookies:hover, .wpconsent-cancel-cookies:hover{
    background:#bc9f60!important
}

.wpconsent-accept-cookies{
    border:1px solid #bc9f60;
}

.wpconsent-accept-cookies:hover{
    border:1px solid #fff;
    background:transparent!important;
    color:#fff!important
}

    Is it possible?

Viewing 1 replies (of 1 total)
  • Plugin Author Mircea Sandu

    (@gripgrip)

    2 months, 2 weeks ago

    Hi @harrydevries,

    WPConsent uses a web standard called Shadow DOM that enables the banner to have its styling isolated from the rest of the page. This provides a consistent experience across all themes/websites.

    CSS changes are still possible using part attributes and CSS variables. You can find more details on how to style elements using part attributes in this article: https://wpconsent.com/docs/how-to-customize-the-wpconsent-banner-with-css/

    For example to target the accept button hover styles you can use this selector:

    #wpconsent-container::part(wpconsent-button-accept):hover{}

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.