WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Meteor Slides] Slideshow and content out of place

[Resolved] [Plugin: Meteor Slides] Slideshow and content out of place

  • Hi, I’m working with Instant WordPress on a theme called ‘zeeSynergie 1.1’.

    I tried to embed the slideshow in the header as you explained in the video. Since the slideshow and the content below where not in the right place after that, I just did as you told and put the extra code in, but now they are both completely on the left side of the page.I really don’t know how to solve this, so I hope you can help me out. Thanks in advance.

    Below you can see what the code is like:

    <body <?php body_class(); ?>>
    <div id="wrapper">
    
    	<div id="header">
    
    		<div id="head">
    			<div id="logo">
    				<?php
    				$options = get_option('themezee_options');
    				if ( isset($options['themeZee_general_logo']) and $options['themeZee_general_logo'] <> "" ) { ?>
    					<a href="<?php echo home_url(); ?>"><img src="<?php echo esc_url($options['themeZee_general_logo']); ?>" alt="Logo" /></a>
    				<?php } else { ?>
    					<a href="<?php echo home_url(); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
    				<?php } ?>
    			</div>
    			<div id="socialmedia_icons">
    				<?php if ( isset($options['themeZee_socialmedia_header']) and $options['themeZee_socialmedia_header'] == 'true' ) {
    					locate_template('/header-social-buttons.php', true);
    				} ?>
    				<div class="clear"></div>
    			</div>
    			<div class="clear"></div>
    		</div>
    
    		<div id="navi_container">
    			<div id="navi">
    				<?php
    					// Get Navigation out of Theme Options
    					wp_nav_menu(array('theme_location' => 'navi', 'container' => false, 'menu_id' => 'nav', 'echo' => true, 'fallback_cb' => 'themezee_default_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0));
    				?>
    			</div>
    		</div>
    		<div class="clear"></div>
    	</div>
    <div style="clear:both;"></div>
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>

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

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

    @jleuze

    Can you post a link to the site you’re working on?

    http://127.0.0.1:4001/wordpress/

    I hope you can see this….thanks

    The original code where I have access to via the editor is:

    <!DOCTYPE html><!-- HTML 5 -->
    <html <?php language_attributes(); ?>>
    
    <head>
    	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    
    	<title><?php bloginfo('name'); if(is_home() || is_front_page()) { echo ' - '; bloginfo('description'); } else { wp_title(); } ?></title>
    
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="wrapper">
    
    	<div id="header">
    
    		<div id="head">
    			<div id="logo">
    				<?php
    				$options = get_option('themezee_options');
    				if ( isset($options['themeZee_general_logo']) and $options['themeZee_general_logo'] <> "" ) { ?>
    					<a href="<?php echo home_url(); ?>"><img src="<?php echo esc_url($options['themeZee_general_logo']); ?>" alt="Logo" /></a>
    				<?php } else { ?>
    					<a href="<?php echo home_url(); ?>/"><h1><?php bloginfo('name'); ?></h1></a>
    				<?php } ?>
    			</div>
    			<div id="socialmedia_icons">
    				<?php if ( isset($options['themeZee_socialmedia_header']) and $options['themeZee_socialmedia_header'] == 'true' ) {
    					locate_template('/header-social-buttons.php', true);
    				} ?>
    				<div class="clear"></div>
    			</div>
    			<div class="clear"></div>
    		</div>
    
    		<div id="navi_container">
    			<div id="navi">
    				<?php
    					// Get Navigation out of Theme Options
    					wp_nav_menu(array('theme_location' => 'navi', 'container' => false, 'menu_id' => 'nav', 'echo' => true, 'fallback_cb' => 'themezee_default_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'depth' => 0));
    				?>
    			</div>
    		</div>
    		<div class="clear"></div>
    	</div>
    
    	<div id="container">
    
    	<?php if( get_header_image() != '' ) : ?>
    		<div id="custom_header">
    			<img src="<?php echo get_header_image(); ?>" />
    		</div>
    	<?php endif; ?>
    Plugin Author Josh Leuze

    @jleuze

    I can’t see your local dev site. Do you want to replace the featured image under the nav with a slideshow?

    Try replacing this chunk:

    <?php if( get_header_image() != '' ) : ?>
    		<div id="custom_header">
    			<img src="<?php echo get_header_image(); ?>" />
    		</div>
    	<?php endif; ?>

    With this:

    <div id="custom_header">
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    </div>

    Hi Josh,

    Thank you very much. It’s working like a charm now!!

    Plugin Author Josh Leuze

    @jleuze

    No problem!

    Just would like to know as well if it is possibly to put this slider in the header for about 60% of the size and use the other 40% for a static foto?

    Plugin Author Josh Leuze

    @jleuze

    Sure, you’d just need to add a little custom CSS. Float the slideshow to the left or right and float the static image the other direction.

    Sorry to bother you again, but how exactly can I do that? Where do I place it?

    Plugin Author Josh Leuze

    @jleuze

    It depends on your site, if you can get it online I can take a look and give you more info. But to start with, float the slideshow to the left or right by adding this to your theme’s stylesheet:

    div.meteor-slides {
    float: left;
    }

    Then add the static image before or after the slideshow shortcode or template tag, depending on where you want it.

    Check out this great article on floats to learn more, and don’t forget to clear them.

    So sorry but I just cannot seem to make it work. What code should I put in? The header with slider and logo fixed on the right like on this website http://www.appartementpraag.nl/ is what I would like on my website, but I really don’t know how to do this.

    Plugin Author Josh Leuze

    @jleuze

    If you want it like the example you posted, you want to float the slideshow to the left. That CSS code would go in your theme’s style.css file.

    the slide-show floated to the left is the code you showed above. But the image to have that on the right how do I do that? Where do I place the codes, and what code should I place. The image should that be in the css style sheet or where?

    Plugin Author Josh Leuze

    @jleuze

    No, the image should be added using markup, not CSS:

    <div id="custom_header">
    	<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
    	<img id="header-image" src="robot.jpg" alt="A Robot" />
    	<div class="clear"></div>
    </div>

    So the CSS to lay those out might be like this:

    #custom_header div.meteor-slides {
    float: left;
    }
    
    #custom_header #header-image {
    float: right;
    }
    
    .clear {
    clear: both;
    }

    Ok so the CSS code gets placed in the CSS style-sheet under ‘Wrapper’. And I think the other code ‘the markup’ gets placed in the header.php?

    The url of the image I then place where it says src='"robot.jpg" But what about the alt="A Robot". Do I change that as well? Or should I just name the image I want to use Robot?

    Sorry for all the questions, but I’m really new to all this CSS.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘[Resolved] [Plugin: Meteor Slides] Slideshow and content out of place’ is closed to new replies.