I want to change the caption background color for the Nectar slider. I found the article about customizing the font properties via CSS. I added a custom class name for the slide(s): home_slider_dark and home_slider_light (depending on what I want the text color and background color scheme to be for each slide).
I tried adding this...
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.home_slider_light .content p { color:#efeddf; background-color:#432e1e;
}
...However, all that did was create an ugly, solid strip of color behind the ENTIRE caption area on the slide, instead of the text-aware background using default settings, and was not transparent at all (I want it to be somewhat transparent) .
Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
I want to change the caption background color for the Nectar slider. I found the article about customizing the font properties via CSS. I added a custom class name for the slide(s): home_slider_dark and home_slider_light (depending on what I want the text color and background color scheme to be for each slide).
I tried adding this...
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.home_slider_light .content p {color:#efeddf;
background-color:#432e1e; }
...However, all that did was create an ugly, solid strip of color behind the ENTIRE caption area on the slide, instead of the text-aware background using default settings, and was not transparent at all (I want it to be somewhat transparent) .
What do I need to adjust to make? Thanks!
Hey,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Hey Again, Hope you had a Great Weekend,
Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.home_slider_light .content p span{ color:#efeddf; background-color:#432e1e; box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5); -o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5); }Thanks
ThemeNectar Support Team
No worries, I appreciate you getting back to me. Code worked perfectly! Thanks so much Tahir.
Hey there,
Thanks for reaching in,
Please be sure to reach out in case you encounter another issue,
Regards
Themenectar Support Team