Styler les formulaires

MAJ du 29 août 2012 : ajout du stylage du formulaire de recommandation

Nativement, les formulaires de Jimdo sont un peu "tristouilles"... Nous allons donc voir dans ce tutoriel comment y mettre un peu de style. Avant de vous lancer, notez que tous les formulaires de votre site seront affectés par les codes fournis, afin de préserver une cohérence dans votre charte graphique et de l'harmoniser. Aussi seront affectés par les changements :

  • votre formulaire "classique" de contact
  • vos formulaires plus élaborés (de réservation ou de devis par exemple)
  • le formulaire qui permet de poster dans votre livre d'or
  • le formulaire qui permet de poster un commentaire sur le blog
  • le formulaire d'inscription à la newsletter (pour ceux qui ont JimdoPro ou JimdoBusiness)
  • le formulaire de recommandation ("Recommander cette page")

Dans ce tutoriel, nous allons procéder par étapes. En effet, vous pouvez ne styler qu'une partie des formulaires : le bouton d'envoi seul, ou seulement les champs de saisie d'une ligne (inputs) ou enfin uniquement les cadres de saisie de plusieurs lignes (textareas)... Evidemment, vous pouvez aussi décider de styler tout en combinant les codes fournis !

Aperçu du résultat

L'idée est de passer de ce formulaire peu fini :

Fig. 1 : le formulaire de départ
Fig. 1 : le formulaire de départ

... à celui-ci, coloré et mieux fini :

Fig. 2 : le formulaire final
Fig. 2 : le formulaire final

Vous trouverez une démonstration in situ du résultat obtenu sur cette page de mon site de test. De même, vous pouvez poster un commentaire en réponse à ce tutoriel ou consulter ma page de contact.

Flèche vers le haut

Où insérer les codes ?

Tout se passe dans la fenêtre de saisie accessible dans Paramètres > Modifier le head :

 

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

C'est dans cette fenêtre de saisie que vous allez coller les codes fournis.

Flèche vers le haut

Comment personnaliser les codes ?

Tous les codes donnés sont commentés : vous savez ainsi à quoi correspond chaque ligne. Les commentaires apparaissent en gris et sont balisés de la sorte : /* commentaires */.

En outre, je donne quelques indications supplémentaires sous chaque code.

Le colorpicker

L'essentiel de votre personnalisation consistera à changer les couleurs pour les accorder au design de votre site ou à votre goût. Les couleurs dans les codes sont aisément repérables, puisqu'elles apparaissent en vert, précédées d'un dièse. En effet, une couleur est écrite en code hexadécimal : ainsi le blanc est-il codé #fff et le noir #000.

 

Pour vous aider à trouver le code hexadécimal de la couleur de votre choix, je vous recommande d'utiliser cet outil :

