Clean and Simple Contact Form and Input Text Color

  • Resolved allegiance

    (@allegiance)


    11 years, 5 months ago

    Hi Meg,

    I just installed Clean and Simple Contact Form 4.1.0 plugin to this page site: https://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

Viewing 3 replies - 1 through 3 (of 3 total)
  • .controls .input-xlarge {
color: #000 !important;
}

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

    There are others.

    When editing CSS, use a Child Theme
    https://codex.www.ads-software.com/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

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

    Thread Starter allegiance

    (@allegiance)

    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!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Clean and Simple Contact Form and Input Text Color’ is closed to new replies.