WordPress.org

Forums

Meteor Slides
[resolved] Overlaying transparent PNG over Meteor Slideshow? (4 posts)

  1. dcjensen
    Member
    Posted 4 years ago #

    Just getting into WordPress and am a PHP novice. I have a Meteor Slideshow banner working in the header. It looks and works great.

    Now I need to overlay a transparent PNG (a composite of logos) over top of the banner slideshow. I know it can be done, but need help getting there.

    Thanks.

  2. Josh Leuze
    Member
    Plugin Author

    Posted 4 years ago #

    Hi David, the trick here is that you need to position the graphic absolutely so that you can layer it over the slideshow.

    So you might have some code in your header that looks like this:

    <div id="slideshow-wrapper">
    
    	<img id="slideshow-logo" src="logo.png" alt="Acme Co." />
    
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    
    </div><!-- #slideshow-wrapper -->

    And you might have some CSS that looks like this:

    #slideshow-wrapper {
    	position: relative;
    }
    
    #slideshow-logo {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }

    You need to have a div wrapped around the slideshow and logo because when you position the logo absolutely with the CSS above, it will be placed in the top left corner of the page unless it is contained by something that is positioned relatively.

    Here is a good blog post explaining how this positioning works.

  3. dcjensen
    Member
    Posted 4 years ago #

    Josh, thanks for going above and beyond to help with an issue that really wasn't a problem with Meteor Slideshow.

    NEWBIES TAKE NOTE:
    I spent hours of frustration trying to implement the above code due to a missing closing quotation mark (as shown, missing after the semi-colon: <div style="clear:both;></div>). This particular line is just ahead of the above code provided by Josh and is necessary to correctly place the slideshow. That $*#& absent quotation mark wrecked havoc on any attempt to correctly place my transparent logo.

    Happy to report that after fixing the missing quotation and adding a z-index of 60 (Meteor is set to 50) to the #slideshow-logo CSS above, all works as desired.

    And thus the angle of my learning curve incrementally improves.

  4. Josh Leuze
    Member
    Plugin Author

    Posted 4 years ago #

    No problem David, glad to help, and glad to hear you got it working!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic