WordPress.org

Forums

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

  1. artfuljammer
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

    Can I check the site?

  6. artfuljammer
    Member
    Posted 2 years ago #

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

    Thanks again.

  7. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

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

  8. artfuljammer
    Member
    Posted 2 years 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

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic