Css Selector and property for the color of the navigation arrows in carousel

Hello. I'm developing a mobile app and I want to change the colour of the navigation arrows, but I can't seem to do it even after changing the color and background-color property of several of the carousel navigation selectors. Please do advise thanks!

Li Han Ong wrote:

Hello. I'm developing a mobile app and I want to change the colour of the navigation arrows, but I can't seem to do it even after changing the color and background-color property of several of the carousel navigation selectors. Please do advise thanks!

Hi Li Han Ong,

SyntaxEditor Code Snippet

.carousel .carousel-navigation {
    color: #3cb372;
    /*primary-color*/
    cursor: pointer;
    display: inline-block;
    font-size: 22px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    width: 20px;
    will-change: opacity;
    z-index: 2;
    opacity: 1;
    transition: opacity 150ms linear;
} 

above css is for the navigation bar of carousel. 

Regards,

Ellakkiya.S


Hi Li,

try this piece of code.

SyntaxEditor Code Snippet

.carousel .carousel-navigation {
    color: #ffffff;
}


Regards,

Pankaj

Hi,

Just adding a bit line to pankaj's Answer,

Make sure you need to override the respective CSS on local style css of  that particular screen 

& do make it as !important

.carousel .carousel-navigation {
    color: #ffffff !important;
}


You might have attempt the right solution but didn't add !important & thus it didn't work.

Cheers

assif_tiger wrote:

Hi,

Just adding a bit line to pankaj's Answer,

Make sure you need to override the respective CSS on local style css of  that particular screen 

& do make it as !important

.carousel .carousel-navigation {
    color: #ffffff !important;
}


You might have attempt the right solution but didn't add !important & thus it didn't work.

Cheers

 Use! important very, VERY sparingly -- it overrides just about everything, even inline styles, and messes in a less-than-obvious way with the "cascade" of style rules that gives CSS its name. It's easy to use badly, and tends to multiply, particularly when misused. You can easily end up with a element with !importantt rules that you want to override, at which point you often have to either refactor your styles or use another rulle !important contribute to the problem.


The better solution for this is to use a class selector. 

In this case, keep the carousel inside the container and put some class name for the same container something like below.

.my-carousel-selector .carousel .carousel-navigation {
    color: #ffffff;
}


Regards,

Pankaj

Hi thanks for all your comments, I tried changing the color property with !important and with the class selector, but neither method seems to change the color of the arrows. It still remains white?

Pankaj pant wrote:

assif_tiger wrote:

Hi,

Just adding a bit line to pankaj's Answer,

Make sure you need to override the respective CSS on local style css of  that particular screen 

& do make it as !important

.carousel .carousel-navigation {
    color: #ffffff !important;
}


You might have attempt the right solution but didn't add !important & thus it didn't work.

Cheers

 Use! important very, VERY sparingly -- it overrides just about everything, even inline styles, and messes in a less-than-obvious way with the "cascade" of style rules that gives CSS its name. It's easy to use badly, and tends to multiply, particularly when misused. You can easily end up with a element with !importantt rules that you want to override, at which point you often have to either refactor your styles or use another rulle !important contribute to the problem.


The better solution for this is to use a class selector. 

In this case, keep the carousel inside the container and put some class name for the same container something like below.

.my-carousel-selector .carousel .carousel-navigation {
    color: #ffffff;
}


Regards,

Pankaj

Thanks Appreciate Pankaj,

Will definitely try your approach in my existing work.



Li Han Ong wrote:

Hi thanks for all your comments, I tried changing the color property with !important and with the class selector, but neither method seems to change the color of the arrows. It still remains white?

Hi Li,

If possible can you please share OML File.

Did you check the chrome web tool? Are the styles are there or not?

One more question, where are you applying the CSS, Is this at the page level or theme level?

Regards,

Pankaj