Promenez-vous sur la palette et cliquez sur une couleur pour récupérer son code hexadécimal (#......)

Flèche vers le haut

Etape 1 : styler le bouton d'envoi

C'est du bouton d'envoi que nous allons nous occuper en premier lieu, grâce à 3 codes :

  • code n°1 : on colore juste le bouton
  • code n°2 : on colore le bouton et, en plus, on arrondit ses coins
  • code n°3 : ce code ajoute un effet au survol du pointeur : le bouton change de couleur

Code n°1 : colorer le bouton

Commençons par donner un peu de couleurs au bouton d'envoi.

Aperçu du résultat

Fig. 3 : le bouton d'envoi est coloré
Fig. 3 : le bouton d'envoi est coloré

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Styler les boutons d'envoi des formulaires */

.cc-m-form-view-submit input[type=submit], .commententry input[type=submit], .newsletterbox input[type=submit],  #tellbody input[type=submit] {
background: #262626 !important; /* couleur de fond du bouton */
border: 1px solid #262626; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
font-size: 12px !important; /* taille de la police du texte du bouton */
cursor: pointer;
text-decoration: none !important;
padding: 5px 20px !important;
width: auto;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte du bouton en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • En revanche, ne modifiez pas les 4 dernières lignes du code.

Code n°2 : colorer le bouton et arrondir ses coins

En ajoutant 3 lignes au code précédent, on peut arrondir discrètement les coins du bouton.

Aperçu du résultat

Fig. 4 : le bouton d'envoi a des coins légèrement arrondis
Fig. 4 : le bouton d'envoi a des coins légèrement arrondis

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Styler les boutons d'envoi des formulaires */

.cc-m-form-view-submit input[type=submit], .commententry input[type=submit], .newsletterbox input[type=submit], #tellbody input[type=submit] {
background: #262626 !important; /* couleur de fond du bouton */
border: 1px solid #262626; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
font-size: 12px !important; /* taille de la police du texte du bouton */
cursor: pointer;
text-decoration: none !important;
padding: 5px 20px !important;
width: auto;
/* les 3 lignes qui suivent forment les arrondis des coins du bouton */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte du bouton en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 4px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 5px ou 6px. (Faites ce changement sur les 3 lignes de code concernées).

Code n°3 : changer la couleur du bouton au survol du pointeur

On peut enfin ajouter au bouton un élégant effet de "hover" : au survol du pointeur, le bouton change de couleur. Ce code doit être ajouté au code n°1 ou au code n°2 ; on ne peut pas l'utiliser seul.

Aperçu du résultat

Fig. 5 : le bouton change de couleur sous le pointeur
Fig. 5 : le bouton change de couleur sous le pointeur

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* au survol du pointeur, le bouton d'envoi change de couleur */

.cc-m-form-view-submit input[type=submit]:hover, .commententry input[type=submit]:hover, .newsletterbox input[type=submit]:hover, #tellbody input[type=submit]:hover {
background-color: #A98787 !important; /* couleur de fond du bouton au survol du pointeur */
border: 1px solid #A98787 !important; /* couleur de la bordure du bouton d'envoi au survol du pointeur */
color: #fff !important; /* couleur du texte du bouton au survol du pointeur */
text-decoration: none !important;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
Flèche vers le haut

Etape 2 : styler les champs de saisie (inputs)

Maintenant qu'on a stylé le bouton d'envoi des formulaires, on va s'occuper des champs de saisie tenant sur une ligne : les inputs, et ce au moyen de 4 codes :

  • code n°1 : on colore les champs de saisie
  • code n°2 : on colore les champs de saisie et on arrondit leurs coins
  • code n°3 : on ajoute un effet au focus du pointeur : le champ de saisie change de couleur
  • code n°4 : on aère les formulaires en augmentant les marges internes

Code n°1 : colorer le champ de saisie

C'est parti : donnons un peu de couleur aux champs de saisie.

Aperçu du résultat

Fig. 6 : les champs de saisie sont colorés
Fig. 6 : les champs de saisie sont colorés

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Style des champs de saisie (inputs) des formulaires */

.cc-m-form-view-sortable input, input.single, input.newsletterInput {
background-color: #F1E7DB !important; /* couleur de fond du champ de saisie */
border: 1px solid #F1E7DB !important; /* couleur de la bordure du champ de saisie */
color: #333 !important; /* couleur du texte entré dans le champ de saisie */
font-size: 12px !important; /* taille du texte entré dans le champ de saisie */
padding: 6px !important;
}

/* Style de l'élément de sélection avec flèches */

div.cc-spinner div.cc-spinner-input-wrapper input {
padding: 0px !important;
font-size: 12px !important; /* taille des chiffres qui s'affichent */
}

div.cc-m-form-view-element-wrapper div.cc-spinner-input-wrapper div.cc-spinner {
min-height: 46px !important;
}

div.cc-spinner {
height: 22px !important;
z-index: 0 !important;
}

/* Centrer l'icone du calendrier */

.ui-datepicker-trigger {
vertical-align: middle !important;
margin-left: 10px;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte entré dans les champs de saisie en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • Vous n'avez pas besoin de toucher au reste du code : ce sont des modifications d'autres éléments du formulaire qui ne devraient pas nécessiter d'ajustements supplémentaires.

Code n°2 : colorer le champ de saisie et arrondir ses coins

En ajoutant 3 lignes au code précédent, on peut arrondir discrètement les coins des champs de saisie.

Aperçu du résultat

Fig. 7 : les champs de saisie sont colorés et leurs coins discrètement arrondis
Fig. 7 : les champs de saisie sont colorés et leurs coins discrètement arrondis

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Style des champs de saisie (inputs) des formulaires */

.cc-m-form-view-sortable input, input.single, input.newsletterInput {
background-color: #F1E7DB !important; /* couleur de fond du champ de saisie */
border: 1px solid #F1E7DB !important; /* couleur de la bordure du champ de saisie */
color: #333 !important; /* couleur du texte entré dans le champ de saisie */
font-size: 12px !important; /* taille du texte entré dans le champ de saisie */
padding: 6px !important;
/* les 3 lignes qui suivent forment les arrondis des coins du champ */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/* Style de l'élément de sélection avec flèches */

div.cc-spinner div.cc-spinner-input-wrapper input {
padding: 0px !important;
font-size: 12px !important; /* taille des chiffres qui s'affichent */
}

div.cc-m-form-view-element-wrapper div.cc-spinner-input-wrapper div.cc-spinner {
min-height: 46px !important;
}

div.cc-spinner {
height: 22px !important;
z-index: 0 !important;
}

/* Centrer l'icone du calendrier */

.ui-datepicker-trigger {
vertical-align: middle !important;
margin-left: 10px;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte saisi dans le champ de saisie en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 4px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 5px ou 6px. (Faites ce changement sur les 3 lignes de code concernées).

Code n°3 : changer la couleur du champ de saisie au survol du pointeur

On peut enfin ajouter aux champs de saisie un élégant effet de "hover" : au survol du pointeur, le champ change de couleur. Ce code doit être ajouté au code n°1 ou au code n°2 ; il ne peut pas être utilisé seul.

Aperçu du résultat

Fig. 8 : avec l'effet de "hover", le champ change de couleur sous le pointeur
Fig. 8 : avec l'effet de "hover", le champ change de couleur sous le pointeur

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* le champ de saisie change de couleur au focus */

.cc-m-form-view-sortable input:focus, input.single:focus, input.newsletterInput:focus {
background-color: #fff !important; /* couleur de fond du champ de saisie au curseur */
border: 1px solid #F83C18 !important; /* couleur de la bordure du champ de saisie au curseur */
color: #F83C18 !important; /* couleur du texte quand on le tape dans le champ de saisie */
outline: none;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.

Code n°4 : aérer le formulaire

Quand on crée un formulaire dans Jimdo, on a le choix entre deux présentations :

Avec le second type de présentation, aucun problème :

Fig. 9 : second type de présentation des formulaires
Fig. 9 : second type de présentation des formulaires

Si on sélectionne la première présentation en revanche, les champs de saisie sont un peu "tassés" à mon goût. Je préfère donc aérer un peu l'ensemble en augmentant les marges intérieures :

Fig. 10 : premier type de présentation des formulaires
Fig. 10 : premier type de présentation des formulaires

Pour ce faire, je vous suggère d'insérer ce code :

<style type="text/css">
/*<![CDATA[*/

/* Espacement des éléments de formulaire si présentation en colonnes */

.cc-m-form-layout-0 .cc-m-form-view-element {
padding: 8px 5px !important;
}

/*]]>*/
</style>
Flèche vers le haut

Etape 3 : styler les cadres de saisie (textareas)

Maintenant qu'on a stylé le bouton d'envoi des formulaires et les champs de saisie, on va s'occuper des cadres de saisie qui courent sur plusieurs lignes : les textareas. Nous allons procéder en 3 temps :

  • code n°1 : on colore les cadres de saisie
  • code n°2 : non seulement on colore les cadres de saisie, mais on arrondit leurs coins
  • code n°3 : on ajoute un effet au focus du pointeur : le cadre change de couleur

Code n°1 : colorer le cadre de saisie

On commence par colorer les cadres de saisie.

Aperçu du résultat

Fig. 11 : le cadre de saisie est coloré
Fig. 11 : le cadre de saisie est coloré

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Style des cadres de saisie (textareas) des formulaires */

.cc-m-form-view-sortable textarea, .commententry textarea, #tellbody textarea {
background-color: #F1E7DB !important; /* couleur de fond du cadre de saisie */
border: 1px solid #F1E7DB !important; /* couleur de la bordure du cadre de saisie */
color: #333 !important; /* couleur du texte entré dans le cadre de saisie */
font-size: 12px !important; /* taille du texte entré dans le cadre de saisie */
padding: 6px !important;
}

/* Largeur des cadres de saisie (textareas) des commentaires du blog */

.commententry textarea {
width: 90% !important;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte entré dans les cadres de saisie en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • Vous n'avez pas besoin de toucher au reste du code.

Code n°2 : colorer le cadre de saisie et arrondir ses coins

En ajoutant 3 lignes au code précédent, on peut arrondir discrètement les coins des cadres de saisie.

Aperçu du résultat

Fig. 12 : le cadre de saisie est coloré et ses coins arrondis
Fig. 12 : le cadre de saisie est coloré et ses coins arrondis

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Style des cadres de saisie (textareas) des formulaires */

.cc-m-form-view-sortable textarea, .commententry textarea, #tellbody textarea {
background-color: #F1E7DB !important; /* couleur de fond du cadre de saisie */
border: 1px solid #F1E7DB !important; /* couleur de la bordure du cadre de saisie */
color: #333 !important; /* couleur du texte entré dans le cadre de saisie */
font-size: 12px !important; /* taille du texte entré dans le cadre de saisie */
padding: 6px !important;
/* les 3 lignes qui suivent forment les arrondis des cadres de saisie */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/* Largeur des cadres de saisie (textareas) des commentaires du blog */

.commententry textarea {
width: 90% !important;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte saisi dans le cadre de saisie en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 4px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 5px ou 6px. (Faites ce changement sur les 3 lignes de code concernées).

Code n°3 : changer la couleur du cadre de saisie au survol du pointeur

On peut enfin ajouter aux champs de saisie un élégant effet de "hover" : au survol du pointeur, le cadre change de couleur. Ce code doit être ajouté au code n°1 ou au code n°2 ; il ne peut pas être utilisé seul.

Aperçu du résultat

Fig. 13 : l'effet de survol en action dans le cadre de saisie
Fig. 13 : l'effet de survol en action dans le cadre de saisie

Le code commenté

<style type="text/css">
/*<![CDATA[*/

.cc-m-form-view-sortable textarea:focus, .commententry textarea:focus, #tellbody textarea:focus {
background-color: #fff !important; /* couleur de fond du cadre de saisie au curseur */
border: 1px solid #F83C18 !important; /* couleur de la bordure du cadre de saisie au curseur */
color: #F83C18 !important; /* couleur du texte quand on le tape dans le cadre de saisie */
outline: none;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
Flèche vers le haut

Etape 4 : styler le captcha

On pourrait s'arrêter là, mais j'ajoute une ultime touche : la possibilité de styler le captcha qui paraît un peu "brut de décoffrage" :

Fig. 14 : le captcha "au naturel"
Fig. 14 : le captcha "au naturel"

Aperçu du résultat

L'idée, c'est de fondre le "captcha" dans le reste du formulaire comme ceci :

Fig. 15 : un captcha relooké
Fig. 15 : un captcha relooké

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Styler le captcha */

div.captcha {
background-img: none !important; /* on n'affiche pas l'image de fond du captcha */
border: 1px solid #F1E7DB; !important; /* couleur de la bordure du captcha */
background: #F1E7DB !important; /* couleur de fond du captcha */
padding: 7px !important;
margin-top: 10px !important;
/* les 3 lignes qui suivent forment les arrondis des coins du captcha */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

div.captcha div.bottom span {
color: #444 !important; /* couleur du texte « Veuillez entrer votre code » */
}

div.captcha span.character {
border: 1px solid #F1E7DB !important; /* couleur de la bordure du code */
}

div.captcha div.bottom span #captchafield, div.captcha div.bottom input {
border: 1px solid #F1E7DB !important; /* couleur de la bordure du champ où on entre le code */
color: #333 !important; /* couleur du code qu'on entre dans le champ de saisie */
font-size: 12px !important; /* taille du code que l'on entre dans le champ de saisie */
padding: 7px !important;
width: 90% !important;
}

/*]]>*/
</style>

Mode d'emploi du code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez aussi changer la taille du texte saisi du captcha en remplaçant la valeur en pixels (12px) par une valeur plus grande (14px) ou plus petite (10px).
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 4px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 5px ou 6px. (Faites ce changement sur les 3 lignes de code concernées). Pour désactiver l'arrondi, effacez les 3 lignes concernées.
  • Ne touchez pas au reste du code (qui n'est d'ailleurs par commenté).
Flèche vers le haut

Récapitulatif : la feuille de style complète

Pour les plus fainéants d'entre vous, j'ai condensé les 4 étapes du tutoriel en une seule feuille de style prête à l'emploi. Elle va vous permettre de styler tous les éléments (boutons, champs de saisie, cadres de saisie, captcha) des formulaires de votre site Jimdo. J'ai opté pour des arrondis légers et des tons neutres (fig. 16) ; j'ai également ajouté un effet de survol en orange (fig. 17).

Aperçu du résultat

Fig. 16 : le formulaire relooké de façon neutre
Fig. 16 : le formulaire relooké de façon neutre
Fig. 17 : l'effet de survol en orange
Fig. 17 : l'effet de survol en orange

Le code commenté prêt à l'emploi

Il vous suffit de copier-coller le bloc de code comme indiqué ici. Vous pouvez, bien sûr, adapter le code - notamment changer les couleurs à l'aide du colorpicker - en suivant les commentaires du code indiqués en /* gris */ :

<style type="text/css">
/*<![CDATA[*/

/* Styler les boutons d'envoi des formulaires */

.cc-m-form-view-submit input[type=submit], .commententry input[type=submit], .newsletterbox input[type=submit],  #tellbody input[type=submit] {
background: #262626 !important; /* couleur de fond du bouton */
border: 1px solid #262626; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
font-size: 12px !important; /* taille de la police du texte du bouton */
cursor: pointer;
text-decoration: none !important;
padding: 5px 20px !important;
width: auto;
/* les 3 lignes qui suivent forment les arrondis des coins du bouton */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/* Le bouton d'envoi change de couleur au survol du pointeur */

.cc-m-form-view-submit input[type=submit]:hover, .commententry input[type=submit]:hover, .newsletterbox input[type=submit]:hover,#tellbody input[type=submit]:hover {
background-color: #FF8000 !important; /* couleur de fond du bouton au survol du pointeur */
border: 1px solid #FF8000 !important; /* couleur de la bordure du bouton d'envoi au survol du pointeur */
color: #fff !important; /* couleur du texte du bouton au survol du pointeur */
text-decoration: none !important;
}

/* Style des champs de saisie (inputs) des formulaires */

.cc-m-form-view-sortable input, input.single, input.newsletterInput {
background-color: #efefef !important; /* couleur de fond du champ de saisie */
border: 1px solid #ededed !important; /* couleur de la bordure du champ de saisie */
color: #333 !important; /* couleur du texte entré dans le champ de saisie */
font-size: 12px !important; /* taille du texte entré dans le champ de saisie */
padding: 6px !important;
/* les 3 lignes qui suivent forment les arrondis des coins du champ */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/* Le champ de saisie change de couleur au focus */

.cc-m-form-view-sortable input:focus, input.single:focus, input.newsletterInput:focus {
background-color: #fff !important; /* couleur de fond du champ de saisie au curseur */
border: 1px solid #FF8000 !important; /* couleur de la bordure du champ de saisie au curseur */
color: #FF8000 !important; /* couleur du texte quand on le tape dans le champ de saisie */
outline: none;
}

/* Style de l'élément de sélection avec flèches */

div.cc-spinner div.cc-spinner-input-wrapper input {
padding: 0px !important;
font-size: 12px !important; /* taille des chiffres qui s'affichent */
}

div.cc-m-form-view-element-wrapper div.cc-spinner-input-wrapper div.cc-spinner {
min-height: 46px !important;
}

div.cc-spinner {
height: 22px !important;
z-index: 0 !important;
}

/* Centrer l'icone du calendrier */

.ui-datepicker-trigger {
vertical-align: middle !important;
margin-left: 10px;
}

/* Espacement des éléments de formulaire si présentation en colonnes */

.cc-m-form-layout-0 .cc-m-form-view-element {
padding: 8px 5px !important;
}

/* Style des champs de saisie (textareas) des formulaires */

.cc-m-form-view-sortable textarea, .commententry textarea, #tellbody textarea {
background-color: #efefef !important; /* couleur de fond du champ de saisie */
border: 1px solid #ededed !important; /* couleur de la bordure du champ de saisie */
color: #333 !important; /* couleur du texte entré dans le champ de saisie */
font-size: 12px !important; /* taille du texte entré dans le champ de saisie */
padding: 6px !important;
/* les 3 lignes qui suivent forment les arrondis des cadres de saisie */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

/* Largeur des champs de saisie (textareas) des commentaires du blog */

.commententry textarea {
width: 90% !important;
}

/* Le cadre de saisie change de couleur au focus */

.cc-m-form-view-sortable textarea:focus, .commententry textarea:focus, #tellbody textarea:focus {
background-color: #fff !important; /* couleur de fond du champ de saisie au curseur */
border: 1px solid #FF8000 !important; /* couleur de la bordure du champ de saisie au curseur */
color: #FF8000 !important; /* couleur du texte quand on le tape dans le champ de saisie */
outline: none;
}

/* Styler le captcha */

div.captcha {
background-img: none !important; /* on n'affiche pas l'image de fond du captcha */
border: 1px solid #efefef; !important; /* couleur de la bordure du captcha */
background: #efefef !important; /* couleur de fond du captcha */
padding: 7px !important;
/* les 3 lignes qui suivent forment les arrondis des coins du captcha */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

div.captcha div.bottom span {
color: #444 !important; /* couleur du texte « Veuillez entrer votre code » */
}

div.captcha span.character {
border: 1px solid #ededed !important; /* couleur de la bordure du code */
}

div.captcha div.bottom span #captchafield, div.captcha div.bottom input {
border: 1px solid #ededed !important; /* couleur de la bordure du champ où on entre le code */
color: #333 !important; /* couleur du code qu'on entre dans le champ de saisie */
font-size: 12px !important; /* taille du code que l'on entre dans le champ de saisie */
padding: 7px !important;
width: 90% !important;
outline: none;
}

/*]]>*/
</style>

Maintenant, c'est à vous de jouer :)

Qu'en dites-vous ?

Écrire commentaire

Commentaires : 22
  • #1

    nina4now (samedi, 20 octobre 2012 13:06)

    merci beaucoup c'est super

  • #2

    Happlay (vendredi, 26 octobre 2012 20:38)

    Merci beaucoup pour ce tuto

  • #3

    A-Low (lundi, 05 novembre 2012 19:55)

    Merci Beaucoup! ca ma vraiment aide!

  • #4

    aloeverasante (lundi, 12 novembre 2012 12:35)

    Merci!!! pour le moment j'ai styler les boutons d'envoi! cela change c'est bien
    Par contre tous les boutons du site se retrouvent de la même couleur, est il possible de styler les boutons indépendamment les uns des autres ?
    Merci encore

  • #5

    Isa (admin) (lundi, 12 novembre 2012 19:14)

    Bonsoir !
    Oui, vous pouvez styler les boutons indépendamment les uns des autres, mais le code se complexifie sacrément... Enfin, voici une piste à explorer : écrivez un code différent pour chaque bouton, en sachant que :

    .cc-m-form-view-submit input[type=submit] -> tous les boutons des formulaires
    .commententry input[type=submit] -> les boutons des commentaires (blog et livre d'or)
    .newsletterbox input[type=submit] -> le bouton d'inscription à la Newsletter
    #tellbody input[type=submit] -> le bouton du formulaire de recommandation

    Bon courage donc !

    Isa

  • #6

    saonecountry (samedi, 08 décembre 2012 16:53)

    CA MARCHE BIEN MERCI

  • #7

    Mica (lundi, 31 décembre 2012 15:52)

    Merci, sa marche très bien, et encore bravo realia !

  • #8

    Administrateur (mardi, 19 mars 2013 15:16)

    Bonjour, très bon tutoriel. J'aimerais savoir comment faire pour styler les commentaires du blog, comme vous l'avez si bien fait :x

  • #9

    Isa (vendredi, 22 mars 2013 18:47)

    @Administrateur : Merci ! Un tutoriel pou styler les commentaires comme ici est prévu. Mais patience, patience... ;)

  • #10

    abunawasmag-dz (vendredi, 03 mai 2013 14:11)

    Merci :) C'est super :)

  • #11

    EDP (samedi, 15 juin 2013 12:33)

    Bonjour j'ai un problème pour changer la couleur du cadre de saisie au survol du pointeur

  • #12

    EDP (samedi, 15 juin 2013 20:33)

    Les bordure en couleurs ne marchent pas . !!!

  • #13

    Isabelle (samedi, 15 juin 2013 21:41)

    Bonsoir,
    Si elles fonctionnent, mais vous avez copié deux fois le code pour les "textarea" et pas le code pour les "inputs". Reprenez le code à zéro sans rien oublier et tout rentrera dans l'ordre.
    Bon courage !

  • #14

    EDP (dimanche, 16 juin 2013 09:38)

    Merci, sa marche super bien !!! c'est trop bien

  • #15

    edeals-forum (mardi, 16 juillet 2013 09:51)

    Bonjour,pouvez-vous me donnez le code des boutons de se site s'il vous plait ,Merci

  • #16

    Isabelle (vendredi, 19 juillet 2013 14:12)

    @edeals : c'est le même code que celui que j'ai donné dans le tutoriel ci-dessus... Il n'y a que la couleur qui change (c'est la même que celle de mes liens). Ou alors je n'ai pas compris votre question ?

  • #17

    carteducieltest (samedi, 24 août 2013 07:46)

    Wow j'ai réussi.........comment ne pas réussir. En suivant pas à pas ce qui est écrit, on ne peut se tromper. Merci beaucoup.

  • #18

    carteducieltest (lundi, 26 août 2013 18:40)

    Bonjour,

    Est-ce que ce serait pensable de faire une cadre tout le tour des formulaires????? Dans mon formulaire j'ai inséré une liste de sélection. Le petit carré n'a pas la même couleur et le texte n'est pas pareil au reste.

  • #19

    Isabelle (vendredi, 04 octobre 2013 21:59)

    @carteducieltest : il me faudrait l'adresse de la page concernée pour voir comment faire et tester avec l'inspecteur de Chrome. C'est peut-être possible.

  • #20

    carteducieltest (mardi, 08 octobre 2013 19:53)

    Bonjour,

    Oups c'est plutôt ces deux codes:


    http://carteducieltest.jimdo.com/me-joindre/
    http://carteducieltest.jimdo.com/me-joindre/rendez-vous/

  • #21

    Isabelle (mercredi, 16 octobre 2013 13:25)

    @carteducieltest : je pense que vous parlez non de la liste de sélection (il n'y en a pas sur les deux pages indiquées), mais du champ de saisie de plusieurs lignes dans lequel la police s'affiche en plus petit ? Dans votre code :
    .cc-m-form-view-sortable textarea, .commententry textarea, #tellbody textarea {
    background-color: #E8C6F5 !important;
    border: 2px outset #BA9EC4 !important;
    color: #64516A !important;
    font-size: 12px !important;
    padding: 6px !important;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    }
    enlevez la ligne "font-size: 12px !important;" et la police aura la même taille que dans les autres champs.
    En ce qui concerne un cadre qui fasse tout le tour du formulaire, c'est possible mais il faut s'avoir lire le code. Repérez la ligne de code (dans le code source) qui ressemble à ça :
    <form action="" method="post" id="cc-m-form-8387674769" class="cc-m-form cc-m-form-layout-1">

    puis insérez ce code dans la feuille de style :

    #cc-m-form-8387674769 {
    background: #FFC0CB;
    border: 1px solid #F00;
    padding: 10px;
    border-radius: 10px;
    }

    Pour les autres formulaires, faire la même chose en remplaçant #cc-m-form-8387674769 par le numéro du formulaire à styler.

  • #22

    carteducieltest (jeudi, 17 octobre 2013 10:01)

    Merci beaucoup ça marche pour mes deux pages yesssssss. En ce qui concerne la liste de sélection je l'avais enlevée puisque je n'étais pas capable de mettre l'encadré de la même couleur que le reste donc j'ai choisi autre chose. Je l'ai mis en exemple sur la page rendez-vous. Merci encore votre site est une mine d'or. Françoise

Ruban