Horizon Theme - Pagination dot colour cannot be changed?

Store Design
,
1

Horizon/Dwell theme - my pagination dots are grey/black regardless of my assigned colour schemes not containing those colours. This is happening on slideshows and product images. I don’t see any other place to customise the colour? I’d like them to be white or match the colour scheme.

2 Likes
2

Hey @acosmos

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

4

Hi Moeed,

PW: 3N$7fyxV689k!

1 Like
5

Hey @acosmos

I think this code will match your color scheme, worth giving it a try.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.slideshow-controls__dots button:after {
    filter: invert(1) !important;
    background-color: #adadad !important;
}
</style>

RESULT:

image
image336×599 59 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
6

Thanks Moeed. That seems to control some of it. I added that code and changed it to white, but it’s just a transparent dot with a grey outline now. I’m not entirely sure where it is pulling all the colours from (the fill of dot, outline, hover, etc) and how the “invert” is working.

7

This theme uses mix-blend-mode to ensure that control elements (pagination dots) are always visible against background.
So the color changes depending on what’s below it.

You can override it if you use this in “Custom CSS” of this section:

slideshow-controls {
  mix-blend-mode: initial;
}
1 Like
8

Thank you for explaining and finding the code for me. With the overrride, does it just pull a colour from the section’s colour scheme?

9

Yes, it does. Looks like the foreground color.

1 Like