Annonce

Faites la différence entre le service WordPress.com et l'application libre WordPress.

Mettez-vous à jour ! WordPress 3.3.2 est disponible en français.

Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.
Annonce 4 : Rejoignez-nous sur Facebook, Google + et sur Twitter

Pages: 1

 

#1 03-02-2012 23:26:56

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Retoucher au design du formulaire Contact Form 7 ?

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 3.3
- Version de PHP/MySQL :
- Thème utilisé : Sight
- Extensions en place :
- Nom de l'hebergeur :
- Adresse du site : http://www.laruenhik.com/sene/

Problème(s) rencontré(s) :

Je souhaite retoucher au design du formulaire Contact Form 7.
J'ai chercher un peu partout mais je ne trouve pas de soluce :s

Hors ligne

 

#2 05-02-2012 19:17:19

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

Personne n'a d'idée ?
help sad

Hors ligne

 

#3 05-02-2012 21:16:25

Lumière de Lune
Admin nomade
Lieu: Maroc / France
Date d'inscription: 15-08-2007
Messages: 11993
Site web

Re: Retoucher au design du formulaire Contact Form 7 ?

Et tu veux faire quoi exaxctement ? Le mettre en vert avec des étoiles roses ? changer les polices de caractères ? Si tu as des questions précises, ça aide à avoir des idées

WordPress pour les nuls, Article, page, catégorie, Un site en plusieurs langues et Débuguer son blog. Après on peut partir au Maroc

Hors ligne

 

#4 05-02-2012 21:28:27

vincsb
Bavard WP
Date d'inscription: 11-03-2011
Messages: 130

Re: Retoucher au design du formulaire Contact Form 7 ?

Hello, de souvenir Contact Form 7 a son propre css.

Tu peux également associer tes propres classes en les ajoutant dans le formulaire html (quand tu l'édite, la zone à gauche). Sinon la doc est ultra complète : http://contactform7.com/docs/

Hors ligne

 

#5 05-02-2012 22:22:19

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

Merci, la doc m'a aidé à mettre les choix à cocher les uns au dessus des autres. C'est déjà ça smile

Je souhaiterai que les éléments de mon formulaire soient sur 2 colonnes et le tout dans un tableau avec couleur de fond.

Puis je souhaiterai pourvoir personnaliser mon formulaire dans ces genres là :
http://www.jimmyfairly.com/fr/contacts
http://akibag.com/contact/

Et éventuellement mettre une couleur de fond au survole et à la sélection sur les champs à remplir.

Dois je retoucher à tout ça via mon fichier style.css ?

J'ai bien essayer de mettre la formule d’intégration du formulaire dans un tableau pour déjà avoir mon fond de couleur mais cela ne fonctionne pas et je ne pense pas que ça soit la solution.

Hors ligne

 

#6 06-02-2012 12:24:19

vincsb
Bavard WP
Date d'inscription: 11-03-2011
Messages: 130

Re: Retoucher au design du formulaire Contact Form 7 ?

Yes, il faut retoucher via ton style.css lié à ton thème, si tu modifie directement le css de Contact Form, tu risque de tout perdre à la prochaine mise à jour.

Pour ta couleur de fond, regarde via Firebug, Contact Form doit créer une div par formulaire, dont tu pourra changer le background-color comme tu le souhaite, toujours via ton style.css.

Dernière modification par vincsb (06-02-2012 12:25:53)

Hors ligne

 

#7 06-02-2012 16:54:27

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

Merci de ta réponse.

Via firebug je ne trouve pas de données spécifiques à la mise en forme du formulaire...

Je n'ai aucunes lignes #contact-form {...} dans mon fichier style css donc je pense que les propriétés de mise en forme du formulaire ne sont pas encore établies.

J'ai bien tenté d'ajouter les lignes de code ci dessous pour voir si la mise en forme changeai mais rien ne bouge sad

Code: html

#contact-form { width:450px; }

#contact-form input, #contact-form textarea {
    padding: 0 0 0 12px;
    width: 300px;
    height: 32px;
    font-family: Helvetica, sans-serif;
    margin: 0px 0px 10px 0px;
    border: 1px solid #d9d9d9;
    background: #f7f7f7;
    float:left;
    clear:both;
}

#contact-form textarea{
	padding-top:8px;
}

#contact-form textarea:focus, #contact-form input:focus, #contact-form #submit-button:hover, #contact-form #submit:hover {
    border-color:#59aee4;
    background:#fff;
    -moz-box-shadow:0 0 3px #59aee4;
    -webkit-box-shadow:0 0 3px #59aee4;
    box-shadow:0 0 3px #59aee4;
}


