I have spend quite some time googling on how to change the active carousel indicator colour. By default it almost white and the active one is light gray. I have tried adding a custom CSS with the following:
but, this doesn’t seem to work and is struck out. My page is white in background and hence unable to see the indicators. From the left pane, i select the “Indicators” after dragging carousel and change the “font colour”, but that doesn’t seen to anything. Can someone please help?
I found a way to change from white to gray. That’s some progress. However, it change only from light theme to the dark theme colours. I still cannot set my own colours to the indicators.
Select “Indicators”, in the “Appearance” section on the right, scroll down to the filters and then slide “Invert” all the way to the right and the indicator colours become visible in a white background.
In order to help you better please tell us which carousel you’re trying to use, which version of BSS you’re using, which platform (windows/mac/linus) and version, and give a link to the uploaded site so we can see the code.
I don’t have a public site yet. It’s on my local machine on a windows VM. I am using BSS version 5.3.3.
Just click on “New” design with a blank canvas on BSS and drop the “Carousel” into your code. The left and right controls are by default white. The indicators are also white.
When i drag the “Invert” from the “Filters” section in the “Appearance” pane, the controls and indicators go dard (dark theme). However, they are only from light to dark. However, i want the indicators color (at the bottom of the carousel images / text) to be red or some other colour.
Thank you so much. I created a new css file and works perfect. I guess, i missed the “.carousel” before the indicators. Initially, I was trying to figure out so many options via the UI.
Against a white background, this now works a charm! BSS community and forums are great and the users make it simple superb. I have started enjoying BSS now.
Just to mention, there is a new class added in Boootstrap 5 to the .carousel called .carousel-dark which will invert the colors for the default white fill.
I’ve been finding more and more I prefer to use SVGs for images whenever possible. PNGs can get muddy when shrunken down, or pixelated when enlarged on very large displays, or shown on very hi-resolution screens.
SVGs (when created properly) are usually close in terms of file size, and they look a lot better when the image is responsive, and has to shrink very small, or grow very large, especially if it has small text, outlined letters, thin strokes, etc… I’ve slowly been replacing a lot the PNGs on my websites with SVGs.
Here’s one site where I just recently redid the client’s logo and all the info graphics as SVGs.
and tried putting the background-color change in there, to background-color: red;
however, that wound up changing all indicators (active or not) to an aqua color.
I’m using BSS 6.6.1.
How to change the active, and not active, Carousel indicator colors now?
Adding that produces this now, shade of green for active and blue for inactive (I haven’t changed the default rectangles to dots/circles just yet, wanted to get the colors working first):
Yeah, I’m not sure what’s going on here or why the color’s won’t show correctly, but If I copy and paste your css exactly as is, I wind up with different colors:
If you have inline styles on the indicators buttons they will override the css class. Open the browser’s devtools highlight the indicator buttons and see from where the colors comes