PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Changing entered text colors

  1. I have posted two forms to ivyhaz.com under the menu items Application and Contact; however, in both cases, you can't see the text the visitor to the form enters. Is there a code that will allow me to change the entered text color for all forms on my site so those filling out the forms will be able to see what they are writing?

    Posted 11 years ago on Friday January 28, 2011 | Permalink
  2. Your theme stylesheet sets a white font color for all of the page elements. This includes the form inputs so you can't see the white text on the white input background.

    You just need to target the form input fields and change the color. You can add this to the end of your theme stylesheet and you should be good to go,

    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
    body .gform_wrapper .gform_body .gform_fields .gfield select,
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {color:#000}

    You can find more information on targeting form elements for CSS changes here.

    http://www.gravityhelp.com/documentation/css-targeting-samples/

    Posted 11 years ago on Friday January 28, 2011 | Permalink
  3. robjr
    Member

    I've added this to my Thesis 1.8 custom css file, but nothing changes - any thing I have to change to get it to work?

    http://robertrodriguezjr.com/contact/

    Posted 11 years ago on Wednesday March 16, 2011 | Permalink
  4. @robjr

    This works fine in my test using Firebug.

    body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
    body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
    body .gform_wrapper .gform_body .gform_fields .gfield select,
    body .gform_wrapper .gform_body .gform_fields .gfield textarea {color:#red; font-size:20px}

    screenshot: http://grab.by/9v3M

    The problem is that your stylesheet isn't being rendered by the browser completely.. it appears that a syntax error is preventing all of the rules from being applied.

    validation results: http://j.mp/g60seC

    Check out this section at the end of your custom.css

    /* Styling for Workshops Master Page Listing*/
    .galleriesThumb2 {
    	margin: 30px 50px 50px 0px;
    	.sideBySide, .sideBySide div {
    		text-align: left;
    		letter-spacing:0em;
    	}

    Notice that the ".galleriesThumb2" rule is not closed out properly before declaring the "sideBySide" rules. That's breaking everything in the CSS after that, your form rules included. Add a nice curly bracket after that rule and you should be in business.

    Posted 11 years ago on Wednesday March 16, 2011 | Permalink
  5. robjr
    Member

    thank you! That worked great. Much appreciated.

    Robert

    Posted 11 years ago on Wednesday March 16, 2011 | Permalink

This topic has been resolved and has been closed to new replies.