#contact-form textarea { height: 190px; }

#contact-form label {
    float:left;
    padding: 8px 0 0 15px;
    width: 140px;
}

#contact-form label.error {
	clear:both;
	color:#a00;
	margin-top:-8px;
	padding:0;
	display:none;
}

#contact-form #submit-button {
    width:120px;
    margin-left:180px;
    font-size:14px;
    color:#676767;
	cursor:pointer;
}

#contact-form #submit{
	cursor:pointer;
}

#contact-form label{width:70px;}
#contact-form label.error{width:440px;}
#contact-form #submit-button { margin-left:242px; width:120px; }

#contact-form textarea { padding:10px; width:340px; }

#contact-form input { padding:0px 10px; width:340px; }
/* end-contact */

Dernière modification par aurelie.se (06-02-2012 16:54:41)

Hors ligne

 

#8 07-02-2012 20:35:51

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

Finalement je souhaiterai pouvoir personnaliser mon formulaire comme celui là :
http://www.clydequaywharf.co.nz/register-your-interest/

Je pense réussir à mettre les bonnes caractéristiques toute seule mais je ne comprend pas quelles lignes je dois ajouter ou corriger ?

Voici mon fichier style.css

Code: html

/*
Theme Name: Sight
Author URI: http://www.wpshower.com
Description: Sight is a powerful Wordpress theme, best suited for Magazines and Blogs. The theme was designed in modern minimalistic style with Golden Grid usage.
Author: WPSHOWER
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2010 WPSHOWER
*/

/*** Reset ***/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;text-align:left;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

/*** Main ***/

body {font: 62.5% 'Quattrocento Sans', Verdana, Arial; background: transparent url("http://www.laruenhik.com/sene/wp-content/uploads/2012/01/bg2.jpg") 50% 0 no-repeat; padding: 0;}
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; padding: 0; margin: 25px 0 0 0}
.left {float: left;}
.right {float: right;}

.wrapper {width: 980px; background:transparent; margin: 0 auto;}
#container {padding: 0;}

/*** Header ***/

.header {height: 130px; overflow: hidden; padding-right: 0;}

.logo {width: 327px; height: 130px; padding: 0; overflow: hidden; float: left;}
.logo img {max-height: 130px; max-width: 327px;}

