Support » Theme: Nuntius » Jetpack css stepping on slideshow controls

  • Resolved Jim

    (@jamesfinch)


    I am having a similar problem as the last poster.

    If you go to our site (fantasyassembly.com) you’ll notice that the slider controls are no longer below the feature image on the slider, they are stretched across the middle of the feature image and the width of the page.

    Just like the last poster, this was a result of an update by the jetpack plugin. When I disable jetpack, the slider controls move back to the proper location but I can not leave jetpack disabled as there are a number of widgets included with this that I need. Unfortunately, unlike the last poster, I’m a CSS novice and wouldn’t know where to start to correct this myself.

    I’ve sent a request to jetpack for help, but I’m not sure if it is something on their end or something with the theme since it has not been updated in some time. I love this theme and rely on jetpack for a number of things and don’t want to be put in a position of choosing one or the other.

    Thank you in advance for your help.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Jim,

    Try this CSS –

    #feature.active-sticky .slideshow-controls {
         background: url(images/slider-controls.png) repeat-x 0 0 !important;
         float: left !important;
         height: 55px !important;
         overflow: hidden !important;
         width: 640px !important;
         bottom: 0 !important;
    }
    
    #feature.active-sticky .slideshow-controls .slideshow-pager {
         float: left;
         overflow: hidden;
         padding-top: 6px !important;
         width: 530px;
    }
    
    #feature.active-sticky .slideshow-controls a.slider-prev,
    #feature.active-sticky .slideshow-controls a.slider-prev:hover {
         background: url(images/slider-controls.png) no-repeat 0 -126px !important;
         height: 29px !important;
         margin: 16px 10px 0 0 !important;
         float: left !important;
         overflow: hidden !important;
         text-indent: -9999em !important;
         width: 29px !important;
    }
    
    #feature.active-sticky .slideshow-controls a.slider-next,
    #feature.active-sticky .slideshow-controls a.slider-next:hover {
         background: url(images/slider-controls.png) no-repeat 0 -181px !important;
         float: left !important;
         height: 29px !important;
         margin: 16px 10px 0 0 !important;
         width: 29px !important;
         text-indent: -9999em !important;
    }
    
    #feature.active-sticky .slideshow-controls .slideshow-pager a.activeSlide {
         color: #dd7a05 !important;
    }
    
    #feature.active-sticky .slideshow-controls .slideshow-pager a {
         background: url(images/slider-controls.png) no-repeat right -61px !important;
         color: #fff !important;
         float: left !important;
         font-size: 12px !important;
         font-weight: 700 !important;
         padding: 15px 10px 25px 10px !important;
         line-height: 2rem !important;
         font: 12px/20px Arial, Verdana, sans-serif !important;
    }
    
    #feature.active-sticky .slideshow-controls {
         z-index: 1000;
         position: relative !important;
         bottom: 0 !important;
         margin: auto;
         text-align: center;
         width: 640px !important;
         -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         opacity: 1;
         direction:ltr;
    }
    
    #feature.active-sticky .slideshow-controls a,
    #feature.active-sticky .slideshow-controls a:hover {
         border: 0 !important;
         background: url(images/slider-controls.png) no-repeat right -61px !important;
         color: #eee !important;
         zoom: 1;
         -khtml-border-radius: 0 !important;
         -webkit-border-radius: 0 !important;
         -moz-border-radius: 0 !important;
         border-radius: 0 !important;
         -webkit-transition: 300ms border-color ease-out;
         -moz-transition: 300ms border-color ease-out;
         -o-transition: 300ms border-color ease-out;
         transition: 300ms border-color ease-out;
    }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
         #feature.active-sticky .slideshow-controls a,
         #feature.active-sticky .slideshow-controls a:hover {
              background: transparent none !important;
         }
    }
    
    #feature.active-sticky .slideshow-controls a:hover {
         border-color: 0 !important;
    }
    
    #feature.active-sticky .slideshow-controls a img {
         border: 0 !important;
    }
    
    #feature.active-sticky .slideshow-controls a,
    #feature.active-sticky .slideshow-controls a:hover {
         height: 7px !important;
         width: 20px !important;
    }

    Insert this into your style.css in a child theme.

    It worked for me!

    Jim

    (@jamesfinch)

    Thanks Steve. Since I am a novice I had to find out where to insert the code but it is working now. Thank you.

    You wouldn’t by any chance know how to make the slider run automatically, would you. That is the one function it did not come with but I’d love to see.

    And to the Nuntius author, I would really love to see an update for this theme. If not, it is good to know that it is still being supported as I would hate to change.

    Funny you should ask, but I was looking into an autoplay function for the slider just last night. There are plugins which you could use to replace the current slider (I use Meta Slider on a couple of sites), but to make the Nuntius slider autoplay would require some jQuery.

    If I can get a workable solution, I’ll post it here but it will take some time.

    Jim

    (@jamesfinch)

    Hopefully the author updates the theme and adds the autoplay function. If you come up with anything let me know but don’t rack your brain too hard.

    Thanks again for the fix, I was dreading the thought of switching themes, or worse yet, finding replacement plugins for the features we use in jetpack.

    Jim,

    If you’re new to wordpress, one of the first things I would recommend is the concept of child themes. It’s easy to setup, you need a child-theme folder in your themes folder, create a style.css with the child theme name and a template php. You can add additional functionality with functions.php in your child theme and over-ride parent theme templates if the need should arise.

    Though the custom CSS option works as well, major enhancements are best done using the child theme approach, plus, when the parent theme is updated, it doesn’t overlay your customizations.

    Jim

    (@jamesfinch)

    Not new to wordpress Steve, just new CSS code. We’ve had everything up and running for a year and a half now. I’ve heard child themes mentioned before, but up until recently never knew what they were.

    If Nuntius ever updates or we find a new theme I’ll start off with a child theme, that leaves me a little time to educate myself.
    Thanks for all you help and advice, it was greatly appreciated.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Looks like the Jetpack folks helped out out in your other thread so I’m marking this one as resolved.

    Feel free to post again if you need further help with Nuntius.

    Hopefully the author updates the theme and adds the autoplay function.

    I just wanted to let you know that we likely won’t ever be adding slider autoplay as an option to Nuntius, since sliders that autoscroll are generally considered not great practice for either usability or accessibility.

    I’m glad Steve was able to help you out with some excellent guidance on child themes and more above – thanks, Steve!

    Any possibility of Nuntius becoming responsive. We have enjoyed the theme at pickURgift.com/blog but are ready to leave so we can be a responsive blog.
    R

    Jim

    (@jamesfinch)

    Nuntius did do an update a few months back which solved this problem and a few other issues we were having with other plugins.

    I don’t know what you mean by being responsive Dukemd, but for us, the theme works great now. Maybe start a new thread with more details about your concerns. While they don’t update this theme on a constant basis, the team is responsive to comments and may be able to help you out.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Dukemd – I don’t think a responsive overhaul of Nuntius is in the cards but perhaps you could find a similar responsive theme that fits your needs? Can you provide a link to your site so I can see how you’re using it? I might be able to suggest an alternative.

    Jim – a responsive theme is one that adjusts automatically to devices of different sizes, such as phones and tablets. Nuntius has a fixed-width layout so it does not adjust to small devices. You can learn more here:

    Responsive Design and Other Theme Layouts

    Jim

    (@jamesfinch)

    Learn something new every day, thanks for the link.
    I just found a plugin to fix the phone/tablet issue; seemed easier than finding another theme that I liked.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Great! Yep, a mobile plugin or stylesheet (there is one included in Jetpack) is a good workaround if you’d rather not switch themes.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Jetpack css stepping on slideshow controls’ is closed to new replies.