Okay
  Public Ticket #234341
How do I style the nectar slider?
Closed

Comments

  • Chris started the conversation
    June 20, 2014 at 1:28am

    I put in a custom CSS into the theme general settings custom CSS box , but nothing seems to be taking effect.

    I would like to change the font size of the main content area as well as change it's position on the page (e.g. move it to the right)  

    Here is my page:

    http://arbormetrix.com/development/home-nectar-slider/


  •  8,839
    Tahir replied
    June 20, 2014 at 7:36pm

    Hey Chris!

    Seems like you got it sorted as i see the content already on the right. 

    Thanks

    ThemeNectar Support Team 

  • Chris replied
    June 20, 2014 at 10:26pm

    actually I got it to move to the right, but not far enough.  I want to be able to modify the text and placement via css directly.  Can you help me with that?

  •  8,839
    Tahir replied
    June 21, 2014 at 1:45pm

    Hey Again!

    You can use the below css to adjust it:

    /* For Desktop */
@media only screen and (max-width : 1000px) {
    body .nectar-slider-wrap div.swiper-slide .content h2 {
        font-size: 24px!important;
        line-height: 51px!important;
        margin-bottom: 6px;
        letter-spacing: -0.5px;
    }
    
    body .nectar-slider-wrap div.swiper-slide .content p {
        font-size: 15px!important;
        line-height: 20px!important;
        padding-bottom: 7px;
    }
    
    .nectar-slider-wrap div.swiper-slide .button a {
        font-size: 15px!important;
        padding: 2px 7px;
    }


    .home .swiper-slide[data-x-pos="right"] .content {
        width: 86%;
    }
    .nectar-slider-wrap.first-section .swiper-slide .content {
        margin-top: 10px !important;
        top: 30px !important;
    }
}



/* For Mobile */
@media only screen and (max-width : 470px) {
    body .nectar-slider-wrap div.swiper-slide .content h2 {
        font-size: 24px!important;
        line-height: 51px!important;
        margin-bottom: 6px;
        letter-spacing: -0.5px;
    }
    
    body .nectar-slider-wrap div.swiper-slide .content p {
        font-size: 15px!important;
        line-height: 20px!important;
        padding-bottom: 7px;
    }
    
    .nectar-slider-wrap div.swiper-slide .button a {
        font-size: 15px!important;
        padding: 2px 7px;
    }


    .home .swiper-slide[data-x-pos="right"] .content {
        width: 86%;
    }
    .nectar-slider-wrap.first-section .swiper-slide .content {
        margin-top: 10px !important;
        top: 30px !important;
    }
}

    Cheers

    ThemeNectar Support Team 

  • Chris replied
    June 23, 2014 at 6:51am

    That CSS didn't work in the custom css box in general settings.

    the only way I could effect any change was by directly editing the style.css file.  

    Here is what I did:

    1.  I edited this css in style.css (this worked)

    .swiper-slide .content h2 {
    font-size: 40px;  /* I reduced the font by 20px here */
    line-height: 80px;
    letter-spacing: -1px;
    display: block;
    color: #fff;
    font-family: 'OpenSansLight';
    }

    2. I then droped the identical css into the custom css box in general settings (this did not work)

    .swiper-slide .content h2 {
    font-size: 40px;
    line-height: 80px;
    letter-spacing: -1px;
    display: block;
    color: #fff;
    font-family: 'OpenSansLight';
    }

    For some reason the css is not being seen in the custom css box.  BTW, I did the same with the css you gave me above. 

    I would really like to be able to put it there so that I can avoid any issues with future upgrades.  

    Thanks!

  •  8,839
    Tahir replied
    June 23, 2014 at 3:53pm

    Hey Chris!

    Try adding it with a !important like this:

    body .swiper-slide .content h2 {
    font-size: 40px !important;
    line-height: 80px;
    letter-spacing: -1px;
    display: block;
    color: #fff;
    font-family: 'OpenSansLight';
}

    Thanks

    ThemeNectar Support Team 

  • Jonathan replied
    July 29, 2014 at 11:51pm

    I'm having the exact same issue and it seems there are a few people who have had it, yet I dont see a solution. No matter what CSS I use, nothing changes on the Nectar Slider. I'll leave some CSS on the page just to show you...
    http://dev2.bobhazlett.org

    Any clue what is stopping it from working? 

  •  8,839
    Tahir replied
    July 31, 2014 at 3:16am

    Hey Jonathan!

    You seem to be using the revolution slider on the url you posted. Please provide a page link with a nectar slider. The only reason it would not work is that the css selector is incorrect or there is another one overwriting the values with higher Css precedence. 

    Thanks

    ThemeNectar Support Team