WordPress.org

Ready to get started?Download WordPress

Forums

HMS Testimonials
[resolved] CSS for styling form background color (15 posts)

  1. chappie
    Member
    Posted 3 months ago #

    I know I'm going to have to give myself a slap when I find out the answer but I've tried every which way to change the background color of my form background and come up empty every time.

    My form has four fields/trs and for reasons I can't fathom the tr backgrounds have alternating #ffffff and #f8f8f8. The input fields themselves are all #ffffff which is fine but I want to color the whole of the form background to match my page color which is #fafafa.

    So far, I have tried, and failed, to target form table tbody and each individual tr (as a class and by each given ID, eg cf-email

    So far, my CSS works fine but what do I need to add to this to color the form background?

    /* Testimonial form field mods */
    .hms-testimonials-form input[type="text"],
    .hms-testimonials-form input[type="email"],
    .hms-testimonials-form textarea
    {
    margin-left: -50%;
    background: #ffffff;
    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;
    background: #8f48e2;
    }
    .hms-testimonials-form input[type="text"],
    .hms-testimonials-form input[type="email"]
    {
    width: 99%;
    }

    Thanks for any help. The site is offline unfortunately so I can't provide a link.

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

  2. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Hey chappie,

    You probably have something like this in your CSS:

    tr:nth-child(even) {background: #f8f8f8}
    tr:nth-child(odd) {background: #fff}

    You will probably need to override these pseudo-element

  3. chappie
    Member
    Posted 3 months ago #

    Hi Jeff - thanks for getting back to me on this (I knew you wouldn't take more than 5 minutes so I kept the page open and just refreshed a couple of times…)

    You're right that I use nth-child elsewhere in my HMS CSS but I'm sure it shouldn't affect the form. Here's the sum total of all my CSS (minus the slug posted above):

    /* testimonials page indents + default to grey text  */
    .hms-testimonial-group { margin-bottom: 20px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 1%;
    font-size: 100%;
    color: #808080;
    }
    
    /* testimonials page vary style for alternate texts  */
    .hms-testimonial-container:nth-child(even) {
    font-style: italic;
    color: #707070;
    }
    
    /* Testimonials widget default text style + color */
    .hms-testimonials-rotator {
    font-style: italic;
    color: #606060;
    }
    
    /*  testimonials author alignment + color */
    .hms-testimonial-container .author { font-weight:bold;
    font-size: 0.9em;
    font-style: normal;
    line-height: 1.9;
    text-align: right;
    padding-right: 3%;
    color: #5a5a5a;
    }
    
    /*  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;
    }
    
    @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;
      }
    
    /* testimonials page para spaces + horizontal divider rules */
    .hms-testimonial-container { margin-bottom: 10px;
    border-bottom: thin dotted #5a5a5a;
    }
    
    /* Make Testimonial Page narrow */
    .page-id-171 .entry-content {
    padding-right: 5%;
    }
  4. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Are you sure elsewhere in your theme doesn't use it? Got a link for me to look at?

    You can prefix the overrides with the hms-testimonials-form class.

    .hms-testimonials-form tr:nth-child(even) {
    /* override here */
    }
  5. chappie
    Member
    Posted 3 months ago #

    Positive - I just searched for "nth" across the whole theme.

    Your snippet gives me hope but I don't know what to do with it/where to put it.

  6. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    You can stick it in your themes style.css file. Can you send me a link to your site?

  7. chappie
    Member
    Posted 3 months ago #

    It does nothing by itself Jeff - do I need to add some style?

    My site is on localhost so I can't link to it. I could email you a (Mac) Safari webarchive of my testimonials page which you could open in Safari…if you had nothing better to do!

  8. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Oh yeah, you need to enter the background color you want it to be.

    To set it white:

    .hms-testimonials-form tr:nth-child(even) {
    background:#ffffff;
    }
    
    .hms-testimonials-form tr:nth-child(odd) {
    background:#ffffff;
    }

    If that doesn't work try changing the background to:

    background:#ffffff !important;

  9. chappie
    Member
    Posted 3 months ago #

    Thanks Jeff but nothing happens.

    FWIW, I have two other forms on my site via the Contact Form 7 plugin and I have managed to fix up all the backgrounds and other styles so maybe, if all else fails, I could insert a CF7 form at the bottom of my testimonials page?

  10. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Huh that is really weird. It's really hard to see what's going on without being able to view your page.

    Another trial:

    .hms-testimonials-form tr:nth-child(even) td {
    background:#ffffff;
    }
    
    .hms-testimonials-form tr:nth-child(odd) td {
    background:#ffffff;
    }

    Like before you may need to adjust the background to:

    background:#ffffff !important;

  11. chappie
    Member
    Posted 3 months ago #

    Yes! YES, YES!!! Thank you, thank you, thank you.

    That worked fine without the !important;

    And it only cost you an hour and me three.

    Brilliant support here as always.

    Now, does the fact that it worked tell you anything that I ought to know about why I might have been having such difficulty (apart from being a dunce)?

    (Take the rest of the night off btw...)

  12. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Well, the original code I gave was an oversight. You have to set the background on the actual cell not the row (hence the added td).

    I am guessing one of the CSS rules somehow matches or maybe a plugin is loading it's own CSS?

  13. chappie
    Member
    Posted 3 months ago #

    Jeff - O/T but are you aware that the WP Dashboard link to the HMS plugin site leads to a web host promo page?

  14. Jeff K
    Member
    Plugin Author

    Posted 3 months ago #

    Yep. HitMyServer.com is my site.

  15. chappie
    Member
    Posted 3 months ago #

    That's ok then! I assumed that it was a redirect and I would guess that maybe I wouldn't be alone since on a quick scan I didn't notice any HMS Testimonials reference. Hence, I left prematurely as I wasn't in the market for web hosts or servers!

Reply

You must log in to post.

About this Plugin

About this Topic