Phoca Premiere carousel swiper

Phoca Templates - templates for Joomla! CMS
User avatar
jrjr
Phoca Enthusiast
Phoca Enthusiast
Posts: 75
Joined: 30 Nov 2018, 23:56

Phoca Premiere carousel swiper

Post by jrjr » 26 Jan 2019, 20:00

How do I change the color of the < > swiper arrows in the carousel?

Tags:

christine
Phoca Hero
Phoca Hero
Posts: 1675
Joined: 28 Nov 2010, 17:20

Re: Phoca Premiere carousel swiper

Post by christine » 27 Jan 2019, 00:06

Hi,

These are background-images (SVG) in swiper.min.css:

Code: Select all

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
Maybe this could help you:
https://idangero.us/swiper/forum/#!/?sw ... on%20color > Change navigation arrow color.

There is an additional answer from an user:
You can just add CSS to override theirs. Make sure you load your CSS after their stylesheet. For example, I provided my own SVG's encoded in the CSS (same as they do it) and simply over rode theirs in my CSS
Kind regards
Christine

User avatar
jrjr
Phoca Enthusiast
Phoca Enthusiast
Posts: 75
Joined: 30 Nov 2018, 23:56

Re: Phoca Premiere carousel swiper

Post by jrjr » 27 Jan 2019, 03:18

Thanks for the links
I have read and read on this topic but how to change the color evades me.
I have tried these in custom.scss and recompiled but no change. I dont't know how to change svg

.swiper-button-next.swiper-button-white {
color:#000000 !important;
}

.swiper-button-white {
color:#000000 !important;
}

.swiper-button-next {
color:#000000 !important;
}

christine
Phoca Hero
Phoca Hero
Posts: 1675
Joined: 28 Nov 2010, 17:20

Re: Phoca Premiere carousel swiper

Post by christine » 27 Jan 2019, 13:04

Hi,

you know, it does not belong to phoca template. I Also tried ca. your codes above of course.

Try following to your custom.scss:

Code: Select all

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}
temporary it works.

Kind regards
Christine

User avatar
jrjr
Phoca Enthusiast
Phoca Enthusiast
Posts: 75
Joined: 30 Nov 2018, 23:56

Re: Phoca Premiere carousel swiper

Post by jrjr » 27 Jan 2019, 15:42

"I Also tried ca. your codes above of course." - What does the ca. mean?

I entered your code from above in my custom.scss and recompiled. It did not change the color of the arrows.

However I had an idea and it worked...
I created my own arrow images and placed them on my server. I then entered the url of that image in your code above and success! My arrows are now black and I am able to change them by editing my own images.
Check it out @
http://site2.lakeshoreleather.com/

.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("/images/Carousel/swiperarrowPrev.png") !important;
}

.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("/images/Carousel/swiperarrowNext.png") !important;
}

I'm not sure what affect this has on site performance, probably takes a hit, but it does work.

christine
Phoca Hero
Phoca Hero
Posts: 1675
Joined: 28 Nov 2010, 17:20

Re: Phoca Premiere carousel swiper

Post by christine » 27 Jan 2019, 16:41

jrjr wrote:
27 Jan 2019, 15:42
"I Also tried ca. your codes above of course." - What does the ca. mean?
sorry, should be: approximately
I entered your code from above in my custom.scss and recompiled. It did not change the color of the arrows.
The Code itself was temporarily working! But:
However I had an idea and it worked...
I created my own arrow images and placed them on my server. I then entered the url of that image in your code above and success!

that's why I sent the link above > see the "additional answer". As I can't provide an image, the only possibility was, to change the code above from: ... 23ffffff to: 23000000 ... :wink:

The URL I toke from another thread.
I'm not sure what affect this has on site performance, probably takes a hit, but it does work.
I think, it's OK, as the Code is in the custom.scss. But keep it somewhere :-)

Kind regards
Christine

User avatar
jrjr
Phoca Enthusiast
Phoca Enthusiast
Posts: 75
Joined: 30 Nov 2018, 23:56

Re: Phoca Premiere carousel swiper

Post by jrjr » 27 Jan 2019, 17:06

Thanks for the help.... again :-)
Mark it solved if you like

christine
Phoca Hero
Phoca Hero
Posts: 1675
Joined: 28 Nov 2010, 17:20

Re: Phoca Premiere carousel swiper

Post by christine » 27 Jan 2019, 17:28

Thank you for your feedback and infos.

Kind regards
Christine

Post Reply