Rotator Control Buttons

Resolved chappie
(@chappie)

12 years, 5 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://ww.wp.xz.cn/plugins/hms-testimonials/

Viewing 1 replies (of 1 total)

Thread Starter

(@chappie)

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.

Viewing 1 replies (of 1 total)

The topic ‘Rotator Control Buttons’ is closed to new replies.

Tags