Personnaliser les formulaires ajouter un commentaire et recommander - over-blog

Il était temps que je m’y penche… !

Voici comment personnaliser les formulaires moches d’over-blog : « commentaire » et « recommander ».

Puisqu’un bon schéma vaut mieux qu’un long discours :

Voici les classes concernées :

.diablog

- concerne toute la fenêtre de commentaire et de recommandation, sauf les pieds où se trouvent les boutons « fermer », « publier ce commentaires » ou « recommander cet article »

.diablog .buttons

- concerne les pieds de la fenêtre de commentaire et de recommandation où se trouvent les boutons « fermer », « publier ce commentaires » ou « recommander cet article »

.diablog .title

- concerne la cellule supérieure des formulaires où se trouvent les titres : « ajouter un commentaire » ou « recommander cet article »

.ob_form fieldset ul li .w100prct

- concerne les champs de textes où les visiteurs indiquent leurs nom, e-mail et site dans le formulaire de commentaire

.diablog .content .ob_form fieldset ul li textarea

- concerne le champ de texte où les visiteurs vont écrire leur commentaire dans le formulaire de commentaire.

.diablog .content .ob_form

- concerne la cellule centrale où se trouvent la totalité des formulaires de commentaire et de recommandation sauf les pieds et les titres.

.ob_form fieldset ul li label

- concerne les textes d’indications présents à côté des champs de textes à compléter par les visiteurs. Soit « votre nom », « votre email », « votre site » du formulaire de commentaire.

.ob_form fieldset ul li .inline

- concerne les textes suivants du formulaire de commentaire « se souvenir de ces informations », « rédigez ici votre commentaire » et « me prévenir par un email du prochain commentaire sur cet article »

.diablog .content .ob_form fieldset p

- concerne les textes de réglement du formulaire « Visible uniquement par l'auteur du blog » et « Nous vous rappelons que vous êtes responsable du contenu des commentaires que vous publiez. Votre adresse IP (xx.xx.xx.xxx) sera archivée »

Pour mieux cerner la personnalisation d’un formulaire de commentaire, voici un exemple :

Je veux que mon formulaire soit sur fond rouge, que les textes « votre nom » etc… soient en jaune et en arial par 10px, que les textes « se souvenir de ces informations » etc… soient en violet en italique, que le champ où le visiteur va écrire son commentaire, contienne une image en arrière plan, que le titre « ajouter un commentaire » soit souligné et écrit en blanc, que le pied du formulaire soit rose.

.diablog {background-color:#FF0000 ;}

.ob_form fieldset ul li label {color:#FFFF00; font-family:arial; font-size:10px;}

.ob_form fieldset ul li .inline {color:#9900FF; font-style:italic;}

.diablog .content .ob_form fieldset ul li textarea {background:transparent url(http://monimagedefond.png);}

.diablog .title {text-decoration:underline; color:#FFFFFF;}

.diablog .buttons {background-color:#FF00FF;}

A vous de jouer !