Trouble altering element color in custom code

So I know how to work CSS and HTML generally, but I wouldn’t say I know it incredibly well. For this project, I was sourcing a Swiper.JS element to use as a gallery in my client’s site. Within the element are several CSS tags that you use to alter the output of the swiper element.

In the homepages header and body custom code pannels it works perfect, the only problem is the colors of the directional arrows is sourced from the code. There are simple tags for turning them white or black, but for some reason (I’m guessing because they don’t actually exist as an element in my project) I can’t seem to get a way to alter them.

The color seems to be drawn from this part of the CSS:
}
:root {
–swiper-theme-color: #007aff;
}

but when trying to alter it in the custom code panel I can’t seem to get it to kick in.

I’m not sure what to do. I would settle on them being invisible or off so I could just use my own Icons, but I am not sure how to go about it. Any recommendations would be helpful.

Swiper.JS

Swiper CSS page

Read-only link

Live site (since you can’t see them in the preview panel)

1 Like

Hey @Maydris

First look and I see that the arrows are svgs.

Maybe you can find some useful info here > javascript - How to customize arrow buttons in Swiper - Stack Overflow

Piter :webflow_heart:

1 Like

Haha, yes that does have it!

@PeterDimitrov, you win best answer! :tada::sparkles: