-
Posts
-
Hi,
I like the inset shadow of the layerslider, however, it’s always overridden. You see this as well on the enfold demo home page.
As soon as the image fades in, the inset shadow fades away as well.
I’ve tried adding inset box shadow on practically all possible layer classes (eg ls-inner, ls-container, etc), but always it fades away.
Can someone show me how it’s done?
Thanks
This should work:
ls-inner{
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
}
it works, but it becomes overridden by something, just like in the enfold homepage. You initially see there’s inner shadow applied, but it fades away after a sec or so.
Believe me, I’ve applied this to all possible classes, like I wrote above. Try it yourself.
I even put a z-index of 99 to the ls-inner (just to test) and still it fades away after 1 sec. This is in the original install, no tweaks yet.
It works for me and doesnt fade, with a background image it doesnt show for me. Perhaps try adding a div at the top of the slide with 100% width and minimal height with css in LayerSilder settings?
It seems all images cover the inner inset shadow, no matter what I do, even if I apply it on the layer class itself. When I put in a blank it shows.
Though should be somehow easily done with CSS, I don’t get it.
Ok, I did it the hardcore way then.
if one needs to achieve this:
line 235 of slider.php: add a div with unique id like this:
$data .= '</div><div id="ls-mask"></div>';then add in your custom.css this:
#ls-mask {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: 0 0 10px #000000 inset;
z-index: 1000;
}
Works always consistently on all sliders without doing tricky stuff within the slider itself.
- The topic ‘layerslider inner shadow’ is closed to new replies.