Change ALL arrow background Colors

  • tanner96

    (@tanner96)


    2 years, 9 months ago

    Thank you for such a wonderful plugin. I am wondering if there is a global css tag I can use to change the background of ALL arrow colors; instead of doing this process:

    `.white #slider_35892 .owl-nav .owl-next, .white #slider_35870 .owl-nav .owl-next, .white #slider_38796 .owl-nav .owl-next {
    background:rgba(61, 61, 61, 0.8) url(‘https://ellasbubbles.com/wp-content/uploads/2021/07/right-arrow-slider-sa.png’) no-repeat center center !important;
    }

    .white #slider_35892 .owl-nav .owl-prev, .white #slider_35870 .owl-nav .owl-prev {
    background:rgba(61, 61, 61, 0.8) url(‘https://ellasbubbles.com/wp-content/uploads/2021/07/left-arrow-slider-sa.png’) no-repeat center center !important;
    }

    .white #slider_35892 .owl-nav .owl-next:hover, .white #slider_35892 .owl-nav .owl-prev:hover, .white #slider_35870 .owl-nav .owl-next:hover, .white #slider_35870 .owl-nav .owl-prev:hover {
    background-color:rgba(163, 163, 163, .8) !important;
    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter tanner96

    (@tanner96)

    2 years, 9 months ago

    I guess I could give them all the same css ID, but is there a global tag?

    Plugin Author simonpedge

    (@simonpedge)

    2 years, 9 months ago

    No don’t use the same CSS ID for each slider – if you have multiple sliders on a page, each slider must have a unique CSS ID.

    Ret the following CSS:

    .white .owl-carousel .owl-nav .owl-next {
...
}
.white .owl-carousel .owl-nav .owl-prev {
...
}

    If that doesn’t work, then try adding some more specificity:

    .wpb_wrapper .white .owl-carousel .owl-nav .owl-next {
...
}
.wpb_wrapper .white .owl-carousel .owl-nav .owl-prev {
...
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change ALL arrow background Colors’ is closed to new replies.