Home › Forums › WoodMart support forum › Colour Swatch Outline

Colour Swatch Outline

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 28, 2019 at 3:45 am #147170

    kwallace
    Participant

    Hi, I am just playing with the theme and noticed that the outline for the variation colour swatches is hard to see. Not ususally a problem but one of my colours is white.

    On Vivaldi I get a light greay outline but on IE it shows nothing so the customer would not be able to know there is a choice there.

    Is there a way to change the outline?

    I also tried to use a picture but it won’t show up at all.

    Attachments:
    You must be logged in to view attached files.
    September 28, 2019 at 7:45 am #147197

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    As your color swatches outline not shown in Internet Explorer. To display the grey outline inside your color swatches you can use the below code in Theme Setting >> Custom CSS >> GLobal CSS section:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.colored-swatch {
    border: 5px solid grey !important;
}
}

    Best Regards.

    September 29, 2019 at 12:22 am #147302

    kwallace
    Participant

    Aizaz,

    Hi, thanks for the message, sorry that did not work either for IE or Vivaldi, I changed the border to red and it’s still the same.

    Attachments:
    You must be logged in to view attached files.
    September 29, 2019 at 8:59 am #147332

    Bogdan Donovan
    Keymaster

    Hi,

    Try to replace the previous code with this one. 

    .woodmart-swatch.swatch-with-bg[style*="rgb(255, 255, 255)"] {
border: 1px solid rgba(0,0,0,.15);
}

    Regards

    September 29, 2019 at 11:13 pm #147432

    kwallace
    Participant

    Bogdan,

    Hi, thank you for the update but this too has not had any effect. I should also point out there is no outline in any browser if you do the mouse over quick view

    The white in the attached is actually the first choice but it cannot be seen.

    Attachments:
    You must be logged in to view attached files.
    September 30, 2019 at 6:13 am #147449

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Kindly provide your login credentials so I can access your admin area and check your site by applying the css code to display the border of color swatches.

    Best Regards.

    September 30, 2019 at 7:05 am #147468

    kwallace
    Participant

    Aizaz,

    Hi, thanks for the update, please see private detail.

    September 30, 2019 at 11:36 am #147555

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You can use the below css code in Theme Settings >> Custom Css >> Global Custom CSS to apply the outline to color swatches. I have test this in IE and my browser and its working fine for me.

    div.woodmart-swatch {
    border: 3px solid red;
}

    Screenshot from IE: https://jmp.sh/dOv6OHl
    Screenshot from Chrome: https://jmp.sh/QnNbifK
    Swatches outline on shop page when we hover over the product: https://jmp.sh/zXIkHC9

    Best Regards.

    October 1, 2019 at 5:40 am #147693

    kwallace
    Participant

    Aizaz,

    Hi, thank you for that all good now, cheers.

    October 1, 2019 at 5:47 am #147697

    Aizaz Imtiaz Awan
    Keymaster

    Well, kwallace!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

    Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

    Have a wonderful day.

    Topic Closed.
    Best Regards.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Colour Swatch Outline’ is closed to new replies.