Okay
  Public Ticket #1023223
Hidding the Nectar Slider left/right arrows backgrounds
Closed

Comments

  •  5
    JuanDosCuartos started the conversation
    January 16, 2017 at 4:57pm

    Hi there again,

    is it possible to remove the grey background square of the left/right Nectar Slider arrows? Ideally, it should maintain the default light/dark behaviour...

    Thanks!!!

    ———

    Editing to say that I've found a ticket that partially builds a solution for this with the following code:

    .swiper-container .slider-prev > i {  color: black; }
    .swiper-container .slider-next > i { color: black; }

    .swiper-container a.slider-prev:hover, .swiper-container a.slider-next:hover {
        background-color: rgba(0,0,0,0.0);
    }

    .swiper-container a.slider-prev, .swiper-container a.slider-next {
        background-color: rgba(0,0,0,0.0);
    }

    .swiper-container .slider-next .slide-count,.swiper-container .slider-prev .slide-count {
        background-color: rgba(0,0,0,0.0);
    }

    However, the slide count switches colour back and forth from black to white in desktop and in mobile devices (phones and tablets) the semi-transparent background (where the arrows and slide count sir) still remains.

    I am for sure missing some more code.

    Please advise! :)

  •  8,996
    Tahir replied
    January 17, 2017 at 2:50pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .slider-prev.dark-cs, .slider-next.dark-cs {
    background-color: transparent !important;
}
.slider-prev.dark-cs:hover, .slider-next.dark-cs:hover {
    background-color: transparent !important;
}

    Thanks

    ThemeNectar Support Team 

  •  5
    JuanDosCuartos replied
    January 18, 2017 at 1:13pm

    Hi Tahir, sorry but that didn't worked. However I've managed (trial and error) to accomplish the desired result with the next code:

    .swiper-container .slider-prev > i { color: black; }
    .swiper-container .slider-next > i { color: black; }
    .swiper-container .slider-prev .slide-count { color: black; }
    .swiper-container .slider-next .slide-count { color: black; }
    .swiper-container .slider-prev .slide-count > i { color: black; }
    .swiper-container .slider-next .slide-count > i { color: black; }
.swiper-container a.slider-prev, .swiper-container a.slider-next {
        background-color: transparent !important;
    }
    This turns the slider arrows/slide count background transparent while permanently setting to black color the arrows and the same slide count content (oblique line+small numbers).

    However, not beign myself a code connoisseur, I'm afraid it is way too much code for such a simple instruction.

    Could you please be so kind to advise on this and –if needed– properly narrowing/rewriting such code?

    Thanks a lot!!

  •  8,996
    Tahir replied
    January 18, 2017 at 4:31pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .swiper-container .slider-prev > i ,.swiper-container .slider-next > i, .swiper-container .slider-prev .slide-count , .swiper-container .slider-next .slide-count, .swiper-container .slider-prev .slide-count > i , .swiper-container .slider-next .slide-count > i {
    color: black;
}
.swiper-container a.slider-prev, .swiper-container a.slider-next {
    background-color: transparent !important;
}

    Thanks

    ThemeNectar Support Team 

  •  5
    JuanDosCuartos replied
    January 19, 2017 at 2:22pm

    Working as expected now. Thanks a lot man! :)

  •  3
    cipriano2u replied
    January 21, 2019 at 11:00am

    Hi guys,


    Is it possible to replace the slider arrows with custom arrows?  Like a svg, or png we can upload and replace with.  I scanned this forum for instructions on how to do this. I couldn't find any.

    Thanks!

  •  8,996
    Tahir replied
    January 21, 2019 at 11:23am

    Hey C,

    No i am afraid its not possible at the moment. 

    Best

    ThemeNectar Support Team