WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] meteor in header (21 posts)

  1. linux garage
    Member
    Posted 2 years ago #

    Great slideshow !!!

    I'd like to add a slide show to the header in the twenty eleven theme.

    Can you tell me how to do this?

    Thanks

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

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    If you haven't already started editing 2011, I would suggest using a child theme so that you don't lose your changes if 2011 is updated. You can copy the header.php file from 2011 to your child theme and make your changes there.

    Remove the header image by going to Appearances -> Header and clicking the "Remove Header Image" button.

    You can add the slideshow on line #111, right above the opening tag for the nav:

    <nav id="access" role="navigation">

    Make sure you use the template tag in this spot:

    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
  3. linux garage
    Member
    Posted 2 years ago #

    Awesome !

    I'll give it a try.

    I'd like to float an image to the logo image to the right of the meteor slider in the header.

    How would I do this?

    Thanks so much for the help.

    Your slider is better than Nivo because Nivo header slideshow because it causes the website to "flash." Also the drop down menus disappear over a Nivo slideshow but not with your slideshow. Your slider is the best I've found so far :)

  4. linux garage
    Member
    Posted 2 years ago #

    ps: meant to say

    I'd like to float the logo-image to the left of the meteor slider in the header.

    (writing too fast)

  5. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Thanks, I'm glad that my plugin is working out for you!

    You want a logo instead of the title and description? You could probably just remove everything in the <hgroup> container and replace it with the anchor and image tag for your logo. Give it an ID and float that ID to the left in your stylesheet.

    If it isn't laying out correctly post a link and I'll check it out.

  6. linux garage
    Member
    Posted 2 years ago #

    JLeuze,

    Thanks for your tech tips.

    I've decided not to float the logo left for this project.

    But it's great to have some idea how to do it for another project.

    Just amazed by the level of support you give on this forum.

    Thanks again for your wonderful Meteor Slideshow.

  7. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    You're welcome!

  8. boothmandesigns
    Member
    Posted 1 year ago #

    Hi,

    Hopefully someone can help.

    I've added the slide show to my header.php (child) and it is displaying in replace of the header image which is great, however it is completely off centre. I did think that this might be as the template is not fixed width 288px so i fixed width it on my stylesheet but that has made no difference.

    The url is http://www.jollyrockers.co.uk

    Any help is much needed!

    Thanks

  9. boothmandesigns
    Member
    Posted 1 year ago #

    Just to confirm this is how i've added it to my header.php

    <nav id="access" role="navigation">
    
    <div style="clear:both;"></div>
    
    <?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
  10. linux garage
    Member
    Posted 1 year ago #

    Hi there:

    (1) Try adding height and width to the code:

    eg:

    ?php if ( function_exists( 'meteor_slideshow') ) { meteor_slideshow( "height: 300, width: 1000" ); } ?

    (2) Make each image used the same dimension as height and width set in the code.

    (3) If you read Josh's documentation is will explain how to use features like fade, scroll up, etc.

    Best of Luck

  11. boothmandesigns
    Member
    Posted 1 year ago #

    Hi Linuxgarage,

    Many thanks for your suggestion.

    I've just tried adding height and width to the code as you have documented however it has made no effect.

    All the images are (2) are 1000x288 as the same size as the standard twenty eleven header image.

    Fade, Scroll Up as in transition effects?

    Thanks

  12. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    If you have the dimensions set in the slideshow options and the slide images match that size, you don't have to specify the size in the template tag.

    One issue is this CSS rule which is adding a margin to the slideshow:

    #access div {
    margin: 0 7.6%;
    }

    You can fix that like this:

    div.meteor-slides {
    margin: 0 !important;
    }
  13. linux garage
    Member
    Posted 1 year ago #

    Hey Josh, Good Morning :)

    @Boothman

    Josh is awesome. He'll help you get thru this.

  14. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi, morning!

  15. boothmandesigns
    Member
    Posted 1 year ago #

    Hi JLeuze,

    Thank you for your input. Am i just adding that second code to my stylesheets.css?

    Thanks

  16. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Yeah, you can add that to your theme's style.css file.

  17. boothmandesigns
    Member
    Posted 1 year ago #

    I've added that code to my theme style.css file and again its not made any difference. dammit, something's not right here..

  18. boothmandesigns
    Member
    Posted 1 year ago #

    Just to add, while inspecting elements its displaying the slide show at 848px x 244px. Both images are 1000x288 and the settings is set up for the same.

    A second note, i have no idea if it is relevant, when unchecking show share buttons in the slide settings it automatically rechecks the both on updating.

  19. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Ah, the slideshow is inside the nav container:

    <nav id="access" role="navigation">

    If you move the slideshow template tag above the nav it won't be effected by the margin rule that is targeting the slideshow.

  20. boothmandesigns
    Member
    Posted 1 year ago #

    Thats it!!

    Put the code above the nav container and works like a charm.

    Thanks again JLeuze, a great slideshow plugin you've created and thank you very much for your help.

  21. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic