Hi Michelle, the path for the navigation images isn’t quite right:
.meteor-nav .prev a {
background: url('..library/images/prev.png') no-repeat center right;
}
In the default stylesheet, it uses “../images” in the path to go up one directory level and then look for the images folder. Since your stylesheet is at the same level as the library folder, you can remove the dots and just tell it to go right to that folder:
.meteor-nav .prev a {
background: url('library/images/prev.png') no-repeat center right;
}
If you update them all like that it should work fine.
The navigation doesn’t load if you have just one slide, but it should load for two and up. That might be a separate issue, a small conflict with your theme or something, i can look into that once you have the nav working.
You can move the caption down by setting a negative bottom position equal to the height of your caption:
.meteor-slides p {
background: rgba(238,238,238,1.0);
bottom: -40px;
left: 0;
color: #555;
margin: 0;
margin-top: 30px;
padding: 20px;
position: absolute;
text-align: center;
width: 100%;
overflow: visible;
}
That caption is outside of the slideshow, so it will be cropped, fix that by changing the overflow:
.meteor-slides .meteor-clip {
line-height: 0;
margin: 0;
overflow: visible;
padding: 0;
position: relative;
width: 100%;
}
It worked, thank you so much!
Yes, please do check what’s wrong and why the buttons don’t work with two-image slideshows (the slideshow in /graphic-design for example).
And I forgot to mention that my footer now doesn’t occupy the whole page and there’s a margin on the sides. That wasn’t there before I added the custom CSS.
Lastly, where do I add the html code for transitions if I want the buttons to fade in upon hovering?
Thank you very much for your help!
Much appreciated!
You’re welcome! The missing nav on the graphic design slideshow might not be related to the number of slides. It looks like you have set that page to use the “graphic design” slideshow, it should use the slideshow slug, which won’t ever have a space in it, it will have a dash, so it might look like this: “graphic-design”.
Got it, thanks again!
Following up on these two questions and then I’ll stop adding to your workload, hehe. 😀
1. I forgot to mention that my footer now doesn’t occupy the whole page and there’s a margin on the sides. That wasn’t there before I added the custom CSS. Added a bit of negative margin to stick it to the bottom but I can’t do that to the sides without extending the whole page and making it uneven. What’s wrong here?
2. Where do I add the html code for transitions if I want the buttons to fade in upon hovering?
Not sure what is going on with the footer, but the gaps on the sides are because of the margin on the body, zero that out and it will stretch the whole width of the site:
body {
margin: 0;
}
For fading the nav buttons, there’s already a CSS3 transition in there on the anchors that is causing them to move on hover, they shouldn’t do that, this is something your theme is adding. Probably targeting all the anchors on the site instead of just certain ones. Find and fix that and you’ll know how to animate them the way you want them to be.
You want to animate the meter-nav container though, so that it fades when it is displayed. Try display inline all the time on that, and change the opacity to hide it, increasing the opacity to fade it in on hover. This tutorial will show you how to add CSS 3 transitions:
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
