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

Messages stylés jimdo (Boites messages)

Afficher des messages d'alertes/stylés

Des messages stylés

Avec Jimdo seulement


Message positif : Tuto simple !
Message d'erreur : ce tuto ne marche qu'avec Jimdo !
Message d'alerte : Tuto pour Jimdo !
Message d'information : Tuto uniquement pour Jimdo !

Voici un petit tutoriel pour embellir votre site avec des petites boites d'information en couleur. Le tutoriel a été mis à jour (ajout du code "Modifier le head") pour que le résultat soit le même que sur mon site.

Le code (Modifier le head) :

<style type="text/css">

/*<![CDATA[*/


/* Messages style */

 

.message-ok, .message-info, .message-error, .message-warning, .message-ok a, .message-info a, .message-error a, .message-warning a {
    font:normal 14px/140% "Droid Sans", sans-serif!important;
}
.message-ok, .message-info, .message-error, .message-warning {
    padding: 0.8em!important;
    line-height:1.8em!important;
    border-radius: 5px; -moz-border-radius: 5px;  -webkit-border-radius: 5px; -o-border-radius: 5px;
}
.message-ok {
    background:#DFF2BF url();
    color: #4F8A10!important;
    border:1px solid #DFF2BF;
    border-left: 4px solid #4F8A10 !important;
}
.message-info {
    background:#D9EDF7 url();
    border:1px solid #BCE8F1;
    color: #00719F!important;
    border-left: 4px solid #00719F !important;
}
.message-warning {
    background:#FCF8E3 url();
    border: 1px solid #FBEED5;
    color: #C09853!important;
    border-left: 4px solid #C09853 !important;
}
.message-error {
  background:#F2DEDE url();
  border-left: 4px solid #B94A48 !important;
  border: 1px solid #EED3D7;
  color: #B94A48!important;
}

 

/*]]>*/

</style>

Les différentes boites messages

Message positif

Ceci est un message positif

Copiez le code qui ce trouve dans le carré et puis collez-le dans un élément widget / HTML.

Code à entrer :

<div class="message-ok">   
 <strong>Écrire votre message positif ici</strong></div>  

Remplacez : "Ecrire votre message positif ici" par votre message/texte!

Ce qui donne :

Écrire votre message positif ici

Message d'erreur

Message d'erreur : Tuto pour jimdo !

Code à entrer :

<div class="message-error">   
 <strong>Écrire votre message d'erreur ici</strong></div>  

Remplacez : "Ecrire votre message d'erreur ici" par votre message/texte!

Ce qui donne :

Écrire votre message d'erreur ici

Voici d'autres "boîtes messages" (même principe que les précédentes)

Message d'alerte

Message d'alerte : Tuto pour Jimdo !
<div class="message-warning">   
 <strong>Écrire votre message d'alerte ici</strong></div>  

Remplacez : "Ecrire votre message d'alerte ici" par votre message/texte!


Message d'information

Message d'information : Tuto pour Jimdo !
<div class="message-info">   
 <strong>Écrire votre message d'information ici</strong></div>  

Remplacez : "Ecrire votre message d'information ici" par votre message/texte!

Mode d'emploi (Où insérer les codes précédents ?)

Écrire commentaire

Commentaires : 11
  • #1

    Juicers Reviews (mercredi, 29 mai 2013 16:07)

    This informative article was exactly what I was trying to find!

  • #2

    medaillessmilitairesgareoult (dimanche, 08 septembre 2013 13:37)

    MERCI POUR CES ASTUCES

  • #3

    chut-graph (jeudi, 03 juillet 2014 07:13)

    Bonjour,
    Vu que dans ce code il y a une "div" c'est que vous avec un css commun a tous ces messages stylés ?
    est ce que si on met un css dans modifier le head on pourra mettre nos couleurs et nos images ?
    ( ma question c'est est ce que le css fonctionne dans "modifir le head" ?

    merci

  • #4

    Ze Tuto (jeudi, 03 juillet 2014 18:59)

    Re-bonjour,

    oui c'est possible de modifier le style de n'importe quel élément de votre site Jimdo en passant par "Modifier le head" qui nous permet de modifier la partie <head> de notre site.

    Pour ces messages stylés en particulier, j'ai prévu un tutoriel pour les arranger et les moderniser :)

    Cdl ;)

  • #5

    Patrick CHARREAU (lundi, 22 décembre 2014 10:37)

    Bonjour,
    N'étant pas un expert du html, de la modification du head, en faisant juste un copier/coller (et en modifiant le message, et là j'y arrive ... lol) je me retrouve avec les anciens messages avec le symbole "danger" "attention" etc ... et non pas les modèles présentés plus haut. Comment faire les modifications pour les avoir ?
    J'utilise Jimdo Pro.
    Merci
    Patrick

  • #6

    Ze Tuto (samedi, 27 décembre 2014 16:53)

    Bonjour Patrick,

    c'est normal, sur mon site j'ai modifié le style CSS des boites messages Jimdo. Je pense que je publierais le code CSS sur mon site.

    Cordialement

  • #7

    .:Nico-Zino:. (dimanche, 22 février 2015 17:25)

    Bonjour, j'ai un petit problème..
    Chez moi ça se présente comme ça : http://hpics.li/cea5f93 (image).

    Pourquoi c'est comme ça chez moi ?
    Merci de votre réponse d'avance :)

  • #8

    Ze Tuto (dimanche, 22 février 2015 18:43)

    Bonjour @Nico-Zino,

    c'est normal, j'ai moi même costumisé ces messages sur mon site en modifiant le CSS.

  • #9

    .:Nico-Zino:. (dimanche, 22 février 2015 19:19)

    D'accord, merci de m'avoir répondu :)

  • #10

    gilles (samedi, 12 septembre 2015 12:02)

    Bonjour suite à une manip malheureuse je n'ai plus d'icone de connexion sur mon site.
    Comment le faire réapparaitre??
    Merci Gilles.

  • #11

    Zetuto (samedi, 03 octobre 2015 12:44)

    Bonjour Gilles,
    De quelle icône de connexion parlez-vous ? Je vois bien le lien de connexion en bas à droite de votre site.