Plugin Author
Jeff K
(@kreitje)
Can you send me a link to your site.
For the width of the fields, and the submit button:
input[type="text"],
input[type="email"],
input[type="submit"] {
width:99%;
}
input[type="submit"] {
/* set color to black */
color:#000;
font-family: Arial;
}
Great, Jeff – I’ll give that a go. (No wonder I couldn’t work it out!)
My site isn’t online yet: the best I could do is send you a webarchive of my Testimonials page and sidebar.
I need some help to target the HMS Testimonials selectors only because at the moment, whatever values I add to your code are also inherited by my site Search button (and possibly other “inputs” that I haven’t seen yet).
I tried targeting .hms-testimonials-form and one or two other options but couldn’t find the right combination.
The good news is that I seem to be able to move the form fields as close to the text titles as I would like but this also increases the width of the fields and I haven’t yet found the right command to shorten them/add padding on the right.
Here’s roughly what I’m trying to do. Additionally I would like to center the form fields vertically within their spans as the default spacing is uneven:
http://i1008.photobucket.com/albums/af208/3785/public/HMSform.png
Thanks again for any help.
Plugin Author
Jeff K
(@kreitje)
For the form, you can use the .hms-testimonials-form class to add specificity. For your text field, add that to the list of css. I did add it in the example below.
.hms-testimonials-form input[type="text"],
.hms-testimonials-form input[type="email"],
.hms-testimonials-form input[type="submit"],
.hms-testimonials-form textarea
{
width:99%;
}
Depending on your CSS you may have to go even further like:
body .hms-testimonials-form input[type="text"]
Thank you Jeff – that did it! In order to achieve what I wanted, I had to split it out into multiple chunks but I’m very happy with the result. My code is probably unnecessarily repetitive and lengthy, but for what it’s worth:
/* Testimonial form field mods */
.hms-testimonials-form input[type="text"],
.hms-testimonials-form input[type="email"],
.hms-testimonials-form textarea
{
margin-left: -50%;
font-family: Trebuchet MS, sans-serif;
font-weight: 800;
color: #8f48e2;
}
.hms-testimonials-form input[type="submit"] {
margin-left: -50%;
font-family: Trebuchet MS, sans-serif;
color: #b985f7;
}
.hms-testimonials-form input[type="text"],
.hms-testimonials-form input[type="email"]
{
width: 99%;
}
I’m left with tds which now stick out too far to the right of the fields but having failed miserably to target the right-hand column of tds with nonsense like tdnth-child(2) {width: 50%}I will settle for what I’ve got.
Typo – I meant td:nth-child(2)
