red styling on basket

  • Resolved laurareeddesign

    (@laurareeddesign)


    4 years ago

    My sister is helping me set up my shop and has run up against an issue, this is her message (i cant see where/if it is possible to upload the screen shots that she refers to):

    I am currently building a shop using Themify and WooCommerce in WordPress. Each time a product is added to the basket, a message shows confirming this – however the messages are styled with a red border, and the basket count is also red. This looks like an error which I am concerned is going to put people off! (screen shot 1).

    When I modify the CSS in the console, I can remove the borders when I uncheck the three circled in the attached (screen shot 2). And this looks a lot better! However whenever I copy the modified CSS into the ‘Custom CSS’ section in WordPress, it doesn’t work.

    I’m no CSS expert… so I must be copying the wrong thing? Or perhaps there’s another setting which is overriding this CSS? I’ve googled so many forums but can’t work it out – help appreciated!

    I assume once I have worked out how to do this for the border then I can apply the same logic for the basket, as it’s the same – I can modify the CSS in Chrome, but not when I copy paste the edited CSS back into WordPress! Thanks a lot

Viewing 8 replies - 1 through 8 (of 8 total)
  • johannsf

    (@johannsf)

    Hi – the screen shots aren’t showing!

    Thread Starter laurareeddesign

    (@laurareeddesign)

    I couldnt work out how to attach them? as per above

    johannsf

    (@johannsf)

    Can you send a link to the site? Most people post screenshots to this site and then add the link: https://snipboard.io, but just a link to the page that’s having the problem might be enough.

    Thread Starter laurareeddesign

    (@laurareeddesign)

    thanks for the tip, i am new to this and clueless

    the page is still in private mode so dont think i can share a link?

    this is the first screen shot:

    https://snipboard.io/0HbFGJ.jpg

    and here is the second:

    https://snipboard.io/gxVSLa.jpg

    hope that has worked!

    thanks

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Thank you very much for providing those screenshots. It appears there might be some styling coming from your theme. With the default Storefront theme, the “Product added to cart” message is styled fairly differently:

    added to cart
    Link to image: https://d.pr/i/AeYdmk

    If you were just wanting to remove that top-border on the message so that it looks like your second screenshot, you could try something like this:

    
.woocommerce-page .woocommerce-message {
  border-top: 0px;
}

    You can add that to the “Additional CSS” section of your Customizer (Appearance > Customize).

    I hope that helps!

    Thread Starter laurareeddesign

    (@laurareeddesign)

    She says that worked! thanks KellyMetal!

    She tried to apply the same logic to the basket icon but it didnt work and has asked if you might possibly know how to fix that too? (screen shot attached)

    “I wondered if you could ask them how to do the same for the basket icon… the attached might help. I tried to code this myself, so added this line of CSS:
    cart-wrap a span {
    background-color: #93713C
    }
    ”

    Its less of an issue as we can just disable the screen count but thought we may as well as as we are here

    This is ths screenshot: https://snipboard.io/ERcrM5.jpg

    Thanks again, much appreciated

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Glad to hear that worked for the “added to cart” message!

    For that shopping cart icon, based on the screenshot, that snippet looks like it should be close but is missing a bit of punctuation — would need a . before any class names (“cart-wrap” is a class, while “a” and “span” are HTML elements), and a ; after the style rules. Hopefully this does the trick:

    
.cart-wrap a span {
    background-color: #93713C;
}

    Also, to note, the snippet they wrote is changing the background from red to this #93713C color — hopefully that’s what they were trying to do:

    color
    Link to image: https://d.pr/i/Jntdr2

    Plugin Support Tseten a11n

    (@tibetanitech)

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘red styling on basket’ is closed to new replies.