I want to change CMS collection component indicator's img-circle color from blue to red as mentioned in below image. After doing inspection in browser below is the property that sets the color to blue.

.forceCommunityCarousel a.slds-carousel__indicator-action.slds-is-active {
    background: var(--lwc-carouselIndicatorColorBackgroundActive,rgb(1, 118, 211));
    border-color: var(--lwc-carouselIndicatorColorBackgroundActive,rgb(1, 118, 211));

enter image description here

I tried to apply red color in Edit CSS option of Community but its not working.

I am able to apply below styling where white color was replaced with red color but blue color is still there:

.forceCommunityCarousel a.slds-carousel__indicator-action{
    background-color : rgb(213, 43, 30);

enter image description here

Can someone please suggest how Can I change the blue indicator to red?

Basically, we need it for our branding and blue color does not apply to our branding.

1 Answer 1


Finally, Found the solution:

.forceCommunityCarousel ul.slds-carousel__indicators li.slds-carousel__indicator a.slds-carousel__indicator-action.slds-is-active {
   background : rgb(213, 43, 30); 
   border-color: rgb(213, 43, 30); 

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .