WordPress.org

Ready to get started?Download WordPress

Forums

Promotion Slider
center align the image in slider? (11 posts)

  1. web@ceramats.com
    Member
    Posted 2 years ago #

    I have having trouble getting the image in my slider to center.

    I read the previous post and used the code below but still doesn't work..

    .promo_slider_background_image img {
    margin-left:auto;
    margin-right:auto;
    }

    Link to page: http://www.ceramats.com/stain-colors

    the image under stain color tab is left align and I really need to get it centered.

    Please help.

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

  2. Micah Wood
    Member
    Plugin Author

    Posted 2 years ago #

    Change the rule on line 617 of your theme's style.css file to remove the left margin:

    .hentry ul, .hentry ol, .comment-body ul, .comment-body ol {
        margin-left: 0;
        margin-bottom: 1em;
    }

    It isn't that the slider image isn't centering, it is that the menu below it is too far to the right.

  3. web@ceramats.com
    Member
    Posted 2 years ago #

    Hi Micah,
    Thanks for the feedback.

    I tried it but it didn't center the tables inside the slider under "Glaze Stain".

    I am trying to have the table under "Glaze Stain" centered like the one under "Inclusion".

    Is there anyway to do it?

  4. Micah Wood
    Member
    Plugin Author

    Posted 2 years ago #

    Try this:

    div.promo_slider .panel {
        width: 624px;
        margin: 0 auto;
    }
  5. web@ceramats.com
    Member
    Posted 2 years ago #

    Thanks Micah.

    Tried it, but still not centered...

    I also tried to change the width to different numbers (10, 100, 1000) to try bu all of them look exactly the same.

    Arg...

  6. Micah Wood
    Member
    Plugin Author

    Posted 2 years ago #

    Sorry, make that:

    div.promo_slider_background_image {
        width: 624px;
        margin: 0 auto;
    }
  7. web@ceramats.com
    Member
    Posted 2 years ago #

    oh wow thanks! works like a charm.

    Sorry, another question.

    Is there anyway to move the navigation bar to the top instead of having it down bottom?

  8. Micah Wood
    Member
    Plugin Author

    Posted 2 years ago #

    You can move the thumbnail navigation bar to the top, like this:

    div.promo_slider_wrapper.thumb_nav .promo_slider {
        padding-top: 50px;
    }
    
    div.promo_slider_thumb_nav {
        position: absolute;
        top: 0;
        width: 100%;
    }
  9. web@ceramats.com
    Member
    Posted 2 years ago #

    Micah, you are absolutely amazing! Works great. I increased the top padding to 100px though. The picture gets covered up partially when I use 50px.

    I also managed to change the background to transparent.

    Still trying to figure out how to change the highlighter' color around the thumbnails when its on a certain slide.

    Any tips?

  10. Micah Wood
    Member
    Plugin Author

    Posted 2 years ago #

    This will remove the color behind the thumbnail nav:

    div.promo_slider_thumb_nav {
        background: none;
    }

    Or you can use the color you want, such as this:

    div.promo_slider_thumb_nav {
        background: #ccc;
    }
  11. Dzmitry
    Member
    Posted 1 year ago #

    div.promo_slider_background_image {
    text-align: center;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic