[Plugin: Meteor Slides] New buttons and border

Hi saabir, you’ll need to adjust the dimensions of the buttons to fit the larger images. Use Firebug to get a better look at how they are setup, that will help.

Make sure that you use a custom stylesheet so that you don’t lose your changes when you update the plugin. You can copy the stylesheet into your theme, and the custom button images too. Put the graphics in your theme’s images folder. Make sure you update the stylesheet with the new path to the images folder:

.meteor-nav .prev a {
    background: url("images/prev.gif") no-repeat scroll right center transparent;
}

This rule controls the button dimensions, change the width to match your graphics:

.meteor-nav a {
    display: block;
    height: 100%;
    outline: medium none;
    position: absolute;
    text-indent: -9999px;
    width: 25px;
    z-index: 50;
}

You might also have to change the position to lay them out better.

I don’t see a border on your slideshow, but if you can post a link to the theme you are trying to match I might be able to tell you how to do that.

the theme that we are using can be found here: https://osc4.template-help.com/wordpress_28371/?page_id=421

so far ive replaced your buttons with the one from the theme but they are not showing properly.
can you tell me exactly what i would need to change to make it look like the one in the theme including the white border and making the button show.
Also maybe on a seperate note. on your slider no matter which arrow you click the slider still goes the same way?

Can I jump in here??

I would like to use a custom stylesheet and a custom template

In your stylesheet instructions you say:
Copy meteor-slides.css from /meteor-slides/css/ to your theme’s directory to replace the plugin’s default stylesheet.

and in the custom template instructions you say…
…template file. You can copy this file into your theme…

where do you mean???

for the stylesheet:
wp-content (the actual root)
wp-content/themes/theme-name/library/css/ (how do I tell the slideshow where to find the custom stylesheet???)

for the custom template??
wp-content (the actual root)
wp-content/themes/theme-name/ (the theme root??)
wp-content/themes/theme-name/library/ somewhere here???

Can you be more specific????

THANX!!

Saabir, you are using the “scrollLeft” transition, which will always scroll left. If you choose the “scrollHorz” transition, it will scroll left or right depending on which nav button you click.

The first thing you need to do is set up a custom stylesheet before you start making changes.

Then you want to set it up so that the buttons are always showing, like the example theme. Take this rule:

body .meteor-slides ul.meteor-nav {
    display: none;
}

And change it to look like this:

body .meteor-slides ul.meteor-nav {
    display: block;
}

Now that the buttons are always showing, it will be much easier for you to use Firebug to investigate the buttons and edit them.

Thanks for that, i now have the slider going right and left, i also have the border and the buttons in the right place. but i just have one problem. for some reason half of the button is not displaying. in other words, anything outside the slider box gets cut off. also when the page is loading, the border and the buttons are more wider than the slider, they come into place when loading is finished. Is there a solution to this? many thanks for all your help so far

No problem saabir, to avoid that slideshow changing sizes as it loads, try adding that width in the same rule that the border is in so they load at the same time:

.meteor-slides {
    border: 13px solid #FFFFFF;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

By default, the slideshow has the overflow set to “hidden”, which will crop the buttons as they stick out. You can change the overflow by adding this rule to that same CSS statement:

.meteor-slides {
    overflow: visible !important;
    border: 13px solid #FFFFFF;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

But to get the buttons to stick out, you need to change the 25px width from the smaller default buttons to match you wider ones:

.meteor-nav a {
    display: block;
    height: 100%;
    outline: medium none;
    position: absolute;
    text-indent: -9999px;
    width: 25px;
    z-index: 50;
}

And also the position of them must be changed:

.meteor-nav .prev a {
    left: -10px;
}

.meteor-nav .next a {
    right: -10px;
}

Ive followed all your instructions and its looking great. One last problem and I think this is the last problem, now the slider is sliding outside the box: https://www.hikmah.co.uk/site/
Whereas in the original theme it stays inside the box: https://osc4.template-help.com/wordpress_28371/
Also in that theme, they have a nice effect on the sliding images, there is like a fade around the edge of the images. Is that something you can add as an option to your slider? or maybe you can just tell me how to add it into mine. many thanks

Ah, it’s going to be a bit trickier than that, because the transition needs to reveal two slides at once and the hidden overflow of the container was cropping the slides outside of the container.

To do what the example slideshow is doing, you need to add another container around just the slides to crop them without cropping the buttons.

You can add a second container using a custom slideshow template. You don’t need to do much with the file after copying it into your theme, just add the opening container tag right above the loop comment like this:

<div id="slideshow-container">

		<?php // Loop which loads the slideshow

And the closing tag after the loop right before the last line of the file:

</div><!-- #slideshow-container -->

	</div><!-- .meteor-slides -->

Now you can style that div to crop the slides without cropping the buttons, like this:

#slideshow-container {
    width: 836px;
    height: 350px;
    overflow: hidden;
    position: relative;
}

That should do it!

#slideshow-container {
width: 836px;
height: 350px;
overflow: hidden;
position: relative;
}

the above will go in the css file right? is there any particular place it needs to go? i tried putting it at the bottom and it didnt come out right

Yes, it goes in the custom stylesheet for the slideshow. It shouldn’t matter where you put it, but I had it at the top of the file in my test.

Did you add the custom template, it need that extra container in the markup to work.

i didnt add the custom template before but now i have. since then the buttons dont appear anymore. ive put the buttons in the themes image folder but i dont know if im using the right paths for the images. for example i put hikmah.co.uk/site/wp-content/themes/videox/images/prev.gif in place of ../images/prev.gif
On top of that, after adding:
#slideshow-container {
width: 836px;
height: 350px;
overflow: hidden;
position: relative;
}
the slideder has gone out of place. You can check it: hikmah.co.uk/site

Ah, the slideshow container is wrapped around the whole slideshow, it should be wrapped around just the slides.

Add this line:

<div id="slideshow-container">

Right above this line in the template:

<?php // Loop which loads the slideshow

And make sure the div is closed in the right spot.

It should look like this when you are done:

<div id="meteor-slideshow">

<ul class="meteor-nav"></ul>

<div id="slideshow-container">

...Slides...

</div>

</div>

Thanks for all your help. ive finally got the slider exactly how i want it. https://www.hikmah.co.uk/site

No problem, glad you got it figured out!