Hi, it looks like you’re getting pretty close! Are you using Firebug or another inspector? I love Firebug, it makes it way easier edit CSS.
You need to edit the styles for the “meteor-buttons” container and the links inside it. Here’s an example that would resize that container and get it in nearly the right position:
.meteor-slides .meteor-buttons {
top: 247px;
height: 9px;
right: 80px;
margin: 0;
padding: 6px 0 0;
position: absolute;
width: auto;
z-index: 999;
}
And here’s an example to style the buttons. The buttons use a background image to look like image buttons, but they are really just numbered text links, so you can easily remove the background image and reveal the numbers to get pretty close:
.meteor-buttons a {
background: yellow;
display: block;
float: left;
width: 20px;
height: 20px;
margin: 0 0 0 5px;
outline: none;
text-indent: 0;
border: solid 1px yellow;
line-height: 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: blue;
}
And don’t forget to style the active/hover links:
.meteor-buttons a.activeSlide {
background: none;
}
Yeah! Got it! Looks great now!
I know what i was doing wrong now. I was styling in my themes styles.css and didn’t think about the plugin styling… rookie mistake…. when i pasted your code into my styles.css i knew i had to look elsewhere. Should have used Firebug but i’m a Safari addict and just figuring out how to use the inspector.
Thanks a lot! This was so helpful!
No problem, make sure you style the slideshow from your theme’s stylesheet, or use a custom stylesheet, if you edit the stylesheet in the plugin you’ll lose the changes when you update the plugin.
hey awesome plugin,i was wondering,what if i want to use the image title instead of the number for each pic?i would like to make three or four labels next to the pics in vertical position,instead of the numbers.
i saw theres with firebug,but it seems dynamic and i cant find it in the php code,is there a way to do so with css or php/html?
solved by myself,i found this line in the js code:
a = '<a href="#">'+(i+1)+'</a>';
changed it with:
a = '<a id="pager'+(i+1)+'" href="#">'+(i+1)+'</a>';
then gave a css style to each pager with php.or you can just define the pagers you need in the css:
.meteor-buttons a {
/*etc*/
}
#pager1{
background: url('../images/eventi.png');
}
@frankisome Not sure if you hacked the script directly, but you can do this using a custom slideshow script so that the changes stick if you update the plugin.
