Carousel Arrows and Indicators

[heatherbell]

The default Bootstrap Carousel arrows and indicators are white which can cause an issue on some images.
Making changes on a new site so just posting our fix.
This adds a black 'shadow' so they show up on any image.
Add to your template/static/user.css and save:

Code: Select all

/* carousel arrows & indicators */
.carousel-control-next,
.carousel-control-prev{
filter: drop-shadow(6px 0px black);
}
.carousel-indicators{
filter: drop-shadow(0px 4px black);
}

Lots of ways the filter can be used to suit yourself:
https://www.w3schools.com/cssref/css3_pr_filter.asp