Colour Swatch Outline

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.

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.

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.

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

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.

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.

Aizaz,

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

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.

Aizaz,

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

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