WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Slideshow and content out of place (20 posts)

  1. Canialegui
    Member
    Posted 2 years ago #

    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/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

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

  3. Canialegui
    Member
    Posted 2 years ago #

    http://127.0.0.1:4001/wordpress/

    I hope you can see this....thanks

  4. Canialegui
    Member
    Posted 2 years ago #

    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; ?>
  5. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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>
  6. Canialegui
    Member
    Posted 2 years ago #

    Hi Josh,

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

  7. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem!

  8. Canialegui
    Member
    Posted 2 years ago #

    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?

  9. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  10. Canialegui
    Member
    Posted 2 years ago #

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

  11. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  12. Canialegui
    Member
    Posted 2 years ago #

    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.

  13. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  14. Canialegui
    Member
    Posted 1 year ago #

    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?

  15. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

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

    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.

  17. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    The markup would go in your header.php file or wherever you added the slideshow originally.

    It doesn't really matter where in your theme's style.css file you put the CSS, but I would put it at the end so that it has priority over any other rules in your stylesheet.

    The "robot.jpg" and "A Robot" values are just placeholders. You'll want to replace the file name with the full path to the image you want to use or a template tag that gets that path. If the image has text you could add that to the alt text, or leave it blank.

    Here's an example, when I'm adding a client's logo to a site, it probably looks like this:

    <img src="<?php bloginfo( 'template_directory' ); ?>/images/acme-logo.jpg" alt="Acme" />
  18. Amedooo
    Member
    Posted 1 year ago #

    Hi,

    I have an similar problem with http://www.kchr.eu/
    I want to have the logo above the menu.
    I tried editing the header.php but it doesn't work.
    Could someone help me please?

    Thanks in advance.

  19. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Amedooo, it looks like you got it figured out?

  20. Amedooo
    Member
    Posted 1 year ago #

    Yes, :)

    Thanks anyway.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic