WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Reposition and styling of counter buttons (7 posts)

  1. DreamPress
    Member
    Posted 1 year ago #

    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):
    http://dreamlab.nl/meteor/website.jpg

    This is how it is now:
    http://dcn.wouterkrop.nl

    Could anyone help me in the right direction?

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  3. DreamPress
    Member
    Posted 1 year ago #

    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!

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. frankisome
    Member
    Posted 1 year ago #

    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?

  6. frankisome
    Member
    Posted 1 year ago #

    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');
    }
  7. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic