CSS help please

  • I’m trying to figure out how to change the color of a couple of elements on my individual product pages. Please refer to this screen shot: https://i.imgur.com/Mpop8K0.jpg

    What I would like to change:

    A: Background color and the magnifying glass icon.

    B: The border.

    C: This one isn’t really necessary, just wondering if there is a way to change the color of the circled check marks in the bullet points.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @moonyg,

    Am I correct in saying that for A, you’re wanting to change the background colour of the magnifying glass icon? That can be done with this CSS, but since you didn’t specify a colour, I’m using light blue as an example. Feel free to change the HEX code to whatever you wish:

    .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    background-color: #add8e6 !important;
    }

    What would you like to change to the border? If it’s the colour, please try the following CSS, once again using light blue as an example:

    .owp-product-nav li a.owp-nav-link {
    border: 2px solid #add8e6 !important;
    }

    For C, yes you can by using the following CSS:

    i.icon-check {
    color: #add8e6 !important;
    }

    Using all these CSS codes would give the following effect: https://prnt.sc/liv0g4

    If you just want to change the colours, you can replace the light blue HEX code I used with whichever you wish: https://imagecolorpicker.com/

    But if you want to change anything else, or this doesn’t work, let me know and I’ll try to help! ??

    Thread Starter moonyg

    (@moonyg)

    YES! Worked perfectly. Usually I can figure out what to change, sometimes I can’t. That’s why I’m glad we have this forum. Thank you so much. ??

    Happy to help. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS help please’ is closed to new replies.

Tags