WordPress.org

Ready to get started?Download WordPress

Forums

Easing Slider "Lite"
[Plugin: Easing Slider] center the image (7 posts)

  1. Bob
    Member
    Posted 3 years ago #

    I was able to center the image by playing with the css. However, I could not get the shadow to center.

    Can you add an option to center the image OR add padding (that way I don't have to change the css for every upgrade)?

    Bob

    http://wordpress.org/extend/plugins/easing-slider/

  2. MatthewRuddy
    Member
    Plugin Author

    Posted 3 years ago #

    Sorry I don't exactly understand what your trying to achieve. Do you want the slider in the center of your page?

    To do this you could try putting the slider in a div and then setting that div to margin: 0 auto;. That should center it.

  3. Bob
    Member
    Posted 3 years ago #

    I'd like to have an option (in addition to adding padding) to center the images and the shadow.

    I did try putting the slider in a div as follows:

    <div class="myeasingslider">[easingslider]</div>

    I then added a .myeasingslider class to my CSS.

    However, WordPress, renders Easing Slider outside of the div I created. The html is below. Not sure how to fix that.

    Bob

    ---------------------------------------

    <div class="post-bodycopy clearfix"> <!-- Easing Slider -->
    <div class="lof-container" style="height:300px;padding-right:0px;padding-top:0px;padding-left:0px;padding-bottom:0px;">
    <div class="lof-slidecontent" id="lofslidecontent45" style="border:3px solid #ccc;width:480px;height:300px;">
    <div class="preload" style="background-image: url(http://localhost/wp/wp-content/plugins/easing-slider/images/indicator.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat; ">

    </div>
    <div class="lof-main-outer" style="background: #fff;width:480px;height:300px;">
    <ul class="lof-main-wapper" style="width: 2400px; left: -1920px; ">

  4. <img src="http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3299.jpg" style="width:480px;" alt="">
  5. <img src="http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2968.jpg" style="width:480px;" alt="">
  6. <img src="http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2828.jpg" style="width:480px;" alt="">
  7. <img src="http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3292.jpg" style="width:480px;" alt="">
  8. <img src="http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3029.jpg" style="width:480px;" alt="">
  9. </div> <div class="lof-navigator-wapper" style="bottom:-35px;left: 0;padding:5px 5px;">
    <div class="lof-navigator-outer" style="width: 125px; height: 15px; ">
    <ul class="lof-navigator" style="width: 125px; left: 0px; ">
    <li style="height: 15px; width: 25px; " class=""><span>.</span><li style="height: 15px; width: 25px; " class=""><span>.</span><li style="height: 15px; width: 25px; " class=""><span>.</span><li style="height: 15px; width: 25px; " class=""><span>.</span><li style="height: 15px; width: 25px; " class="active"><span>.</span>
    </div>
    </div>

    </div>
    </div><img src="http://localhost/wp/wp-content/plugins/easing-slider/images/shadow_large.png" style="width:480px; padding-left:0px;padding-bottom:0px;padding-top:6px;margin-left:3px;" alt=""><!-- End of Easing Slider --><div style="height: 1.4em; visibility: hidden;">A</div>
    <div style="height: 1.4em; visibility: hidden;">A</div>
    <div class="myeasingslider"></div>
    <div style="height: 1.4em; visibility: hidden;">A</div>
    <hr size="2">

  • Bob
    Member
    Posted 3 years ago #

    I figured it out need to change two files:

    Change slider.css:
    ------------------

    Change second line:

    From
    .lof-container {}.lof-slidecontent{ position: relative;}

    to
    .lof-container {}.lof-slidecontent{ position: relative; margin-left: auto; margin-right: auto;}

    2. add to end of css file:

    img.lof-center {
    display: block;
    margin-left: auto;
    margin-right: auto;}

    Change easingslider.php
    -----------------------

    Find the code to add the shadow Add [class="lof-center"] and delete [margin-left:'.$slider->bwidth.'px]

    From:

    echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.$padding.'px;padding-top:'.$padtop.'px;margin-left:auto;margin-right:auto;" alt="" />'; ?><!-- End of Easing Slider --><?php

    To:

    echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.$padding.'px;padding-top:'.$padtop.'px;" alt="" class="lof-center" />'; ?><!-- End of Easing Slider --><?php

  • MatthewRuddy
    Member
    Plugin Author

    Posted 3 years ago #

    So you managed to figure it out? Good :)

  • nbc81
    Member
    Posted 2 years ago #

    Hi,
    I am trying to get the Easing Slder to appear in the centre of my page when added to the header.php, currently it is indented to the left.

    I have followed the links and instructions above from rfgoetz but it hasnt worked.

    I am fairly new to php and css so still learning.

    Any guidance would be appreciated - test site for now to see it is http://nickburt.co.uk

    Thanks

  • nbc81
    Member
    Posted 2 years ago #

    No worries guys, site seems to have updated itself now, must have been a lag of somesort

    thanks

  • Topic Closed

    This topic has been closed to new replies.

    About this Plugin

    About this Topic

    Tags