[Plugin: Contact Form 7] How to change text area background colour

When you get your question answered make sure you post it…

Im simply trying to add color to my fields.

Go2CreativeGuy,

Got your note. Will do. So far, all is quiet on the CF7 front.

regards,

chiron34

can you give a link to your site and I will see if I can figure anything out

MobiJon…
Since you never specified which one of ur you were speaking to… https://bcbdigital.com/contact-us/

Hi,

I am still a novice, but I am a little less of a novice before I started this mess.

I wanted to do some of the same things you now want to do, plus a few more. Someone directed me to the following site:

https://www.wpsnippet.com/tag/style-contact-form-7/

It helped me change colors and create a background and borders.

I hope this helps.

Susan

You are obviously better than I, because I cant seem to find the right place to edit the code and what to put there everything I try blows up the form and wont let the page load

@go2creativeguy
in your base.css file this is line 283:
‘input[type=”text”], input[type=”password”], input[type=”email”], textarea, select {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px 2px 2px 2px;
color: #777777;
display: block;
font: 13px “HelveticaNeue”,”Helvetica Neue”,Helvetica,Arial,sans-serif;
margin: 0 0 20px;
max-width: 100%;
min-width: 210px;
outline: medium none;
padding: 6px 4px;}’

Its controlling your contact form 7. the #FFFFFF is the white background,the #CCCCCC is the border color.

line 304 of the same file gives the css for the boxes when you click in them. If you want the background of the box to change when you click on it copy the code from the background on the line 283 and specify a different color. hope this helps.
Now that your wondering how I knew that, there is an awesome addon for firefox called firebug that allows me to see the css (and more) of any site. its free and indispensable when doing what you are trying to do.
Remember that if your theme doesn’t have provision for a custom.css file, and you change the file in your theme, to make a backup of your edited file because if you update your theme it will overwrite what you have done.
God Bless and let me know if that helps

@chiron34;
If you would like to post a link to your site I can take a look at it for you, or if you would like to try the firebug route have at it.
Remember that if your theme doesn’t have provision for a custom.css file, and you change the file in your theme, to make a backup of your edited file because if you update your theme it will overwrite what you have done.
God Bless

sglee2120 & MobiJon,

Thanks for your responses. Sorry for the delay in replying, but I had to unexpectedly go away for a couple of days. I will try and sort out my CF7 using your advice. I’ll let you know how I go.

Coincidentally, MobiJon, I downloaded Firebug a couple of weeks back along with explanatory YouTube tutorials. Unfortunately, I haven’t yet had an opportunity to sit down and absorb it.

One question comes to mind however. Do you need to be CSS literate to use firebug or is that another job that I will have to face.

Graham

Hello Graham;
It does help to know a little CSS however Firebug is a good tool to learn about CSS. When you open FBug up you will see two boxes with code in them, the box to the right has the css for your page and what file it is pulling it from. You can click on the css code and it will allow you to make temporary changes and see the effect they have on your page. Once you reload the page those changes will revert to original. As you start a change if it is correct css it will auto-complete.
I have found this site to be an invaluable resource to figure out the css for what I am trying to accomplish.
https://www.w3schools.com/css.
I have found it very helpful that when I get the CSS edited in FBug as I want it I just copy the snippet of code and paste it to my custom CSS.
Happy Site building, let me know how it goes ??
God Bless

MobiJon

I appreciate your taking the trouble to give me some practical, down to earth advice. I will keep in touch.

Thank you also for your blessing. I sometimes reflect that in the hurley-burley of today’s busy work environment, we tend to forget or overlook the fact that we are small cogs in a vast engine that is our world. However, even the mightiest of engines can only work when the tiniest of cogs work together.

My site is still under construction, so my home page has a message discouraging visitors, alhough some of the internal pages have now been completed. Within that constraint, my profile is at

https://chironthebusinessdoctor.itsonline.com.au/about-graham-chirons-helmsman/

Send me an email to [email protected] so I can keep in touch outside of this public forum.

sincerely,

Graham

I am in need of making some css changes as well – I’ve looked through the plugin folder & do not find a “base.css file” I see several css files in different contact 7 folders which one is it please ?? I know enough about css to make the changes I just need to know the right path to get to it LOL – /contact-form-7/?/?

Thank you for your kind reply ??
Linda Lou

Hello Linda Lou:
It all depends on your theme, contact form 7 pulls css from different places with different themes. If you post a link to your site I can direct you to the correct file, or you could use firebug to check your site to find the file contact form 7 is using.
Let us know what you decide and how you make out.
God Bless
Jon

Hi mobi.jon thank you so very much for your reply you are greatly appreciated – here is the page for the contact form https://lindaloustarr.com/contact

Thank you & remember that Nothing is More Important Than Feeling Good ??
Linda Lou

PS: Unfortunately with fire fox’s newest upgrade my firebug isn’t working, being using the inspect element with chrome but I’m not sure what it’s telling me about the form to change, basically I just want to change the size of the input areas ??
LL