WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Clean and Simple Contact Form and Input Text Color (4 posts)

  1. allegiance
    Member
    Posted 10 months ago #

    Hi Meg,

    I just installed Clean and Simple Contact Form 4.1.0 plugin to this page site: http://www.fete.is/contact/ . The input fields of the form have white as text color on a white background.

    Note that the background of the page has a dark color and the default text color is white. Would you please let me know if the plugin takes the text color from the text color of the page where the form is installed?

    How can I fix this problem, please?
    thanks

  2. Pioneer Valley Web Design
    Member
    Posted 10 months ago #

    .controls .input-xlarge {
    color: #000 !important;
    }

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    http://codex.wordpress.org/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

    Learn CSS: http://www.w3schools.com/css/

  3. allegiance
    Member
    Posted 10 months ago #

    Hi Seacost,

    Thanks for the instructions, they were helpfull.
    I used Chrome Inspect Element and if I understood correctly, the input-text and input-textarea elements of the contact form are afected by two style sheets: style.css (from the WP58 template) and bootstrap.forms.min.css (from the contact form plugin).

    In fact, the page template has an div element and its style is defined in style.css as follows:

    #content,
    #content input,
    #content textarea {
    color: #f7f7f7;
    font-size: 13px;
    line-height: 17px;
    }

    I replaced it with the following lines:
    #content
    {
    color: #f7f7f7;
    font-size: 13px;
    line-height: 17px;
    }

    #content input,
    #content textarea{
    font-size: 13px;
    line-height: 17px;
    }

    and now the texts in the input fields of the form do get the colors green or red as defined by bootstrap.forms.min.css.

    Thnaks again!

  4. Pioneer Valley Web Design
    Member
    Posted 10 months ago #

    The CSS I provided was tested and was related only to that form...yours will change any input or textarea in 'content'

Reply

You must log in to post.

About this Topic