Custom background color to notices in Storefront

  • Author
    Posts
  • #3363133

    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 grindshopfinland.wpcomstaging.com.

    #3363352

    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.

    https://en.support.wordpress.com/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.

    #3363355

    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?

    #3363371

    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.

    #3363391

    macmanx
    Staff

    For that, use this:

    .woocommerce-noreviews {
        background-color: #000;
    }
    #3363577

    grindshopfi
    Member

    Worked perfectly, thanks! :)

You must be logged in to reply to this topic.