Vous voulez personnaliser l'aspect des formulaires de votre site Jimdo ? Ce tutoriel est fait pour vous !
Vous allez pouvoir changer la couleur des champs de saisie, ainsi que celle des boutons. Que ce soit la couleur de fond avant et après le survol de la souris, la couleur de la
bordure ou encore la couleur du texte, les combinaisons de personnalisation sont infinies.
Aperçu de la personnalisation
Pour que vous puissiez modifier les couleurs à volonté, il va vous falloir comprendre ce que sont les codes couleur, pour pouvoir sans problème les remplacer/repérer.
Cliquez sur l'image de droite pour accéder au site colorpicker.com (ou sinon il y a aussi le site code-couleur.com) qui je trouve est vraiment utile et assez sympa. Doté d'un color picker et d'un large choix d’échantillons de couleurs (palettes de couleurs).
Vous allez vite voir des codes commençant par un symbole dièse (# le fameux "hashtag" comme on dit aujourd'hui) et suivi de 6 chiffres et lettres (dont certains ne comporte que des chiffres, d'autres que des lettres); il s'agit justement des codes couleur désignant chaqu'un une couleur différente.
Que les codes couleurs soient en majuscules ou en minuscules, cela ne change strictement rien (par exemple, la couleur blanche peut être écrite #FFFFFF ou #ffffff, bon par la
suite vous aurez peut être l'occasion de voir que le blanc, c'est aussi #fff, #FFF ou encore simplement white).
Si vous voulez en savoir plus sur les codes couleur en particulier, faites simplement une recherche sur Google avec les mots clés "code couleur html css". Bon, mais revenons à notre
tutoriel.
Le code - Modifier le head
Vous allez devoir accéder au head de votre site. Pour cela, rien de plus simple, en mode administration de votre site Jimdo, allez dans "Paramètres" (barre latérale droite), puis cliquez sur "Modifier le head". Dans cette rubrique, vous pourrez ajouter toute sorte de code pour améliorer votre site, mais attention, n'ajoutez pas n'importe quoi et seulement des codes destinés au head de votre site.
Le code comporte 4 étapes (plus une qui n'est pas important de vous expliquer; il s'agit simplement d'un centrage de l’icône calendrier). Je vais vous détailler ces étapes, elles permettent de styler indépendamment chaque élément en fonction du fait qu'il est actif ou pas :
- Les champs de saisie des formulaires
-
Les champs de saisie au survol
- Les boutons des formulaires
- Les boutons au survol de la souris
Pour les quatre, le même principe est
répété, on s'occupe du style de trois paramètres : la couleur de fond (background-color), les bordures (border) et la couleur du texte (color). Si la langue
anglaise vous est familière, vous avez un gros avantage dans les langages informatiques tels que le HTML et le CSS (si vous souhaitez apprendre plus par la suite). Je pense que
certains (peut être que ça vous parait même évident d'ailleurs), ont pu facilement reconnaitre de quoi il s'agit; color = couleur, border = bordure/bord, etc.
Maintenant, passons au récapitulatif de tout ça sous forme de code fini prêt à l'emploi, qui sera ensuite entièrement personnalisable grâce aux précédents conseils :
<style type="text/css">
/*<![CDATA[*/
/* Les champs de saisie des formulaires */
.cc-m-form-view-sortable input, input.single, .cc-m-form-view-sortable textarea, .commententry textarea, input[type=email], input[type=password] {
background-color: #EFEFEF !important; /*
couleur de fond */
border: 1px solid #EDEDED !important; /* couleur
de la bordure */
color: #333333 !important; /* couleur du
texte */
}
/* Les champs de saisie au survol */
.cc-m-form-view-sortable input:focus, input.single:focus, .cc-m-form-view-sortable textarea:focus, .commententry textarea:focus, input[type=email]:focus, input[type=password]:focus {
background-color: #FFFFFF !important; /*
couleur de fond */
border: 1px solid #B7CA79 !important; /*
couleur de la bordure */
color: #B7CA79 !important; /* couleur du
texte */
}
/* Les boutons des formulaires */
.cc-m-form-submit input[type=submit], .commententry input[type=submit], .cc-protected-area input[type=submit]{
background: #262626 !important; /* couleur
de fond */
border: 1px solid #262626; /* couleur de
la bordure */
color: #FFFFFF !important; /* couleur du
texte */
}
/* Les boutons au survol de la souris */
.cc-m-form-submit input[type=submit]:hover, .commententry input[type=submit]:hover, .cc-protected-area input[type=submit]:hover {
background-color: #B7CA79 !important; /*
couleur de fond */
border: 1px solid #B7CA79 !important; /*
couleur de la bordure */
color: #FFFFFF !important; /* couleur du
texte */
}
/* Ajustement de l'image du calendrier */
.ui-datepicker-trigger {vertical-align:middle !important;margin-left:10px;}
/*]]>*/
</style>
Voilà, à vous de trouver la combinaison de couleurs idéales pour avoir le formulaire le plus stylé !
Écrire commentaire
Poneys du soleil (jeudi, 21 mai 2015 20:18)
Super trop cool !
Nouvelle idée de tuto : Styler les sliders de l'outils galerie de photos !
:)
bellevue (mardi, 16 juin 2015 11:39)
message test ,écrivez ce que vous voulez
le petit poucet qui c'est perdu sur le web (mercredi, 16 septembre 2015 14:33)
JE me suis perdu ?
Nitzor (dimanche, 30 avril 2017 18:48)
je voudrais un tchat
ZeTuto (dimanche, 30 avril 2017 20:30)
@Nitzor une page du site est déjà consacrée à ça : https://www.zetuto.com/widgets/widget-tchat-shoutbox/