WordPress.org

Forums

Easing Slider
[resolved] top margin of the slider in twenty twelve (3 posts)

  1. Willem 2
    Member
    Posted 1 year ago #

    Hi,

    I''m using easing slider as a header image slider in twenty twelve. Therefore, I removed the header image in dashboard and put the slider code in header.php , like this :

    </nav><!-- #site-navigation -->
    <?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
    		<?php if ( get_header_image() ) : ?>
    		<a>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    	</header><!-- #masthead -->

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    When I do this, the image slider touches the navigation bar (the grey line). To change the distance between the navigation bar and the slider I used the next css code (I have read about this code in one of the posts on this forum.):

    .easingsliderlite, .easingsliderlite div, .easingsliderlite a, .easingsliderlite img {
    line-height: 0 !important;
    margin: 5px 0 0 !important;
    outline: medium none !important;
    }

    Now I have the right distance at the top of the slider but the images are smaller, they loose 5 pixels at the bottom.

    Who knows a solution for this?

    See the slider with the css changed (the images have lost 5 pixels in the height): http://www.column-razenberg.nl

    https://wordpress.org/plugins/easing-slider/

  2. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hi @Willem2, this is because you've applied the spacing to the slideshow's internally elements as well.

    Try putting the slideshow inside a <div>, then applying the CSS to that instead. Like this:

    <div class="header-slideshow">
        .. Slideshow code goes here ..
    </div>

    Then the CSS would be:

    .header-slideshow {
        line-height: 0 !important;
        margin: 5px 0 0 !important;
        outline: medium none !important;
    }

    That should work! :)

  3. Willem 2
    Member
    Posted 1 year ago #

    Hi Matthew,

    It works! Thank you very much for your quick response.

    Willem

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Easing Slider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic