WordPress.org

Ready to get started?Download WordPress

Forums

HMS Testimonials
[resolved] Testimonial Form width (7 posts)

  1. chappie
    Member
    Posted 6 months ago #

    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/

  2. Jeff K
    Member
    Plugin Author

    Posted 6 months ago #

    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;
    }
  3. chappie
    Member
    Posted 6 months ago #

    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.

  4. chappie
    Member
    Posted 6 months ago #

    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.

  5. Jeff K
    Member
    Plugin Author

    Posted 6 months ago #

    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"]

  6. chappie
    Member
    Posted 6 months ago #

    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.

  7. chappie
    Member
    Posted 6 months ago #

    Typo - I meant td:nth-child(2)

Reply

You must log in to post.

About this Plugin

About this Topic