[Plugin: Easing Slider] center the image

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author MatthewRuddy

    (@matthewruddy)

    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.

    Thread Starter rfgoetz

    (@rfgoetz)

    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(https://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; “>

    Thread Starter rfgoetz

    (@rfgoetz)

    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

    Plugin Author MatthewRuddy

    (@matthewruddy)

    So you managed to figure it out? Good ??

    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 https://nickburt.co.uk

    Thanks

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

    thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: Easing Slider] center the image’ is closed to new replies.