Okay
  Public Ticket #337211
Nectar Slider Custormisation
Closed

Comments

  • Sanjay started the conversation
    December 17, 2014 at 9:42am

    Hi. Just wondering if you can change the colour of the font used in the nectar sliders? Or add another background behind the heading? If you look at my page whether is light or dark it is difficult to see the text. Thanks! 

  • Sanjay replied
    December 17, 2014 at 3:36pm

    Also, the down arrow on the same page isn't working... but it does when you refresh the page. Is this a jQuery problem?

  •  9,408
    Tahir replied
    December 18, 2014 at 1:41pm

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :
    html body .swiper-slide .content h2 {
    padding: 4px 0px;
    display: inline;
    position: relative;
    left: 10px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    line-height: 95px;
}
    Thanks 

     Salient Support Team 

  • Sanjay replied
    December 19, 2014 at 9:28am

    Thanks that is great, and I even educated myself on rgba colour changes!

    Is it possible to make the font bigger in mobile view?

  •  9,408
    Tahir replied
    December 20, 2014 at 3:23pm

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :
    @media only screen and (max-width: 690px) {
    body .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content {
        margin-top:-100px !important;
    
    }
    
    body .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content h2 {
        font-size: 38px !important;
        line-height: 95px !important;
    }
    
    body .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content p span {
        font-size: 32px !important;
        line-height: 58px !important;
    }
}
@media only screen and (max-width: 480px) {
    body .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content {
        margin-top:-10px !important;
    
    }
    
    .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content h2 {
        font-size: 49px !important;
        line-height: 36px !important;
    }
    
    
    .nectar-slider-wrap[data-full-width="true"][data-fullscreen="false"] .swiper-slide .content p span {
        font-size: 32px !important;
        line-height: 36px !important;
    }
}
    Thanks 

     Salient Support Team 

  • Sanjay replied
    December 21, 2014 at 5:07am

    Great thanks so much!