How to set the color of Image Slider navigation

Posted in: Newspaper
Post count: 26

Hello all,

I am creating a Landing-Page with the Image Slider for the mobile version.

The default setting of the navigation is white for the arrows and grey for the circles.
This is not easy to see and i wonder if there is a function to change the color.

So far i couldn´t find it. Any info – also if not possible – appreciated.

Regards,
Christian

Post count: 23312

Hello Christian,

Please provide your website so I can inspect your Image Slider and also, so I will be able to provide a more accurate response/code.

Thanks for your understanding!

Post count: 26

Hello Catalin,

of course, here is the site:
http://www.linkanton.de/bibi-und-tina-benjamin-bluemchen-und-bibi-blocksberg-produkte
The slider is just used for smartphone-view.

Thanks in advance!

Regards,
Christian

Post count: 23312

Hello

I did not saw any slider on mobile. Please provide a screen with this and also, where exactly you want to change the color.

Thanks for the message!

Post count: 26

Hello Catalin,

you are right, the slider was not on the mobile version. I was not aware, that the normal sites are not visable on the mobile theme. However it will be important for me (and maybe others) to know how to set the color for the slider.

Please see the screenshot here (marked the areas which i would like to change the color)
https://www.pic-upload.de/view-32739453/Example_Slider.jpg.html

Regards,
Christian

Post count: 23312

Hello Christian,

If you want to make these changes you should use a bit of CSS code to do that. Try the code below and place it in Theme panel->Custom CSS area.

The code is ->

.vc_images_carousel .vc_carousel-indicators li{
border:1px solid red!important;
background-color:red!important;
}
.vc_images_carousel .vc_carousel-indicators .vc_active{
background-color:transparent!important;
}

The result is here -> https://www.screencast.com/t/LydieiZ4m

Also, if you want to change the color for arrows, try the code below:

.wpb_content_element .icon-next:before, .wpb_content_element .icon-prev:before{
color:green!important;
}

The result is here -> https://www.screencast.com/t/upff4b2Xck

Thanks for your understanding!

Post count: 26

Hello Catalin,

I can confirm the code worked as described. Thanks a lot for your help!

Have a good week.

Regards,
Christian

Post count: 23312

Hello LinkAntonDE,

I am glad that I could help you!

Thanks for the message!

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.