The custom CSS field under the Style tab of a layer can only contain a properly list. However, you can apply a custom ID or class name on your layers under the Attributes tab, then you can target them in LayerSlider -> Options -> CSS Editor. That's a full-fledged CSS editor and any valid CSS code can be used there.
You shouldn't place this code snippet into the .ls-layers {} code block as it's invalid. CSS preprocessors like SCSS (Sass) have nesting features, but standard CSS does not support such usage. Those sample CSS is only there for example, you can completely ignore or remove them, then enter your own code without distraction.
The code in the last screenshot that seems the be the jQuery version of LayerSlider should be fine. What I could think of is that maybe the hover event is blocked by an overlapping layer. Even if it's invisible, you can't click or hover though it by default. The easiest solution is to right click on the image, select Inspect Element and see if it's the right element in your browser's DevTools. You can change which layer should be on top by changing the order of layers in the HTML markup.
Yes like I said i was able to get it working in the jquery version, in my text editor. i got it working by adding my own class to the html and css in my text editor but not in layer slider. I moved the code outside .ly-layers and its still not working
It should be working in WordPress as well after making the suggested changes. That editor is generating a proper .css file called layerslider.custom.css.
I've quickly read though your other tickets and find the site in question. For me, it's working properly. Make sure to empty your caches or enable the feature in Chrome's DevTools to prevent caching, so you can always see live results.
I was able to put the css in the custom css with the theme editor. Just to clarify I cleared everything out of the layer slider css editor and pasted my css is this correct?
I'm not sure if I understand your question. Right now I can see the same #left-box:hover CSS code added both via LayerSlider's CSS Editor and WP's Appearance -> Customize -> Custom CSS.
You can use either of these, as they achieve the same effect. LayerSlider is generating a custom .CSS file, while WP inserts it with inline CSS. The difference is caching. WP's solution will not be cached so easily, so you can avoid issues not seeing your changes immediately. LayerSlider's solution does use cache, which results less network traffic and is a more recommended approach.
in the costom CSS box,how can I add custom css to pseudo-classes for example the hover state?
Hi Alex,
The custom CSS field under the Style tab of a layer can only contain a properly list. However, you can apply a custom ID or class name on your layers under the Attributes tab, then you can target them in LayerSlider -> Options -> CSS Editor. That's a full-fledged CSS editor and any valid CSS code can be used there.
Best Regards,
John | Kreatura Dev Team
I was able to get this working but inputting the css directly in my text editor. but could not in layer slider. I did both. Please find attachment
img.alex:hover{
box-shadow: 0 9.5rem 4rem rgba(0,0,0,0.15)!important;
}
and
alex:hover{
box-shadow: 0 9.5rem 4rem rgba(0,0,0,0.15)!important;
}
You shouldn't place this code snippet into the .ls-layers {} code block as it's invalid. CSS preprocessors like SCSS (Sass) have nesting features, but standard CSS does not support such usage. Those sample CSS is only there for example, you can completely ignore or remove them, then enter your own code without distraction.
The code in the last screenshot that seems the be the jQuery version of LayerSlider should be fine. What I could think of is that maybe the hover event is blocked by an overlapping layer. Even if it's invisible, you can't click or hover though it by default. The easiest solution is to right click on the image, select Inspect Element and see if it's the right element in your browser's DevTools. You can change which layer should be on top by changing the order of layers in the HTML markup.
Best Regards,
John | Kreatura Dev Team
John,
Yes like I said i was able to get it working in the jquery version, in my text editor. i got it working by adding my own class to the html and css in my text editor but not in layer slider. I moved the code outside .ly-layers and its still not working
True. I slightly misread your message.
It should be working in WordPress as well after making the suggested changes. That editor is generating a proper .css file called layerslider.custom.css.
I've quickly read though your other tickets and find the site in question. For me, it's working properly. Make sure to empty your caches or enable the feature in Chrome's DevTools to prevent caching, so you can always see live results.
Best Regards,
John | Kreatura Dev Team
I was able to put the css in the custom css with the theme editor. Just to clarify I cleared everything out of the layer slider css editor and pasted my css is this correct?
I'm not sure if I understand your question. Right now I can see the same #left-box:hover CSS code added both via LayerSlider's CSS Editor and WP's Appearance -> Customize -> Custom CSS.
You can use either of these, as they achieve the same effect. LayerSlider is generating a custom .CSS file, while WP inserts it with inline CSS. The difference is caching. WP's solution will not be cached so easily, so you can avoid issues not seeing your changes immediately. LayerSlider's solution does use cache, which results less network traffic and is a more recommended approach.
Best Regards,
John | Kreatura Dev Team