I am using the meta slider widget inserted via pagebuilder and I want to add an inset box shadow, I have a custom CSS plugin, any help with what code I need to put in?
Meta Slider Style
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Just noticed the issue is that i can’t seem to inset it, I can put a box shadow on the outside but don’t know how to inset it.
the code i’m trying to use is:
.slides{ box-shadow: inset 0px 0px 10px 0px #ABABAB; -webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB; -moz-box-shadow: inset 0px 0px 10px 0px #ABABAB; -o-box-shadow: inset 0px 0px 10px 0px #ABABAB; }Hi Louis
Should work, you just need to apply the box-shadow to:
instead of:
Hope that helps.
Hello Andrew,
Thank you for sparing me some time, I just implemented the above code with no success. With the previous code i used, i set a transparent image in the slider and then I could see the shadow so i think the shadow is there but it is layered beneath the images, any ideas?
Is the site live? Please send through a link and I’ll take a look. To confirm, my finished change would have looked like this:
.flexslider .slides > li { box-shadow: inset 0px 0px 10px 0px #ABABAB; -webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB; -moz-box-shadow: inset 0px 0px 10px 0px #ABABAB; -o-box-shadow: inset 0px 0px 10px 0px #ABABAB; }It is indeed, http://www.mortgagefinancetaunton.co.uk
I’ve copied and pasted that code in to custom CSS also, if you could take a look that would be great.
Also Andrew, if I were to have a full width slider, what would the image size need to be for it not to be cropped/pixelated with the stretch feature enabled?
each time I have tried with a 1080 x 420 px image and it shows up as being really stretched and almost zoomed in, my monitor is 1920 x 1080
Can you confirm the Custom CSS is in place? I don’t see it in the page source. Right now you’re adding your sliders into the page, you can also add them from the Meta Slider drop down menu in the right column when editing a page. As long as Appearance > Theme Settings > Home > 100% Slider isn’t checked they won’t be 100% width. You can push your slider’s settings up to 1920 width. Add the following to Appearance > Custom CSS to change the way the 100% width is dealt with:
/* Vantage Theme, remove max width/layer centering. Usage: Copy and paste this code into Appearance > Custom CSS or your own Custom CSS module. */ body.responsive.layout-full #page-wrapper .metaslider .full-container, .layout-full #page-wrapper .metaslider .full-container { max-width: none; }