Hi, this CSS Tricks tutorial will show you how to add a box shadow to the slideshow, most likely you would add this to the .meteor-slides class using a custom stylesheet.
Rounded corners only work with background images, not inline content. So you could increase the frame around the slideshow and round the corners of that, but not the images themselves.
OK can’t get anything to show up with corners, shadows/borders. I added the following code to the custom style-sheet I copied into my themes directory. Does the actual Plugin css file need to be deleted after it is copied into my theme?
.meteor-slides .shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
border: solid 3px #000;
margin: 15;
overflow: hidden;
padding: 15;
position: relative;
z-index: 1;
}
No, you don’t need to edit the plugin, it will check your theme for the stylesheet and load the custom one instead.
Leave off .shadow, just target .meteor-slides:
.meteor-slides {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
border: solid 3px #000;
margin: 15;
overflow: hidden;
padding: 15;
position: relative;
z-index: 1;
}
I noticed that your slideshow ID is “meteor-slideshowHeartland Pics”, are you loading a slideshow called “Heartland Pics”? It can cause problems to use the slideshow title, make sure you use the slideshow slug, like this: “heartland-pics”.
Awesome looks about perfect. Do you mean I should change the name of the slideshow to match its slug? I was also wondering what I need to alter in the code the change the shade of black/gray of the actual shadow i can’t seem to quite get it. Anyways I really appreciate everything man.
No problem, yeah replace the slideshow name in the shortcode or template tag with the slideshow slug, like in the examples.
You can change the color of the shadow by changing the hex code at the end (#ccc), just like for the border. Make sure that the border is at least as large as the border radius, otherwise in some browsers it will render funny:
.meteor-slides {
border: 5px solid #000000;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 7px #666666;
overflow: hidden;
padding: 0;
position: relative;
z-index: 1;
}
I can’t find the shortcode or template tag for the widget anywhere in my Theme templates. Is it in the actual custom stylesheet where I need to find it?
Are you using a widget to add the slideshow? Wherever you added the slideshow to the page, that is where you need to update which slideshow is loaded.
Yes I do have it displayed in a widget but don’t see the code anywhere in Widgets > Appearence if that’s what you mean. The .css files don’t have any of the shortcode.
The shortcode goes in the page or post content, if you are using the Meteor Slides Widget, you don’t need the shortcode.
If you open that widget in the Widgets menu, you should see “Heartland Pics” in the middle slideshow field in the widget.
OK cool, just making sure that was all. I truly appreciate everything. Have a great weekend!
