Hi, you should be able to do this with a custom stylesheet. You need an element that is absolutely positioned over the slides, layered above them with a higher z-index and a transparent PNG as the background image.
The pager buttons are already in a container that is setup like this, you could try adapting that container to the same dimensions as the slideshow. Or you could add a new div container using a custom slideshow template.
Thread Starter
adsmar
(@adsmar)
This is what i’ve done with the buttons css, does the div need to go into the includes/meteor-slideshow.php? Excuse the ignorance.haha
/* =Frame
-------------------------------------------------------------- */
.meteor-frame {
bottom: 0px;
left: 0px;
margin: 0;
position: absolute;
z-index: 100;
}
header#branding .meteor-frame {
left: 5px; /* A little nudge for Twenty Eleven */
}
.meteor-frame a {
background: url('../frame.png') no-repeat bottom left;
display: block;
float: left;
width: 730px;
height: 327px;
margin: 0 0px 0 0;
outline: none;
text-indent: -9999px;
}
.meteor-frame a:hover {
background: url('../frame.png') no-repeat bottom right;
}
.meteor-frame a.activeSlide {
background: url('../frame.png') no-repeat bottom right;
}
Yes, it does go in the meteor-slideshow.php file, but don’t edit the original in the plugin, copy it to your theme and use it as a custom slideshow template.
I need a frame for my slideshow but,
How to bring meteor-frame div to meteor-slideshow.php file.
Thanks
You don’t need to edit the slideshow template for this. If you need to add a second container around the slideshow, you could add this with the template tag to your theme file:
<div id="meteor-frame">
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
</div>
Then you could add the CSS to style that div to your theme’s stylesheet.
Your other option would be to use a custom slideshow stylesheet to style the .meteor-slides container that already exists. This is handy when you’re using the shortcode or widget and can’t as easily add a second div.
