WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] How to change text area background colour (44 posts)

  1. chiron34
    Member
    Posted 2 years ago #

    I am using Weaver II theme with a black background. Under the theme appearance settings, I use a dark orange font for content areas and a green font for widget areas. When I installed CF7, it works with the green font, which is very hard to read against the white text box background.

    Would it be possible for someone more skilled than I (I am a novice at this website building game) to give me a checklist as to what I should do to change the CF7 text box backgrounds to black (#000000) and insert a yellow border (#ffff00) around these text box areas.

    Any help will be greatly appreciated.

    sincerely,

    chiron34

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Go2CreativeGuy
    Member
    Posted 2 years ago #

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

    Im simply trying to add color to my fields.

  3. chiron34
    Member
    Posted 2 years ago #

    Go2CreativeGuy,

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

    regards,

    chiron34

  4. mobiJon
    Member
    Posted 2 years ago #

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

  5. Go2CreativeGuy
    Member
    Posted 2 years ago #

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

  6. sglee2120
    Member
    Posted 2 years ago #

    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:

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

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

    I hope this helps.

    Susan

  7. Go2CreativeGuy
    Member
    Posted 2 years ago #

    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

  8. mobiJon
    Member
    Posted 2 years ago #

    @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

  9. mobiJon
    Member
    Posted 2 years ago #

    @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

  10. chiron34
    Member
    Posted 2 years ago #

    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

  11. mobiJon
    Member
    Posted 2 years ago #

    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.
    http://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

  12. chiron34
    Member
    Posted 2 years ago #

    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

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

    Send me an email to chiron34@gmail.com so I can keep in touch outside of this public forum.

    sincerely,

    Graham

  13. lindaloustarr
    Member
    Posted 2 years ago #

    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

  14. mobiJon
    Member
    Posted 2 years ago #

    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

  15. lindaloustarr
    Member
    Posted 2 years ago #

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

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

  16. lindaloustarr
    Member
    Posted 2 years ago #

    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

  17. mobiJon
    Member
    Posted 2 years ago #

    Hey LL, in firefox try hitting f12 and see if it opens your firebug, yeah had the same issue with it not working then found a tab in the tools menu now instead of the old box in my tool bar, f12 works for mine. The link given above by sglee2120 has some good info about resizing contact form7.
    Basically your going to have something like;'.wpcf7-form input, .wpcf7-form textarea {width: 350px; height: 100px;}' thats only for the text input area but it should be easy to modify for the other boxes.
    Let us know how you make out.
    God Bless
    Jon

  18. lindaloustarr
    Member
    Posted 2 years ago #

    Tried f12 doesn't render . . . when I look at inspect element in chrome it shows input:valid, textarea:valid when I look in my style sheet for that it shows

    select, input, textarea, button { font:99% sans-serif; }

    textarea { overflow: auto; }

    button, input, select, textarea { margin: 0; }
    input:valid, textarea:valid { }
    input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
    .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

    body, select, input, textarea { color: #191a17; font-size:12px; font-family: "Verdana", Lucida Sans Unicode, Lucida Grande, sans-serif;}

    then it goes to my footer quick contact widget

    footer .quick_contact .form textarea{

    & then to

    #respond textarea{
    height:180px; blah blah blah

    nothing to indicate the contact 7 form . . .

  19. lindaloustarr
    Member
    Posted 2 years ago #

    Went to the link you suggested & I guess I have to add some code to it, thats all good I can do that if I read that page correctly?

    http://www.wpsnippet.com/tag/style-contact-form-7/ that you have to add, is that correct?

    Thank you so much for your communication, I am grateful :)
    Linda Lou

  20. mobiJon
    Member
    Posted 2 years ago #

    Hi LL, I just opened up your site give me a few and let me see what I can find, btw your site loaded very very slowly, not sure if its cause you are editing it or what.
    Jon

  21. lindaloustarr
    Member
    Posted 2 years ago #

    I go through cloudflare but did have it on developer mode :)
    Thank You :)

  22. mobiJon
    Member
    Posted 2 years ago #

    Hi Lindalou; on your style.css ver1 line 1 I find
    'body, select, input, textarea {
    color: #191A17;
    font-family: "Verdana",Lucida Sans Unicode,Lucida Grande,sans-serif;
    font-size: 12px;
    }'
    I added height: 25px; into that line of css and it increased the size of the boxes. unfortunatly it also decreased the size of the message box. I am trying to figure out the code to then overwrite for the message box, it will probably be similar to what I posted above. running firebug on your site keeps crashing my firefox so it is a slow process.

  23. mobiJon
    Member
    Posted 2 years ago #

    LL
    firebug wont let me add a new line of code so try adding after the above line, a line with 'body, select, input, textarea, wpcf7-form textarea {width: 350px; height: 100px;}' and adjust the sizes to what you need, not sure if this is going to affect all the boxes or just the message box. Let me know how you fare. I have a meeting in the AM and should have been to bed a while ago, so good night and God Bless!!
    Jon

  24. lindaloustarr
    Member
    Posted 2 years ago #

    Thanks for all your help mobijon but changes those values changed my mail chimp signup form on the side bar as well - I also tried the instructions at http://www.wpsnippet.com/styling-contact-form-7/ & everything seemed to working ok with the css & changing those values but I couldn't figure out where to put this - the obvious was on the contact page right? but when I did it didn't put any verbiage at the form as it states below here's a sample page I made you'll see:

    http://lindaloustarr.com/sample-contact

    <h2>Here are some text to go with the form</h2>
    <p>Your Name (required)[text* your-name] </p>
    <p>Your Email (required)[email* your-email] </p>
    <p>Subject [text your-subject] </p>
    <p>Your Message[textarea your-message]</p>
    <p>[submit class:buttons_form "Send"]</p>
  25. mobiJon
    Member
    Posted 2 years ago #

    Hi LL;
    hmm so it does, so that is controlling every text input box on your site. Looks like you will need to identify each of the input areas of contact form 7 and specify css height and width (or whatever you need to change) for each one. If you like contact me at Jon@HisCrossMatters.com and I can help you sort that out as I get time. As I mentioned firebug running on your site crashes my firefox so I will see if I can sort it out on one of my sites and see if it will transfer.
    God Bless
    Jon

  26. abbyj
    Member
    Posted 2 years ago #

    Hi LL, did you get this sorted out? If not, I can help.

  27. esmi
    Forum Moderator
    Posted 2 years ago #

    @abbyj: If you have a solution to offer, please post it here.

  28. lindaloustarr
    Member
    Posted 2 years ago #

    No I did not get it sorted out - threw my hands up & moved onto other things LOL - all I want to do is change the size of the input areas & contact 7 throws those codes around every where from what I gather :)
    LL

  29. abbyj
    Member
    Posted 2 years ago #

    linda's contact form looks fine so I think she figured it out. In any case . . .
    css to style:
    input blocks and the text entered in them: .wpcf7-form input { }
    titles of input blocks: .wpcf7-form {}
    size, background etc of "your message" area: .wpcf7-textarea {}
    spacing around blocks: .wpcf7 p {}

    Let me know if you need anything else.

  30. lindaloustarr
    Member
    Posted 2 years ago #

    abbyj - no, contact form is not how I want it - I want to be able to know where to make the input areas larger?
    Thank you - peace & blessings

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic