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.
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; “>
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
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 http://nickburt.co.uk
Thanks
No worries guys, site seems to have updated itself now, must have been a lag of somesort
thanks
