Support » Plugin: Meteor Slides » Reposition and styling of counter buttons

  • Resolved DreamPress


    Hi there JLeuze and Meteor Slides users,

    First of all great plugin and support. With the help of you and the WP forum i already managed to add a title and caption and style it. Great stuff! But now i’m stuck.

    I’m trying to reposition the buttons and style them. Ik got them to move around al little bit but i cannot position them the way i want. I saw that it is in another DIV than the caption. But i’m no php expert (just a designer with a lot of courage to get into web design) so every time i tried to rearrange code it got broken.

    This is what it must be (screenshot of design):

    This is how it is now:

    Could anyone help me in the right direction?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Josh Leuze


    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!

    Plugin Author Josh Leuze


    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 {
        background: url('../images/eventi.png');
    Plugin Author Josh Leuze


    @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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Reposition and styling of counter buttons’ is closed to new replies.