This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Meta Slider Style

Open 9 replies themetheme-vantage
Louis Down
11 years ago · Last reply by Andrew Misplon 11 years ago

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?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Louis Down 11 years, 4 months ago

    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.

  2. Louis Down 11 years, 4 months ago

    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;
}
  3. Andrew Misplon Staff 11 years, 4 months ago

    Hi Louis

    Should work, you just need to apply the box-shadow to:

    .flexslider .slides > li

    instead of:

    .slides

    Hope that helps.

  4. Louis Down 11 years, 4 months ago

    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?

  5. Andrew Misplon Staff 11 years, 4 months ago

    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;
}
  6. Louis Down 11 years, 4 months ago

    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.

  7. Louis Down 11 years, 4 months ago

    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?

  8. Louis Down 11 years, 4 months ago

    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

  9. Andrew Misplon Staff 11 years, 3 months ago

    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;
}

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread