WordPress.org

Support

Support » Plugins and Hacks » HMS Testimonials » [Resolved] Testimonial Form width

[Resolved] Testimonial Form width

  • My Testimonial Form has too much empty space between the fields and their titles. I’ve tried various padding/margin CSS on the elements I’ve found but haven’t found a way yet to squeeze the fields and titles closer together.

    I would quite like to adjust the width of the fields too, as well as the color and font of the Submit Testimonial button, if possible.

    Grateful for any help.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • 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:

    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)

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Testimonial Form width’ is closed to new replies.
Skip to toolbar