Carousel Arrows and Indicators
Posted: Fri May 28, 2021 10:34 am
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:
Lots of ways the filter can be used to suit yourself:
https://www.w3schools.com/cssref/css3_pr_filter.asp
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);
}
https://www.w3schools.com/cssref/css3_pr_filter.asp