Change font color in text area on Contact-Form 7 plugin

  • How do I do it? It seems to be pulling the colors from my theme which is fine for the headings over the text areas, but the text areas themselves are against a white background so it’s nigh impossible to read. I’d like to change just the font color for what gets entered in the text area.

    https://www.crabbygamer.net/contact/

    Please and many thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Josh Feck

    (@builtbynorthby)

    You can override any of the color values (set by your theme or the plugin) in your theme’s style.css just by declaring them later in the file.
    I recommend using Firebug for Firefox to pinpoint what you’ll need to change, and if you’re not using a child theme, then by all means do so.
    Here’s why: https://themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades/

    Thread Starter crabbytech

    (@crabbytech)

    Thanks for the heads up on the child theme and I appreciate your response.

    I thought that I might be able to override and declare it in style.css, but I’m still having trouble tracking down the actual code to do so. I wasn’t sure what to call the text area. I’m learning CSS on the fly here.

    Josh Feck

    (@builtbynorthby)

    That’s exactly why Firebug is so useful.

    @crabbytech download and install Firebug for Firefox as Josh recommended.

    To *use* Firebug simply load the page you want to identify code on and then right mouse click on the object you want to identify code for.

    Firebug will open up a double horizontal window pane at the bottom of your browser. The left pane will show you the raw HTML code, the right pane will show you the CSS code that controls the elements in the HTML code.

    You can move your mouse over the HTML code (bottom left pane) to make sure you’re targeting the right element (you’ll notice as you do this that the objects in the main browser window up above become highlighted).

    What’s really great about Firebug is that you can test your proposed changes to the CSS before you monkey with the live code. Do this by changing the values or parameters in the CSS (in the bottom right panel) to see their effects on the rendered web page above. The changes you make only show up locally in your web browser and do not affect the code on the web server. You’ll need to update your HTML and/or CSS files and then upload them in order for any changes to go live.

    Hope that helps!

    Thread Starter crabbytech

    (@crabbytech)

    I appreciate everybody’s responses. Thanks for the extra info on Firebug, DantesGame.

    I actually ended up just going with a different plugin.

    https://www.fastsecurecontactform.com/

    It had a few more options and slots for customizing each text field and then I just added the CSS code for changing the font color myself into that plugin. That made it black so it’s black text on white background for my text area and fixed the glitch.

    Firebug is definitely on my list of things to try out though as I’m sure it will be helpful down the road. Thanks again!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change font color in text area on Contact-Form 7 plugin’ is closed to new replies.