Skip to Content (Press Enter)
UserImage.jpg
Li Han Ong
280Views
7Comments
Css Selector and property for the color of the navigation arrows in carousel
Question
CSS

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!

0
0
02 Jan 2019
Copy Link
UserImage.jpg
Ellakkiya

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


0
0
02 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

Hi Li,

try this piece of code.

SyntaxEditor Code Snippet

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


Regards,

Pankaj

1
0
02 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

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

0
0
02 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

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

2
0
02 Jan 2019
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP

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.



0
0
02 Jan 2019
Copy Link
UserImage.jpg
Li Han Ong

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?

0
0
02 Jan 2019
Copy Link
2018-08-26 20-34-32
Pankaj pant

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


0
0
02 Jan 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.