Layerslider - drop shadow on text layer

Support
#1

I have been trying to get some custom css to get this done. Everything I come across is not successful. Please let me know if you have anything I can use.

#2

Hi there,

Thanks for writing in! Here is a good resource that will help you in getting started https://www.w3schools.com/css/css3_shadows.asp

You can simply target the text layer and apply the custom CSS by following the above article. I am sharing few resources that you take a look to get started with CSS and an interesting tool to find out the right selecors that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#3

I just followed the steps and took the css provided and it still didn’t work. I appreciate the “teach a man to fish” method here. Not sure if something is blocking it, but there is a field in the text layer for custom CSS and it is not working.

There is an article for revolution slide and adding custom CSS to give a shadow, but I really do prefer Layerslider. I am hoping to make it work.

#4

Hi again,

I tried to find your site but you seem to have quite a few licenses registered on your account so I am not sure which website is in question. Can you please share the exact page URL with us so we can take a look and suggest you a possible solution?

Thanks!

#5

sjclaims.gallagherbd.com

Let me know thanks!

#6

Hi There,

I’m not sure the exact effect and the text element that you want to target. However try adding the following CSS rules into X > Theme Options > CSS area and play around to get the desired output.

.ls-layers p.ls-layer {
    box-shadow: 0px 9px #D0D0D0;
    text-shadow: 2px 2px #ff0000;
}

Hope that helps.

1 Like
#7

This was perfect! Thanks a lot!

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.