Changing ‘text field’ color in Contact form 7

  • rocknroll7770

    (@rocknroll7770)


    15 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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    CSS Tutorials
    Learning CSS

    bojandevic

    (@bojandevic)

    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

    Thread Starter rocknroll7770

    (@rocknroll7770)

    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.

    bojandevic

    (@bojandevic)

    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

    Thread Starter rocknroll7770

    (@rocknroll7770)

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing ‘text field’ color in Contact form 7’ is closed to new replies.