Discussion :

[sofiane06]

Bonjour à tous,

Je rencontre un problème suite à la mise en place d'un formulaire de contact sous un wordpress :

le problème ne concerne pas la structure du plug-in utilisée mais le css :

mon plug-in pour mon formulaire est contact form 7, et pour l'instant je travail en local.

j'ai donc une page de contact (une page de demande de devis) et lorsque l'on appuie sur le bouton envoyer sans remplir les champs obligatoires, un rectangle rouge apparait à leur niveau, Mais ils sont décalés vers la droite et le bas voici une image pour illustrer mon explication :



pour faire mes modifications en css, j'utilise firebug, l'addons de firefox, et j'arrive à modifier le problème facilement, voici une autre image, on peut voir que j'ai décalé le rectangle rouge vers la gauche :




donc avec mon editeur, j'ouvre ma feuille style.css, j'ajoute ça pour tester :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
span.wpcf7-not-valid-tip { left: 0px;
}

ça ne marche pas, j'essaie comme ça :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.wpcf7-not-valid-tip { left: 0px;
}

ça ne marche toujours pas, même avec l'id d'un champs spécifique :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
span.wpcf7-form-control-wrap your-email { left: 0px;
}

ou

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.wpcf7-form-control-wrap your-email { left: 0px;
}

J'aurais besoin d'un éclaircissement sur ce problème, car je ne voit pas du tout pourquoi ça ne me garde pas les modifications que l'on peut voir sous firebug

Merci d'avance
Sofiane

[sofiane06]

Je viens juste de me souvenir que le contact form 7 fait appel à une autre feuille de style.css qui se trouve dans le répertoire spécifique au plug-in de wordpress.
je suis entrain de faire les changements directement dans cette feuille...voilà pourquoi je n'y arrivais pas...
ouf sauvé ^^

le code d'origine qui se trouve dans la feuille de style du contact form 7 :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	background: #fff;
	border: 1px solid #ff0000;
	font-size: 10pt;
	width: 280px;
	padding: 2px;
}

mon code modifié :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
span.wpcf7-not-valid-tip {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	background: #fff;
	border: 1px solid #ff0000;
	font-size: 10pt;
	width: 120px;
	padding: 2px;
}

c'est bon tout fonctionne...