Replace 3 Image Slider With 1 Image

[Jennnnn]

I’m trying to replace a 3 image nivro slider with a border with a single image with the same slider border. The site is responsive. I’m using a purchased template.

Everything looks good until I remove the link to the nivro slider css. When I remove this link, only the border is visible at smaller window sizes (I haven’t published yet). In other words, I only see the collapsed border without the image. Can I conclude that the nivro sliver css controls this?

nivro slider css:

.nivoSlider{}
.nivoSlider img{}
.nivo-main-image{display:block !important;position:relative !important;width:100% !important;}
.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:white;filter:alpha(opacity=0);opacity:0;}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0;}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden;}
.nivo-box img{display:block;}
.nivo-caption{}
.nivo-caption p{}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0px;}
.nivo-nextNav{right:0px;}
.nivo-controlNav{text-align:center;padding:15px 0;}
.nivo-controlNav a{cursor:pointer;}
.nivo-controlNav a.active{font-weight:bold;}

page html:

<div id="photoblock”>
<div id="slider" class="sliderImage”>
<img alt=“example" src=“example.jpg"></div>
</div>


default css:

#photoblock{width:90%;padding:20px 5%;text-align:center;margin:0;}
#slider{position:relative;z-index:10;width:100%;height:500px;border:10px #ffffff solid;margin-left:-10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}
.sliderImage img{position:absolute;max-width:100%;top:0;left:0;max-width:none;}


Do I need to add my own border to the image instead of using the slider border? I realize it will decrease in size as the viewport size decreases unless I use different images in the media queries. The border consists of a frame with a drop shadow behind it. I can create this look in PhotoShop and make it part of the image OR, if the border is created using css, will it maintain a consistent size (unlike the Photoshop image) even when its downsized by using the media queries? In other words, is that the best solution if a border with that look is achievable using css?

Thanks for your help!

[not2easy]

The <div id="slider" shows the border and box-shadow:

border:10px #ffffff solid;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);

but as shown, it also has a -10px margin:

border:10px #ffffff solid;margin-left:-10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);

this is in the default css shown. There is no border in the .nivo css. But if you're replacing the slider plugin with your own image, there is no need to use the slider ids in your html. Those ids set a height of 500px which could be most of the screen for small devices.

Maybe I'm not fully understanding your goal? To replace the slider you need only your own css and image and delete the plugin. You can just edit the default css shown so that the size, alignment, borders, margins and padding suit your design and replace the ids and classes for your own css to use those in your html. That css can be added in your child theme's css if you like.

[Jennnnn]

I got it! Thanks so much for your help!