WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Color Change (5 posts)

  1. VentoPhoto
    Member
    Posted 10 months ago #

    Is it possible to change the background color of the text boxes. The white is just so stark for the color scheme I am using.

    I have no experience with coding, so if this is the case, hope you can point me in the right direction.

    Thanks so much

    Gary

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

  2. buzztone
    Member
    Posted 10 months ago #

    Is it possible to change the background color of the text boxes

    Yes but you need to understand HTML & CSS.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    If you supply a link to your CF7 form, others here may be willing to help.

  3. VentoPhoto
    Member
    Posted 10 months ago #

    Buzztone, I apologize for not placing the link. This is all so new to me, only my second week of venturing into the world of websites.

    Know nothing about HTML other than how to spell it. CSS I am learning a bit more...but still along ways from knowing alot.

    http://www.ventophotography.com/contact

    Thank you,
    Gary

  4. buzztone
    Member
    Posted 10 months ago #

    Great opportunity for you to learn some HTML & CSS.

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don't loose your changes when you update the theme.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don't inadvertantly effect other elements on your website.

    In this case you could start by targeting the following CSS code in http://www.ventophotography.com/wp-content/themes/photocrati-theme-v4.5.1/styles/resets/rebuild.css

    body, input, textarea {
        color: #111111;
        font: 12px/1.5 Arial,sans-serif;
    }

    Add something like the following in your child theme:

    .wpcf7-form input, .wpcf7-form textarea {
        background:  #c4c4c4;
        border-color: #FF0000;
    }
  5. VentoPhoto
    Member
    Posted 10 months ago #

    Thank you for the info. I will continue to plug away and see if I can make any sense of this. For some reason coding just scares the pants right off of me.

    I know part of it right now is my head is so full of photography learning that I am trying to fins some space to understand this web design thing. I should have known up front, when they say its easy, they were lying to me....LOL

    Gary

Reply

You must log in to post.

About this Plugin

About this Topic