WordPress.org

Ready to get started?Download WordPress

Forums

HMS Testimonials
[resolved] Rotator Control Buttons (2 posts)

  1. chappie
    Member
    Posted 9 months ago #

    Just popping in to say how pleased I am with HMS Testimonials - and to share my simple Rotator control player buttons (easy as pie but little things delight us newbies):

    http://i1008.photobucket.com/albums/af208/3785/public/HMSbuttons.png

    ...and the CSS code is (adjust to suit):

    /*  testimonials widget buttons */
    .hms-testimonials-rotator .controls {
    text-align: center;
    font-weight: normal;
    font-size: xx-small;
    margin-left: 20%;
    margin-right: 20%;
    border-style: solid;
    border-width: medium;
    border-color: rgba(143, 72, 226, 0.5);
    border-radius: 25px;
    background-color: #fafafa;
    }

    How easy was that?! To get the vertical separators, I simply used the keyboard vertical stroke "|" in the button name fields, ie: "PREV |" and "| NEXT".

    Anyone else got something to share?

    http://wordpress.org/plugins/hms-testimonials/

  2. chappie
    Member
    Posted 8 months ago #

    Modified margins to prevent overcrowding in responsive themes:

    /*  testimonials widget buttons */
    .hms-testimonials-rotator .controls {
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-size: xx-small;
    margin-left: 12%;
    margin-right: 12%;
    border-style: solid;
    border-width: medium;
    border-color: rgba(143, 72, 226, 0.5);
    border-radius: 25px;
    background-color: #fafafa;
    }

    Additional CSS to prevent button line-wrap in small viewports:

    @media (max-width: 979px) {
    /* testimonial widget buttons - add margin to stop wrap in small screens */
    .hms-testimonials-rotator .controls {
    margin-left: 1px;
    margin-right: 1px;
      }
    }

    Merry Xmas.

Reply

You must log in to post.

About this Plugin

About this Topic