.site-description {width: 297px; padding: 15px 15px 0; float: left; overflow: hidden;}
.site-description .textwidget {font-size: 11.8px; color: #000000; line-height: 1.5; text-align:center}


.menu {/*width: 326px;*/ padding-right: 0px; float: left;}
.menu ul {margin-top: 0px;}
.menu li {font-size: 14px; margin: 0px 0; text-align: center; padding: 6px;}
.menu a {color: #FFF; text-decoration: none; padding: 7px;}
.menu a:hover {color: #8A5084; text-decoration: none; background:#FFF}

#menu-top-menu{width:210px;}
#menu-top-menu-2{width:116px;}

#menu-top-menu li, #menu-top-menu-2 li {background: #8A5084; margin: 0 1px 1px 0;}

#menu-top-menu li:hover > a, #menu-top-menu li:hover, #menu-top-menu .current-menu-item a,
#menu-top-menu-2 li:hover > a, #menu-top-menu-2 li:hover, #menu-top-menu-2 .current-menu-item a {color: #8A5084 !important;}
#menu-navigation li:hover > a, #menu-navigation li:hover, #menu-navigation .current-menu-item a {color: #2A8094 !important;}

.menu li:hover > a, .menu li:hover, .current-menu-item {background: none repeat scroll 0 0 #FFFFFF !important;}

#menu-navigation a {padding-right: 20px;}


/*** Navigation ***/



/*** Contact ***/

span.wpcf7-list-item { display: block; } 








/*** Slideshow ***/


/*** Content ***/

#content {width: 653px; float: right; padding: 0; margin: 25px 0 0 0 }

#container {padding: 0; background: transparent url("http://www.laruenhik.com/sene/wp-content/uploads/2012/02/bg3.jpg") repeat-y;}

.content-title {color: #999; font-size: 18.5px; position: relative; margin: 0px 30px 0px 30px; text-transform:uppercase }
.content-title a {color: #999; text-decoration: none; text-transform:uppercase}
.content-title a:hover {text-decoration:underline;}
.content-title span {color: #d9d9d9;}
.content-title span a {color: #d9d9d9; text-decoration: none;}
.content-title span a:hover {color: #000; text-decoration: none;}

.flip {background-position: 0 100% !important;}

.list .post {padding: 0px; color: #999; margin: 0px 30px 40px 30px}
.list .post a {color: #999;}
.list .post .post-category {font-size: 11px; color: #d9d9d9; margin-bottom: 0px; text-transform:uppercase}
.list .post .post-category a {text-decoration: none;}
.list .post .post-category a:hover {text-decoration:underline}
.list .post h2 {margin-bottom: 0px;}
.list .post h2, .list .post h2 a {color: #8a5084; font-size: 24px; font-weight: normal; text-decoration: none; }
.list .post h2 a:hover {text-decoration:underline}
.list .post .post-meta {font-size: 11px; font-style: italic; color: #999; margin-bottom: 10px;}
.list .post .post-meta span, .list .post .post-meta a {color: #999; font-family: 'Quattrocento Sans', Verdana, Arial; text-decoration: none;}
.list .post .post-meta a:hover {text-decoration:underline}
.post-author {}

.grid {padding: 12px 0 0 12px;}
.grid .post {width: 154px; height: 154px; background-color: #f5f5f5; padding: 18px; float: left; margin: 19px 0 0 19px; position: relative; overflow: hidden; cursor: pointer;}
.grid .post .post-category, .grid .post .post-content, .grid .post .post-meta em {display: none;}
.grid .post h2, .grid .post .post-meta {display: block;}
.grid .post .thumb {width: 190px; height: 190px; position: absolute; top: 0; left: 0; z-index: 1;}
.grid .post .thumb img {width: 190px; height: 190px;}
.grid .post h2, .grid .post h2 a {color: #000; font-size: 16px; font-weight: normal; text-decoration: none;}
.grid .post h2 {margin-bottom: 5px;}
.grid .post a {text-decoration: none;}
.grid .post a:hover {text-decoration: none;}
.grid .post .post-meta {font-size: 10px; font-style: italic; color: #999;}
.grid .post .post-meta span, .grid .post .post-meta a {color: #000; font-family: 'Quattrocento Sans', Verdana, Arial; font-style: normal;}
.grid .post .post-meta .post-author {}
.grid .post .comments_popup_link {position: absolute; bottom: 18px; right: 18px;}
.grid .post .post-edit-link {position: absolute; bottom: 18px; left: 18px;}

.rollover {opacity: 0; background: #999; width: 154px; height: 154px; padding: 18px; margin: 0; position: absolute; top: 0; left: 0; cursor: pointer;}
.rollover-title {margin-bottom: 5px;}
.rollover-title, .rollover-title a {color: #000; font-size: 16px; font-weight: normal; text-decoration: none;}
.rollover-title a:hover {text-decoration: none;}
.rollover-content {color: #999; font: 12px/1.5 Verdana, Arial;}
.rollover-meta {font-size: 10px; font-style: italic; color: #999;}
.rollover-meta span, .rollover-meta a {color: #999; text-decoration: none; font-family: 'Quattrocento Sans', Verdana, Arial; font-style: normal;}
.rollover-author {text-transform: uppercase;}
.rollover-meta a:hover {text-decoration: none;}

.pagination {padding: 65px 0 0 30px;; color: #999; font-size: 12px; clear: both; position: relative;}
.pagination a {color: #000; text-decoration: none;}
.pagination a:hover {text-decoration: none;}
.pagination .nextpostslink {position: absolute; right: 0; top: 17px; line-height: 21px; text-transform: uppercase; background: url("images/nextpostslink.png") 100% 0 no-repeat; padding-right: 36px;}
.pagination .previouspostslink {position: absolute; left: 30px; top: 17px; line-height: 21px; text-transform: uppercase; background: url("images/previouspostslink.png") 100% 0 no-repeat; padding-left: 36px;}
#pagination {padding: 20px 0 0 30px;}
#pagination .nextpostslink {color: #000; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px;}
#pagination .nextpostslink:hover {background-color: #999; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555;}
#pagination .loading:hover {background-color: transparent !important; cursor: default;}

.entry {margin-bottom: 50px;}
.entry .post {border-bottom: 1px solid #d9d9d9; padding-bottom: 15px;}
.entry .post-meta {padding: 0; border-bottom: 0px solid #d9d9d9; font-size: 11px; font-style: italic; color: #aaa9a9; position: relative; margin-left: 30px;}
.entry .post-meta h1 {color: #8a5084; font-size: 24px; font-weight: normal; font-style: normal;}
.entry .post-meta span, .entry .post-meta a {color: #999999; text-decoration: none; font-family: 'Quattrocento Sans', Verdana, Arial, ; font-style: italic;}
.entry .post-meta a:hover {text-decoration: none;}
.entry .post-comms {position: absolute; right: 0;}
.entry .post-content {padding: 0 30px}
.entry .post-content a {color: #000;}
.entry .post-content a:hover {text-decoration: none;}
.entry .post-footer {padding-left: 30px; font-size: 12px; margin-bottom: 15px;}
.entry .post-footer a {color: #000; text-decoration: none;}
.entry .post-footer a:hover {text-decoration: none;}
.page .post-category {display: none;}

.post-content {}
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5 {color: #000; font-weight: normal; font-family:  'Quattrocento Sans', Verdana, Arial; margin: 15px 0;}
.post-content h1 {font-size: 24px; color: #8A5084;}
.post-content h2 {font-size: 20px; color: #2A8094; line-height: 1.2em}
.post-content h3 {font-size: 16px; color: #808080; line-height: 1.2em}
.post-content h4 {font-size: 12px;}
.post-content h5 {font-size: 12px;}
.post-content {color: #262626; font: 12px/1.5 Verdana, Arial;}
.post-content p {margin: 10px 0;}
.post-content ol {list-style: decimal; padding-left: 35px; margin: 15px 0;}
.post-content ul {list-style: disc; padding-left: 35px; margin: 15px 0;}
.post-content li {color: #262626; font: 12px/1.5 Verdana, Arial; margin: 3px 0;}
.post-content blockquote {padding: 15px 0 10px 65px; background: url("images/bq.png") 20px 0 no-repeat;}
.post-content blockquote p {color: #8c8888; font: italic 16px Verdana, Arial;}

.post-content .search fieldset {width: 327px; height: 35px;}
.post-content .search input {width: 327px; font-size: 16px;}

.post-navigation {width: 610px; padding: 15px 0 0 30px; position: relative;}
.post-navigation a {display: block; color: #000; font: 11px Helvetica, Arial, sans-serif; text-decoration: none; line-height: 1.5;}
.post-navigation a:hover {text-decoration: none;}
.post-navigation a em {display: block; color: #000; font: italic 12px Verdana, Arial; text-transform:uppercase;}
.post-navigation a:hover span {text-decoration: none;}
.post-prev {width: 250px; min-height: 40px; padding-left: 30px; float: left; text-align: left; background: url("images/post_prev.png") 0 50% no-repeat;}
.post-next {width: 250px; min-height: 40px; padding-right: 30px; float: right; text-align: right; background: url("images/post_next.png") 100% 50% no-repeat;}
.line {width: 1px; height: 100%; background: #d9d9d9; position: absolute; top: 0; right: 305px;}




/*** Images ***/

.post-content img {margin: 0 0 15px; height: auto; max-width: 610px;}
.post-content h6 {position: relative;}
.post-content .attachment img {max-width: 610px;}
.post-content .alignnone, .post-content img.alignnone {clear: both; display: block; margin-bottom: 15px;}
.post-content .alignleft, .post-content img.alignleft {display: inline; float: left; margin-right: 15px; margin-top: 4px;}
.post-content .alignright, .post-content img.alignright {display: inline; float: right; margin-left: 15px; margin-top: 4px;}
.post-content .aligncenter, .post-content img.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}
.post-content img.alignleft, .post-content img.alignright, .post-content img.aligncenter {margin-bottom: 15px;}
.post-content .wp-caption {background: #f1f1f1; line-height: 18px; margin-bottom: 20px; padding: 4px; text-align: center;}
.post-content .wp-caption img {margin: 5px 5px 0;}
.post-content .wp-caption p.wp-caption-text {color: #888; font-size: 12px; margin: 5px;}
.post-content .wp-smiley {margin: 0;}
.post-content .gallery {margin: 0 auto 18px;}
.post-content .gallery .gallery-item {float: left; margin-top: 0; text-align: center; width: 190px;}
.post-content .gallery .gallery-item img {max-width: 190px; border: none !important; margin-bottom: 0;}
.post-content .gallery .gallery-caption {color: #888; font-size: 12px; margin: 0 0 12px;}
.post-content .gallery dl {margin: 0;}
.post-content .gallery br+br {display: none;}
.post-content .attachment img {display: block; margin: 0 auto;}

/*** Comments ***/

.comments h3 {font-size: 18px; font-weight: normal; color: #000; padding: 15px 0 10px 30px; border-bottom: 1px solid #d9d9d9;}
.comments a {color: #000;}
#comments {margin-bottom: 30px;}
.comment {padding: 15px 0 15px 30px; border-bottom: 1px dotted #d9d9d9;}
.comment td {vertical-align: top;}
.comment-meta {position: relative; min-height: 70px; font-size: 11px; margin-right: 30px;}
.avatar {display: block; margin-right: 10px;}
.comment-author {color: #aaa9a9;}
.comment-author span {color: #000;}
.comment-author a, .comment-author span {text-decoration: none; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
.comment-author a:hover {text-decoration: none;}
.comment-author, .comment-date {white-space: nowrap;}
.comment-reply-link {position: absolute; bottom: 1px; text-decoration: none;}
.comment-reply-link:hover {text-decoration: none;}
.comment-text p {color: #4b4b4b; font: 12px Helvetica, Arial, sans-serif; margin-bottom: 15px;}
.children {margin-left: 80px;}
.children .children {margin-left: 50px;}
.children .comment {padding-left: 0;}

#respond p, .nopassword {margin: 10px 0; font: 11px Helvetica, Arial, sans-serif;}
.nopassword {padding-left: 30px;}
#respond p a {text-decoration: none;}
#respond p a:hover {text-decoration: none;}
#commentform {padding: 30px 0 0 30px;}
#commentform table {width: 100%; margin-bottom: 15px;}
#commentform td {vertical-align: top; width: 33.33%;}
#commentform td p {font: bold 11px Verdana, Arial,; color: #333; margin-bottom: 5px;}
#commentform td p span {color: #000; font: italic 11px Verdana, Arial;}
.commform-textarea {border: 1px solid #d9d9d9; padding: 10px; margin-bottom: 10px;}
#comment {width: 100%; height: 120px; padding: 0; margin: 0; border: none; border-color: #fff; overflow: auto;}
.commform-author div {margin-right: 15px; border: 1px solid #d9d9d9; padding: 5px;}
.commform-email div {border: 1px solid #d9d9d9; padding: 5px;}
.commform-url p {margin-left: 15px !important;}
.commform-url div {margin-left: 15px; border: 1px solid #d9d9d9; padding: 5px;}
#author, #email, #url {width: 100%; margin: 0; padding: 0; border: none; font: 12px Helvetica, Arial, sans-serif; color: #333;}
#submit {float: right; border: none; background: #ccc; color: #fff; font: bold 12px Helvetica, Arial, sans-serif; cursor: pointer; padding: 5px 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-bottom: 20px}
#submit:hover {background: #2A8094;}
p#cancel-comment-reply {float: right; line-height: 28px; margin: 0;}

/*** Sidebar ***/

.sidebar {width: 327px; float: left; background: #2A8094; display:block;}

.widget {margin-bottom: 0px; margin-left: 0px;}
.widget-small {width: 327px;}
.widget h3, .widget-small h3 {color: #1f2122; font-size: 14px; font-weight: normal; text-transform: none; padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0px solid #999999;}
.widget a, .widget-small a {color: #FFF; text-decoration: none;}
.widget a:hover, .widget-small a:hover {color: #2A8094; text-decoration: none; background: #FFFFFF; padding: 9px;}
.widget p, .textwidget {color: #262626; font: 12px/1.3 Verdana, Arial;}
.widget p a, .textwidget a {text-decoration: none;}
.widget p a:hover, .textwidget a:hover {text-decoration: none;}
.widget li, .widget-small li {width: 327px; text-align: right; border-bottom: 1px solid #7FB3BF; padding: 9px 0px 9px 0px;}

.widget_getconnected {margin-bottom: 20px;}
.widget_getconnected .widget-body div {width: 50%; float: left; min-height: 40px; padding-bottom: 16px;}
.widget_getconnected .widget-body div a {display: block; color: #24211f; font-size: 16px; padding-left: 25px;}
.widget_getconnected .widget-body div span {color: #838383; font: 11px Helvetica, Arial, sans-serif; padding-left: 25px;}
.getconnected_rss a {background: url("images/getconnected_rss.png") 0 2px no-repeat;}
.getconnected_twitter a {background: url("images/getconnected_twitter.png") 0 2px no-repeat;}
.getconnected_fb a {background: url("images/getconnected_fb.png") 0 2px no-repeat;}
.getconnected_flickr a {background: url("images/getconnected_flickr.png") 0 2px no-repeat;}
.getconnected_behance a {background: url("images/getconnected_behance.png") 0 2px no-repeat;}
.getconnected_delicious a {background: url("images/getconnected_delicious.png") 0 2px no-repeat;}
.getconnected_stumbleupon a {background: url("images/getconnected_stumbleupon.png") 0 2px no-repeat;}
.getconnected_tumblr a {background: url("images/getconnected_tumblr.png") 0 2px no-repeat;}
.getconnected_vimeo a {background: url("images/getconnected_vimeo.png") 0 2px no-repeat;}
.getconnected_youtube a {background: url("images/getconnected_youtube.png") 0 2px no-repeat;}

.rpthumb {display: block; padding-bottom: 15px; margin-top: 15px; border-bottom: 1px dotted #d9d9d9;background: #999}
.rpthumb img {width: 50px; width: 50px; margin-right: 15px; float: left;}
.rpthumb-title {display: block; font: 12px 'Quattrocento Sans', Verdana, Arial; margin-bottom: 6px;}
.rpthumb-date {display: block; font-size: 11px; color: #aaa9a9;}
.rpthumb:hover {text-decoration: none !important;}
.rpthumb:hover .rpthumb-title {text-decoration: none;}

.widget_tag_cloud a {margin: 0 2px;}
.widget_calendar table {width: 100%;}
.widget_calendar caption {font-size: 13px; padding-bottom: 10px; text-align: left;}
.widget_calendar th, .widget_calendar td {padding: 5px 0; font-size: 13px;}
.widget_calendar tbody a {text-decoration: none;}
.widget_calendar tbody a:hover {text-decoration: none}

.widget_search #searchform {margin: 20px; float:right;}

.sponsors .widget-body {text-align: center;}
.sponsors .widget-body img {margin-bottom: 20px;}

/*** Footer ***/

.footer {height: 20px; border-top: 1px solid #d9d9d9; padding: 5px 30px 0; font-family: Verdana, Arial;}
.footer p {font-size: 10px; color: #737373;}
.footer a {color: #000; text-decoration: none;}
.footer a:hover {text-decoration: none;}
p.copyright {float: right; color: #999; text-align: right; margin: 0 30px 0 0; font-family: Verdana, Arial;}
p.copyright span {color: #999;}

Hors ligne

 

#9 13-02-2012 00:14:45

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

Personne ne peux me répondre ?
Dois je ajouter ce code "!Important" pour que ça soit pris en compte ?
Help hmm

Hors ligne

 

#10 13-02-2012 05:27:12

Lumière de Lune
Admin nomade
Lieu: Maroc / France
Date d'inscription: 15-08-2007
Messages: 11993
Site web

Re: Retoucher au design du formulaire Contact Form 7 ?

Tu dois regarder dans ton header (dans le code source) dans quel ordre les feuilles de style sont chargées. Tu as celle du thème, celle des plugins...  C'est la dernière qui doit être modifiée. Il vaut mieux éviter de mettre !important

WordPress pour les nuls, Article, page, catégorie, Un site en plusieurs langues et Débuguer son blog. Après on peut partir au Maroc

Hors ligne

 

#11 13-02-2012 19:14:48

vincsb
Bavard WP
Date d'inscription: 11-03-2011
Messages: 130

Re: Retoucher au design du formulaire Contact Form 7 ?

Hello, je vois que tu es toujours dans le code.
Pour modifier ton formulaire, utilise firebug pour repérer les class css appliquées aux éléments de ton formulaire.
Par exemple pour la zone du prénom, il y a : class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required"

Tu peux donc créer dans ton style.css une class "wpcf7-text" pour, par exemple, mettre en form tes champs input.

Normalement, tu ne devrai pas avoir de soucis/conflit, j'ai fait un test rapide et ca fonctionne.

Hors ligne

 

#12 14-02-2012 08:35:54

aurelie.se
Bavard WP
Date d'inscription: 31-12-2011
Messages: 127

Re: Retoucher au design du formulaire Contact Form 7 ?

En effet ça fonctionne MERCI smile
Bon il me reste plus qu'à affiner ça mais le sujet est résolu !

Hors ligne

 

 

Pages: 1

Pied de page des forums

Propulsé par PunBB 1.2.23
© Copyright 2005-2006 WordPress France

[ Generated in 0.042 seconds, 19 queries executed ]