I've updated to LayerSlider 6.0.6 on my local dev machine (which doesn't have public access). On various slides using V5, I had an ID called top-adjust. In v6, this shows in the Additional Slide Setting section.
I had also written a CSS rule that moved the slide up.
// Moves slider up to meet transparent menus #top-adjust.ls-slide { margin-top: -80px; }
That code no longer works in the new version and is ignored. I'm not certain what is taking precedence over it. Even if I add !important, it still doesn't work.
The only way I've gotten it to work is to add that CSS to the Custom Slider Settings panel on the Appearance section.
The problem with this solution is I would have to apply it to a number of sliders and I already have the ones I need to adjust with the #top-adjust ID.
LayerSlider 6 uses a completely different live markup under the hood. Due to static layers and other features, slides no longer exists in a conventional way and the slider dynamically shows and hides layers from all slides in the same containment element. Unfortunately, your solution will no longer work in the new version, but you can find alternatives. Like you've mentioned, you can use the option under Slider Settings -> Appearance. WP Admin sidebar -> LayerSlider -> Custom CSS offers you a global CSS editor, and you can target new data-* attributes if you desperately need to target layers from a certain slide.
I'm sorry to learn of this because I have about 30 sliders I will need to change. I also don't understand why the ID field is still present if you can't use it.
In your reply you mention something about targeting new data-* attributes. Could you explain or give an example on this as I'm hoping it's more a global solution. Before submitting this ticket, I did try to put that same code in the global CSS editor and it didn't work,
Without having some mechanism to target a slide by class or ID, the program is limited for me. One reason I chose LayerSlider was it allowed me to shift slides for the menu in these cases.
Since LayerSlider 6, there are no slide elements in the DOM at all. To maintain compatibility, we still use the old markup for building sliders, but the live DOM is very different than it was before. Every layer from every slide is stored in one shared element (called .ls-layers) and the plugin dynamically shows and hides them based on navigation and other factors. There are still slides in the conventional meaning, but they don't have a dedicated element in the DOM. This was an inevitable change, as web standards don't offer any other way to achieve static layers and some other features.
You can find the data-* attributes in the live markup. For example, every layer has a data-slidein attribute, which allows you to target layers belonging to a specific slide. This is not a solution in your case, but the slide ID was mainly used for this purpose and it could be important in other cases.
The slide ID field still has some relevance to apply layer-specific CSS, but we will probably remove it in future versions to avoid confusion.
You can use the LayerSlider API to track your sliders and perform slide related tasks as a full featured alternative. It's not the same solution, but it offers the same possibilities.
I am also interested in learning how to use css to target a particular slide. I had been using the #id attribute to apply background colors but this no longer works. Could you please explain how to target a particular slide using css in the Slider Settings -> Appearance. WP Admin sidebar -> LayerSlider -> Custom CSS
As explained below, there are no individual slide elements in the DOM. In v6, there is only one shared container that hold every layer from every slide.
For the simple stuff like the background color/size/position etc we now have dedicated options in the slide options, so you don't need to use custom code. If you need more control, then you need to use the LayerSlider API to track the slider progression.
Hi,
I've updated to LayerSlider 6.0.6 on my local dev machine (which doesn't have public access). On various slides using V5, I had an ID called top-adjust. In v6, this shows in the Additional Slide Setting section.
I had also written a CSS rule that moved the slide up.
// Moves slider up to meet transparent menus
#top-adjust.ls-slide {
margin-top: -80px;
}
That code no longer works in the new version and is ignored. I'm not certain what is taking precedence over it. Even if I add !important, it still doesn't work.
The only way I've gotten it to work is to add that CSS to the Custom Slider Settings panel on the Appearance section.
The problem with this solution is I would have to apply it to a number of sliders and I already have the ones I need to adjust with the #top-adjust ID.
Hey prodport,
LayerSlider 6 uses a completely different live markup under the hood. Due to static layers and other features, slides no longer exists in a conventional way and the slider dynamically shows and hides layers from all slides in the same containment element. Unfortunately, your solution will no longer work in the new version, but you can find alternatives. Like you've mentioned, you can use the option under Slider Settings -> Appearance. WP Admin sidebar -> LayerSlider -> Custom CSS offers you a global CSS editor, and you can target new data-* attributes if you desperately need to target layers from a certain slide.
Hi Attila,
I'm sorry to learn of this because I have about 30 sliders I will need to change. I also don't understand why the ID field is still present if you can't use it.
In your reply you mention something about targeting new data-* attributes. Could you explain or give an example on this as I'm hoping it's more a global solution. Before submitting this ticket, I did try to put that same code in the global CSS editor and it didn't work,
Without having some mechanism to target a slide by class or ID, the program is limited for me. One reason I chose LayerSlider was it allowed me to shift slides for the menu in these cases.
Since LayerSlider 6, there are no slide elements in the DOM at all. To maintain compatibility, we still use the old markup for building sliders, but the live DOM is very different than it was before. Every layer from every slide is stored in one shared element (called .ls-layers) and the plugin dynamically shows and hides them based on navigation and other factors. There are still slides in the conventional meaning, but they don't have a dedicated element in the DOM. This was an inevitable change, as web standards don't offer any other way to achieve static layers and some other features.
You can find the data-* attributes in the live markup. For example, every layer has a data-slidein attribute, which allows you to target layers belonging to a specific slide. This is not a solution in your case, but the slide ID was mainly used for this purpose and it could be important in other cases.
The slide ID field still has some relevance to apply layer-specific CSS, but we will probably remove it in future versions to avoid confusion.
You can use the LayerSlider API to track your sliders and perform slide related tasks as a full featured alternative. It's not the same solution, but it offers the same possibilities.
Best Regards,
John | Kreatura Dev Team
I am also interested in learning how to use css to target a particular slide. I had been using the #id attribute to apply background colors but this no longer works. Could you please explain how to target a particular slide using css in the Slider Settings -> Appearance. WP Admin sidebar -> LayerSlider -> Custom CSS
Hi,
As explained below, there are no individual slide elements in the DOM. In v6, there is only one shared container that hold every layer from every slide.
For the simple stuff like the background color/size/position etc we now have dedicated options in the slide options, so you don't need to use custom code. If you need more control, then you need to use the LayerSlider API to track the slider progression.
Best Regards,
John | Kreatura Dev Team