WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] [closed] CSS Problem (6 posts)

  1. breeze76
    Member
    Posted 11 months ago #

    Here is my CSS style coding below:

    /*---- CONTACT FORM 7 CSS BEGIN ----*/
    .wpcf7 {
    	margin-bottom: 0px;
    }
    
    .wpcf7 p {
    /*	margin-bottom: 10px;*/
    }
    
    .wpcf7 span.wpcf7-list-item {
    	margin-left: 0;
    	margin-right: 5px;
    }
    
    .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 textarea {
    	width: 100%;
    }
    
    .wpcf7 input[type="submit"] {
        background: none repeat scroll 0 0 #111111;
        border: 0 none;
        border-radius: 5px 5px 5px 5px;
        color: #D4D4D4;
        cursor: pointer;
        font-size: 11px;
        margin: 0 5px 0 0;
        padding: 5px 10px;
        text-align: center;
        text-transform: uppercase;
    }
    
    .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="file"], .wpcf7 input[type="email"]{
    	max-width: 200px;
    }
    
    .wpcf7 input[type="captchar"]{
    	max-width: 100px;
    }
    
    .wpcf7 input, .wpcf7 textarea, .wpcf7 file, .wpcf7 email {
    	margin-bottom: 10px;
    	border:1px solid #5b5b5b;
        height: 19px;
        padding:2px 5px;
        border-radius:5px;
        font-size:12px;
    }
    
    .wpcf7 select {
    	margin-bottom: 10px;
    	border:1px solid #5b5b5b;
        height: 24px;
        padding:2px 5px;
        border-radius:5px;
        font-size:14px;
    }
    /*---- CONTACT FORM 7 CSS END ----*/

    I am trying to style the captcha box and the file attachment box as well.. The captcha is is being styled like all the other fields, I am trying to make it smaller. The file attachment field is not being styled at all.

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 11 months ago #

    CAPTCHA input field has wpcf7-captchar class so you can use

    .wpcf7 input.wpcf7-captchar {
    	width: 100px;
    }

    File uploading field is input[type=file].

  3. breeze76
    Member
    Posted 11 months ago #

    Already got the CAPTCHA field:

    .wpcf7 input[type="captchar"]{
    	max-width: 100px;
    }

    It is the file one that is not working, here is my code for it:

    .wpcf7 input[type="file"]{
    	background: #ffffff;
    	margin-bottom: 10px;
    	border:1px solid #5b5b5b;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	-khtml-border-radius: 5px;
        padding:2px 5px;
        /*border-radius:5px;*/
        font-size:12px;
    	width: 200px;
    }

    Any help would be greatly appreciated..

  4. breeze76
    Member
    Posted 11 months ago #

    Got it all working now.. thanks..

  5. jetfire
    Member
    Posted 11 months ago #

    Where can I locate this css to edit contact 7? Is this the css of contact or css of the theme?

  6. You may get better results posting your own topic instead especially as this one is marked resolved.

    http://wordpress.org/support/plugin/contact-form-7#postform

    Generally speaking CSS can be applied via your theme's (child theme is better) style.css file or using a custom CSS plugin.

    Edit: And stop replying to multiple resolved themes like that, you already got the answer.

    http://wordpress.org/support/topic/text-alongside-contact-form?replies=8#post-4223084

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.