Adding CSS to layer on LayerSlider

Thanks so much for getting back to me, Mike. That was quick. You guys rock!

You are right. As of now there’s just a white background. But if you scroll down with your mouse, an animated message will appear, followed by the second slide. It’s the Play-by-scroll feature and it’s not as easy to work with than you would think. I’m sure LayerSlider has awesome features, but there’s a steep learning curve.

Anyways, as I mentioned and to tackle the issue with the white background, of the first opening slide, I’d like to have a background that’s looped and automatically changes colors every 20s. I think I got the proper CSS code inserted in the Style section of the BG layer, along with the required class in the HTML content element – but it doesn’t work …

Ideally, I’d like this layer with the changing background to appear as soon as the the slider/pages loads.

Many thanks for your time and help with this Mike. I truly appreciate it.

Thanks for looking into this, Mike.

Unfortunately, your idea to enter the required CSS into the Custom CSS section of the theme won’t make a difference. It just doesn’t work.

Moreover, what I find it even more puzzling with the Play-by-Scroll Layer Slider is that obviously all elements are triggered by a scroll. So does one even create a starting point for the Slider, for instance, a loading or scroll up or down message, so audiences would know what to do? I mean, having a blank background to start with – that can’t be it – or?

I kind of need this feature, because it’s the only way to offset the transparent header on this initial layer.

I’m also a bit concerned, because in your first message you mentioned that a Facebook plugin is causing a 500 Internal Server Error and that the whole pages flashes. I’m on Macs, but I wasn’t even able to reproduce either problem on a brand new Windows 10 machine. On my end, I never saw the alternating background color show up – scroll or no scroll.

So, maybe you can look into this again – or perhaps share with some fellow tech support team members. There’s got to be a way to this, don’t you think?

Thanks so much for much for getting back to me with such an elaborate response, Mike. Kudos. I didn’t expect that and I’m truly impressed over how you’re going to extra mile to help me out on this.

It’s needless to say that I’m quite frustrated over how Kreatura has been cutting corners with the Play-by-Scroll feature on LayerSlider. I looked at their sample slider as well and agree with you that it has the very same problem of not having an easy-to-recognize starting point that would help users to understand what is expected of them in order to be able to navigate the slider.

This is why I was thinking to use a background with an alternating background color. It was my hope that this background would show – like a static background image – hence the user would know something is happening instead of looking just on a bare white background.

The problem is still very perplexing to me. I can’t see the background on any Mac browser (i.e. Safari, Google Chrome, and Firefox) and I didn’t see it either when looking at it on my son’s Windows 10 machine. It goes without saying that I cleared the cache on my Mac browsers – I didn’t do that on my son’s Window’s machine, because it was the first time I was accessing this page from there. I don’t work with this machine. So, in that respect, your video is extremely interesting. I think I understand what you mean by the background flashing. I think it’s the result of using colors that are very bright and intervals of only 10s. It’s needless to say that these aren’t the colors I want to use.

What I meant with off-setting the transparent header was: (I) as you can see, the transparent header completely disappears on the white background of the initial slide of this slider – It’s why I’d love being able to use the auto changing background color. I will need to use a transparent header though, because the following slides require that. (II) Or is it possible to change the settings for the header for each slide? With other words, use a non-transparent header on slide 1 and transparent headers on the following slides?

In closing, you are absolutely right. The Play-by-Scroll feature is a premium feature of LayerSlide, but I own the full license; so, it works.

I have a sandbox site that’s a 100% mirror of my actual site. I created admin access for you there as well, so you can take a look at this slider in it’s native environment (UI) to see if you can make sense of this. Please see the NEW link and login information below.

It goes without saying that I’m extremely grateful for your willingness to help me out here. As I mentioned earlier, I’m truly impressed with you going the extra mile here.

Many thanks, Mike.

Man Mike. That’s just awesome and 98% of what I was looking to get out of this.
Adding the web-kit for Mac did the trick and I can now see it across all browsers. It even looks pretty good on my son’s Windows machine.
It turned out that there’s a Slider setting that starts showing slider content immediately – even before users start scrolling; so, it’s starting to come together. Many thanks for this. You rock, Mike!

Thanks.

I’m still struggling with a few things in connection with this slider.

For instance, while the first slides looks ok, problems start (i) when users try to scroll down, which is followed by some flickering/bouncing before the slide transitions to the next slide. The transition just isn’t smooth. In addition (ii) when users reverse the slider and scroll back up, the can overshoot on the first slide, which means that they’ll be looking at a blank background.

I got in touch with Kreatura tech support and they asked whether “my theme uses any kind of custom scrolling ? LayerSlider uses the native browser scrolling for several of its options (including play-by-scroll and start in viewport for example), and custom scrolling methods could interfere with that. Please check on whether something is interfering with the page scroll on your site”.

Could you please help shed some light on this? I would really appreciate it.

Many thanks.

Thank you so much, Mike.

I can’t believe how much time and effort you put into trying to resolve this issue. It’s needless to say that it’s very much appreciated. You guys at Enfold really rock. You provide the level of support everybody else just promises. ;-)