This is a tricky one and should be a lot easier than it seems to be.
First you need to add a snippet of code to your functions.php file in your active theme. To disable the contact form 7 style and stop it being appended to your page and overriding your style.
|
1 2 3 4 5 |
function sk23_remove_contactForm7_css() { $handle = 'contact-form-7'; wp_deregister_style( $handle ); } add_action( 'wp_print_styles', 'sk23_remove_contactForm7_css', 100 ); |
A basic sample CSS to use in your style.css file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
div.wpcf7 { margin: 0; padding: 0; } div.wpcf7-response-output { padding: 0.2em 1em; } div.wpcf7-mail-sent-ok { border: 2px solid #398f14; } div.wpcf7-mail-sent-ng { border: 2px solid #ff0000; } div.wpcf7-spam-blocked { border: 2px solid #ffa500; } div.wpcf7-validation-errors { background: #b6ff99; float: left; color: #30801c; border-radius: 5px; padding: 15px; } span.wpcf7-form-control-wrap { position: relative; } span.wpcf7-not-valid-tip { float:left; top: 20%; left: 20%; z-index: 100; background: #fff; color:#ff0000; font-size: 10pt; width: 280px; padding: 2px; } span.wpcf7-not-valid-tip-no-ajax { color: #f00; font-size: 10pt; display: block; } span.wpcf7-list-item { margin-left: 0.5em; } .wpcf7-display-none { display: none; } div.wpcf7 img.ajax-loader { border: none; vertical-align: middle; margin-left: 4px; } div.wpcf7 .watermark { color: #888; } div.wpcf7 input { padding:5px ;border:1px solid #ccc; border-radius: 5px; } div.wpcf7 input[type=submit] { padding:10px 18px ;border:1px solid #ccc; border-radius: 5px; } .wpcf7-submit { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .wpcf7-submit:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .wpcf7-submit:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); } |