L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

Styler les formulaires

Ce tutoriel est compatible avec les nouveaux designs, mais également avec les anciens et les designs personnels. Tous les formulaires Jimdo de votre site sont concernés, à savoir les formulaires de contact, le formulaire du module de commentaires/livre d'or, le formulaire de connexion des zones protégées par mots de passe et éventuellement les formulaires ajoutés avec des services externes peuvent également être affétés par le nouveau style.

Le tutoriel d'Isabelle (Realia) n'étant plus mis à jour et son tutoriel pour styler les formulaires ne fonctionnant donc plus pour les nouveaux designs Jimdo, ce tutoriel est donc une adaptation simplifiée du tutoriel suivant : http://realia.jimdo.com/modifier-le-design/styler-les-formulaires/

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

Commentaires : 5
  • #1

    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 !
    :)

  • #2

    bellevue (mardi, 16 juin 2015 11:39)

    message test ,écrivez ce que vous voulez

  • #3

    le petit poucet qui c'est perdu sur le web (mercredi, 16 septembre 2015 14:33)

    JE me suis perdu ?

  • #4

    Nitzor (dimanche, 30 avril 2017 18:48)

    je voudrais un tchat

  • #5

    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/