WordPress.org

Ready to get started?Download WordPress

Forums

Changing 'text field' color in Contact form 7 (6 posts)

  1. rocknroll7770
    Member
    Posted 4 years ago #

    I want to change the color of the 'text field' (where the user would type his email, text, etc). The default is gray.

    I'm no good with CSS but I have been through the code in 'Manage Plugins' > Edit > Plug-in files > 'contact-form-7/admin/styles.css' several times and changed several colors I found into white (fff) and clicked 'update file' then reloaded the website but nothing (no color whatsoever) changed.

    Can someone please point me in the right direction (as a step by step guide for a beginner).

    Do I have to change the color once for all the five fields or each one individual? Can they have different colors?
    Finally, where do you change the 'text frame border'?

    Your help is much appreciated. Thank you and best wishes.

  2. esmi
    Forum Moderator
    Posted 4 years ago #

  3. bojandevic
    Member
    Posted 4 years ago #

    It's defined in your theme css, try to find "textarea" in your css and change background to fff. This will give them all the same color (white) if you want to define different color for some of them look in the source code and find which class does that field use. For example email field on my site (skepo.info/contact-me) uses class wpcf7-validates-as-email, so I can add this to my css (contact-form-7/styles.css)

    .wpcf7-validates-as-email{
    background:red;
    }

    For changing border color read this

  4. rocknroll7770
    Member
    Posted 4 years ago #

    Esmi: Thank you for the tutorial link, I will definitely have to look into it.

    bojandevic: Thank you but whatever I change in css does not change on webpage after updating file. Am I looking in the right place? ('contact-form-7/admin/styles.css')
    On top of my css it says 'inactive':
    'Editing contact-form-7/admin/styles.css (inactive)'

    Is that the problem? However when I go to Plugins>installed it is listed as active.

    Am I right in thinking it's smarter to add to css rather than changing the code to keep it the same after an upgrade? Could you please confirm if I am in the right place.

  5. bojandevic
    Member
    Posted 4 years ago #

    The text field color is defined in your theme so you need to change it there. In wp-content/themes/theme-name/styles.css
    For one particular field do what I recommended you and save to contact-form-7/styles.css or wp-content/themes/theme-name/styles.css

  6. rocknroll7770
    Member
    Posted 4 years ago #

    Right, I was looking in the wrong place. Thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic