Oops. Meant to include the page where the slideshow is now: http:/www.wafbla.org
I think the best way to accomplish this, is to wrap the slideshow in an element you give a blue background and set it to stretch across the width of the website. Then you only have to center the slideshow using ‘margin: 0 auto;‘.
To place the buttons outside of the slideshow, simply customize its stylesheet so that the ‘.slideshow_container .previous‘ and ‘.slideshow_container .next‘ are positioned outside of the slideshow:
.slideshow_container_0 .previous {
left: -50px; /* Or whatever number of pixels looks good. */
}
.slideshow_container_0 .next {
right: -50px; /* Or whatever number of pixels looks good. */
background-position: -19px 0;
}
Wow thanks for the lightening fast response. I’ve implemented you background suggestion and that works perfectly. I’m having trouble getting the styles to work for the arrows however.
1 – I’ve edited the “light” style sheet with the code above. It creates a new style sheet in the list of style sheets to select from. I think I have to select that new style in the Default Slideshow Settings tab so that it picks up the new style right? I’ve done that but doesn’t seem to have any effect.
2 – I’ve tried using .slideshow_container_0 .previous and .slideshow_container .previous and neither seem to affect the arrow position. What have I missed?
The ‘Default Slideshow Settings’ tab only affects newly created slideshows, you should set the custom style from the slideshow’s page. You can go there just like you would go to a post or a page. Click ‘Slideshows’ in the WordPress admin, you’ll then see a list of slideshows. Click the slideshow you want to set the custom style for. Then in the ‘Slideshow Style’ box, select the custom style and save. Your slideshow should then be styled with the custom stylesheet.
Well duh. Why didn’t I catch that one has to apply the style sheet to the actual slide and that “Default” actually means, default. Geesh.
So, still no luck. I’ve applied the new style sheet to the slide and given the -50 left and right styles for both prev and next as you’ve supplied above but those darn arrows just don’t budge.
What to do, what to do?
Um, nevermind. I had been putting the code in the custom.css file. I see that it has to go into the function.css file instead. Once I did that, all is well!
Thank you for a really easy to use plugin and for the exceptional support. All the best of luck to you!
No problem, it has happened to many more users. It’s something I should’ve stated more clearly on the default settings page.
A little mistake I just saw I made, the reason that the buttons don’t get styled is that I left in the little ‘_0’ suffix that the slideshow is supposed to add. The CSS should actually have looked like this:
.slideshow_container .previous {
left: -50px !important; /* Or whatever number of pixels looks good. */
}
.slideshow_container .next {
right: -50px !important; /* Or whatever number of pixels looks good. */
background-position: -19px 0;
}
Also note that I forgot the ‘!important‘ declaration to overrule the ‘functional.css’ stylesheet previously. Sundays, right?
So if I use the !important and remove the _0 in the custom css file, then I don’t need to have the style in the function.css.
Do I understand this correctly?
Yes, otherwise the buttons will fall off the slideshow in every slideshow on your page. On the ‘Custom Styles’ tab of the ‘General Settings’ page different styles for every slideshow can be created.
Ok, done. I’ve moved the code to the custom style and taken it out of the functions.css file and all works well! 😉
