WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Change input text font colour (4 posts)

  1. secretfocus
    Member
    Posted 1 year ago #

    For reasons unknown (but possibly a recent update to my Sixhours theme) my Contact Form 7 font has changed from white to black and the background to the boxes has changed from black to dark grey. http://secretfocus.co.uk/contact-us/

    This makes the text from enquirers difficult for them to read when typing.

    I have looked through loads of previous posts but cannot find an answer that fits.

    All I want is high contrast text to show in the boxes preferably white text on black or dark grey.

    Does anyone have a very simple solution please?

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

  2. davejampole
    Member
    Posted 1 year ago #

    Both of the following code segments go in your theme style.css file.

    This will control the formatting of the CF7 itself. Delete or change what you want to meet your requirements.

    .(your form){
        background: #E0E0E0;
        margin: 10px auto;
        margin-left: 0;
        position: relative;
        border: 2px solid #D4F4FF;
        border-radius:10px;
    -moz-border-radius:10px;
        box-shadow: 10px 10px 5px #888888;
    }

    and this will set the color of the labels (you can change the label color to whatever you want).

    label {
    	color: #808080;
    }
  3. secretfocus
    Member
    Posted 1 year ago #

    Thanks Dave, but for me this is very complicated.

    Had a look at style.css and cannot see where to put this code at all.

    In addition, the opening line refers to (your form) what does this mean? Do I have to substitute something here? If so, what?

    What also confuses me is the references to 'labels' when all I want to do is change the font colour in the name, email, subject and message boxes so that the person writing the message can see what they have written. The titles of the boxes are OK.

  4. davejampole
    Member
    Posted 1 year ago #

    First question: The code goes IN the theme style.css. I usually add to the bottom of the stylesheet. Just so I remember at a later date what the code does, I usually add a comment such as /* added by (your name) on 13 Nov 2012 to blah, blah, blah */ and this at the end /* end of added code */. WHAT you add doesn't matter, but you must add the comment between /* and */. After you make the change to the stylesheet, click the blue 'Update file' button.

    Second question: Yes, you need to substitute something for (your form). We'll make it simple, use 'contact-us'. Then, add <div class = "contact-us"> at the top of the form code, and </div> at the very bottom. This lets you add the (possibly) unique formatting to a specific form in the case where you have more than one form. If you have 10 forms, you can uniquely identify each them and therefore format each form however you want.

    Question three: 'label' refers to the text that preceeds the input field on the form. In this example: <label>Name
    [text* contact-Name]</label>, the label is Name (what is outside the [] symbols and can be whatever you want. What is inside the [] symbols is the field name of what is entered.

    Hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic