WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Change color of contact form entry fields? (8 posts)

  1. artfuljammer
    Member
    Posted 1 year ago #

    Sorry if I'm asking this in the wrong place, but I'd like to change the background color of the entry fields for Contact Form 7. Can someone tell me where to find that code?

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    You can do it by editing CSS stylesheet in your theme. Add this to your theme's stylesheet:

    .wpcf7 input[type="text"], .wpcf7 textarea {
        background-color: red;
    }
  3. artfuljammer
    Member
    Posted 1 year ago #

    Hmmm. That didn't change anything at all. Was I supposed to just paste it in at the bottom or do I need to add it somewhere specific? I found this block of code in the style sheet:

    .wpcf7-form { font-weight: bold }
    .wpcf7-form span.wpcf7-form-control-wrap { display: block; margin-top: 5px; position: relative; }
    .wpcf7-form input[type="submit"] { margin-top: 0 }
    .wpcf7-form .ajax-loader { display: none }
    .wpcf7-form p { margin: 0 0 15px }
    .wpcf7-form p:last-of-type { margin: 0 }
    div.wpcf7-validation-errors, span.wpcf7-not-valid-tip { background-color: #FFFFFF; border: medium none !important; border-radius: 4px 4px 4px 4px; box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.05); color: #606060; padding: 10px 25px; text-align: center; margin: 0; }
    div.wpcf7-validation-errors { margin: 25px 0 0 }
    span.wpcf7-not-valid-tip { float: left; position: absolute; right: 0; top: 0; }
    .post-type { background: none repeat scroll 0 0 #BBBBBB; border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: inline-block; float: right; font-weight: 600; margin: -70px 0 10px; padding: 0 8px; text-transform: uppercase; }

    What would I change if I wanted the background to be pale gray instead of white?

    Thanks for trying to help!

  4. artfuljammer
    Member
    Posted 1 year ago #

    P.S. I also tried replacing #FFFFFF with #dbdbdb in the code above, but nothing changed then, either. :-(

  5. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    Can I check the site?

  6. artfuljammer
    Member
    Posted 1 year ago #

    That would be great. It's http://www.shaeirving.com.

    Thanks again.

  7. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 1 year ago #

    It should work. Add the style rule at the bottom of the theme's style.css.

  8. artfuljammer
    Member
    Posted 1 year ago #

    It did work. I was too literal. I pasted in the code you gave me above, but it doesn't have a # sign. I added that and it works fine. Thank you again for your help.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic