Custom background color to notices in Storefront

  • grindshopfi · Member ·

    Hi,

    I would like to change the notice bar background color in one of the Storefront notices (on product page in reviews the ‘there are no reviews yet’ -notification). I’ve been able to change the color in other notifications with custom css, but haven’t found one for this yet. Could you help?

    I’ve already have these in use, but none of them worked to this particular box:

    div.woocommerce-message {
    background-color: #e3e3e3 !important;
    color: #000000 !important;
    }
    .woocommerce-error {
    background-color: #000000 !important;
    color: #ffffff !important;
    }
    .woocommerce-demo-store .demo_store {
    background-color: black;
    }
    .woocommerce-info {
    background-color: #000000;
    }

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    @grindshopfi I’m sure we can help. Could you link us to the correct page? Noting too, if you don’t want to share the link here, you can also contact us in chat rather than having to use the forums.

    Contact

    Chat isn’t best for CSS questions (since CSS can take a bit longer to plan out properly) but a color change might be doable there.

    If you want to keep using the forums, a link would be ideal, or just tell us how to find a page without reviews so we can see the box you’re seeing. We’ll go from there.

  • supernovia · Staff ·

    I noticed as well, I’m not able to access inside pages to find the box you’re referring to, unless I have an extra login. Would you be able to create access for us and provide that over chat?

  • grindshopfi · Member ·

    Hi,

    thanks for your response! I forgot I had maintenance site up but disabled it now so you can enter the site. The box in question can be found for example here (and in every other product page for that matter):

    https://grindshopfinland.wpcomstaging.com/tuote/naisten-urakoitsijat-t-paita/

    If you open Ratings-section (called ‘Arviot (0)’, located beneath the description section), there is a text letting customers now that there are no ratings yet (the blue box is saying ‘tuotearvioita ei vielä ole’). This is the box/notification of which I’d like the background to be changed to #000000 aka black.

  • staff-blorbo · Staff ·

    For that, use this:

    .woocommerce-noreviews {
    background-color: #000;
}
  • grindshopfi · Member ·

    Worked perfectly, thanks! :)

  • The topic ‘Custom background color to notices in Storefront’ is closed to new replies.