Can't get inset box-shadow to show over slideshow images

  • BradHarrington

    (@bradharrington)


    10 years, 11 months ago

    http://code-rage.us/vineyards/gold-coast/

    I have an inset box shadow on the left side and want one that matches it on the right side.

    I have tried:

    .meteor-slides {
    box-shadow: 0 0 5px 5px #BABABA inset !important;
    }

    Honestly I have tried to put it on every possible div that surrounds the slideshow and played with the z-index to be sure the div with the box shadow was higher than the z-index for the slides.

    Is this even possible or am I missing something?

    Weird part is I can put it on the main content box but it only shows on three sides.

    http://wordpress.org/extend/plugins/meteor-slides/

Viewing 1 replies (of 1 total)
  • Solnem

    (@solnem)

    10 years, 11 months ago

    Hello BradHarrington,

    Lately, I’ve also tried to achieve something similar as you are trying to right now. The only possible solution I found was to add an div element to the meteor-slideshow.php.

    First start off copying the meteor-slideshow.php to your child theme.

    Then open it up and search for the line after the closing tag:

    ?>”>

    of:

    <div id=”meteor-slideshow<?php echo $slideshow; ?>” class=”meteor-slides <?php

    Add a div container after the closing tag and assign it an id.

    <div id=”slideshow-shadow”></div>

    Open your css and add your box-shadow style to the container:

    div#slideshow-shadow {
    box-shadow: 0 0 5px 5px #BABABA inset !important;
    }

    This should work. I don’t know if it is the correct way to do it, but it helped me get what I wanted. Would be good if Josh Leuze or someone else could check it. I’m not too much into webdesign, so it might be a bad style to solve it like that.

    Hope I could help you.

Viewing 1 replies (of 1 total)
  • The topic ‘Can't get inset box-shadow to show over slideshow images’ is closed to new replies.