• Is it possible to universally style my sliders via my child theme css stylesheet? So I might want to add a border to all slides or change the font to uppercase, I will have a lot of different sliders on the site moving forward and it would be ideal if I can do this.
    Also, is it possible to change the width of an individual slide. Every now and again I will need to add a wider image to some slides, but at the moment the size of them gets reduced down.

    Many thanks

Viewing 15 replies - 1 through 15 (of 23 total)
  • Thread Starter spitfirespf59

    (@spitfirespf59)

    I also meant to ask, I see in your documentation you have a screenshot of the slider and I can see Divi is the theme being used. I’m using Divi and I’d like to add a wordpress post shortcode into some slides but it didnot work. Do you know if this is a problem with Divi specifically? Thanks again

    Plugin Author simonpedge

    (@simonpedge)

    Yes, you can style your slider and slides using your child theme’s CSS file. If you edit your slider, you will see a field called “CSS #id for Slider” (under Slider Style in the right-hand side column). Here you can set the CSS ID for each slider, and this should be unique to each slider.

    So to target your slider via CSS (assuming this CSS ID is set to ‘slider’) you would use:
    #slider { …CSS here… }
    To target the slides within the slider:
    #slider .owl-item { …CSS here… }

    Whilst Owl Carousel does support slides of variable widths – see here:
    https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html
    this feature is not included within Slide Anything. Also, this doesn’t work well responsively (e.g. display 4 slides on desktop, 3 on tablet and 2 on mobile)

    Plugin Author simonpedge

    (@simonpedge)

    RE, the DIVI shortcode…
    Have you got the ‘Allow Shortcodes’ checkbox ticked within your Slider Settings?

    Thread Starter spitfirespf59

    (@spitfirespf59)

    Hi Simon
    Many thanks for info on css, I get it now.
    Re the shortcode, yes I have ‘Allow Shortcodes’ checkbox ticked within the Slider Settings and am adding the shortcode via Tools>Shortcode

    Perhaps I have the wrong code – [display-posts id=”32857″] ?
    When looking at the live slider on my dev site all I see is the shortcode with the first quotation mark somehow reversed.

    Plugin Author simonpedge

    (@simonpedge)

    Try using single quotes:
    [display-posts id=’32857′]

    Thread Starter spitfirespf59

    (@spitfirespf59)

    Hi
    I tried it, it did the same thing, reversing the first single quote.

    Plugin Author simonpedge

    (@simonpedge)

    Are you adding the shortcode within a Divi Text widget?
    Because that is what I normally do.

    Thread Starter spitfirespf59

    (@spitfirespf59)

    I’m adding the post shortcode into the slide anything wysiwyg then adding the slider shortcode into a divi text module
    post shortcode in slider

    Plugin Author simonpedge

    (@simonpedge)

    Test it on another page without the DIVI page-builder.

    Create another test page without the DIVI pagebuilder and paste the SA shortcode into the WYSIWIG editor and lets see what happens – maybe clashing with the Divi pagebuilder (which is strange cause I use Divi all the time, but maybe that shortcode doesn’s play nicely with a Divi, SA threesome)

    Thread Starter spitfirespf59

    (@spitfirespf59)

    I’m afraid it’s just the same.
    I’ve also just tried it on another wordpress install that uses Divi and got the smae thing. So I just tried on another install that doesn’t use Divi and same again

    Plugin Author simonpedge

    (@simonpedge)

    Hmmm – a mystery.
    So it seems the Display Posts plugin does not play nicely with Slide Anything (or vice versa).

    Are you getting any JavaScript errors? (press CTRL+SHIFT+J)

    Thread Starter spitfirespf59

    (@spitfirespf59)

    Thread Starter spitfirespf59

    (@spitfirespf59)

    Sorry the link doesn’t appear to be working, I’ll try again:
    Link to image

    In case that doesn’t work, there are basically lots of these:

    jquery.js?ver=1.12.4:3 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
    preventDefault @ jquery.js?ver=1.12.4:3
    (anonymous) @ owl.carousel.min.js?ver=2.2.1:6
    d @ jquery.js?ver=1.12.4:2
    e @ jquery.js?ver=1.12.4:3
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3

    Plugin Author simonpedge

    (@simonpedge)

    You testing on Chrome?
    You try testing on another browser?

    Plugin Author simonpedge

    (@simonpedge)

    And try this:
    .owl-carousel { touch-action:none !important; }

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘add css via child theme’ is closed to new replies.