Edit Slider arrows and buttons

Design help General
1

Can I change the colour of the arrows or round buttons in the slider or do I have to replace them?

1 Like
2

Replace. Itā€™s \e600 from their icons. You can replace it with SVG so you can change itā€™s color later.

1 Like
3

Thanks very much for the help!

4

@Boustfield For the slider arrows, you can simply change the Font Color of the arrow element, by styling it in webflow.

The round dot buttons are a bit more complex, and although we cannot style them in the webflow editor, you can add a custom HTML Embed to apply your own custom colors. For example, if you insert this into an HTML embed on your page, the dot colors should change:

<style>
.w-slider-dot {
  background: teal;
}
.w-slider-dot.w-active {
  background: aqua;
}
</style>

Hope that helps!
-Dan

8 Likes
5

Oh I didnā€™t know that! But that makes sense @danro! That icon is a font undoubtly ;D

6

@thesergle tried that, didnt work. :frowning: are u supposed to change the .w-slider-dot to your own custom class?? i donā€™t know programmingā€¦

7

No @Amreet_Gill you just paste this code in your custom code page of your site settings:

<style>
.w-slider-dot {
  background: teal;
}
.w-slider-dot.w-active {
  background: aqua;
}
</style>

And then replace teal with whatever color you want your dot to be and replace aqua with what color you want your active dot to be. You can find the exact color in Webflow color picker and past the ā€œ#abababā€ color value there too.

1 Like
8

tried what u said. still nothing :frowning:

https://webflow.com/design/yspn?preview=115ba4fba7eb3ad6e865a36bbc654987

have a look and see what i did wrong.

9

It wouldnā€™t show the changes inside the designer. Only when you publish your site.

10

Hi! I have the same problem, the buttons are the same style, white or black.

Iā€™ve added the style but I donā€™t know why doesnā€™t work.

Here you go the webflow site
https://webflow.com/website/luis-rivas-cano

I would like change the fill and put other border colorā€¦

Thanks in advance :wink:

11

Hi @jselva
That is because you are using inverted option for colors. Remove inversion tick on Slider in Webflow Designer Mode and it will be all fine ;)

1 Like
12

Nice! I thought the changes would be displayed in Designer Mode, once Iā€™ve published Iā€™ve saw the changes :smile:

I would like increase the buttons size, how can I do?

13

OK, Iā€™ve added ā€œfont-size: 20px;ā€ attribute and works fine :smiley_cat:

Thanks a lot!

1 Like
14

Whatā€™s the hook when targeting the inverted active class?

15

Just in case you were wonderingā€¦ it is MUCH easier than you you think. No coding required. You can edit the slider navigation, add your own images instead of the chevrons, etc. You can even edit the selectors.

http://tutorials.webflow.com/courses is where you can find the tutorials for this and much more.

Also, up until recently (this week) they had a vimeo page with A LOT more videosā€¦ but that seems to be void of all videos except one now. Maybe if an admin sees this, they can get that fixed. It was a GREAT additional resource, that is now gone. :frowning:

16

To change the dot image like the arrows where a nice feature for next updates. have anyone heared something about a next webflow update?

17 
.w-slider-nav-invert>div.w-active {
background: #FFD001;
border: 2px solid #FFD001;
}
.w-slider-nav-invert>div {
background: #ffffff;
border: 2px solid #979797;
}
18

And if you also want a hover effect for the buttons, just try:

.w-slider-dot:hover {
background: red;
}

19

Change color of slider dots:

.w-slider-dot { background: #cccccc; } .w-slider-dot.w-active { background: #06d6a0; }

Change color of arrow symbols:

[class^="w-icon-"], [class*=" w-icon-"]{ color: #ddd; }