Des notes qui ont du style !

17 février 2011 : j'ai renommé plusieurs classes CSS utilisées pour les notes car certaines interféraient (mal) avec Jimdo. J'ai aussi réglé le problème des arrondis invisibles avec Firefox en complétant le code.

Ce tutoriel vous montre comment structurer votre contenu en affichant des messages informatifs colorés en fonction de leur visée : messages neutres, messages d'erreur, messages d'avertissement, etc. Tout ça avec une feuille de style et des snippets (petits morceaux de code à copier-coller).

 

Je vous propose 5 modèles différents de messages informatifs. Pour chacun, j'indique sa source, je donne la feuille de style à insérer dans le header et je liste les différents snippets à copier-coller, accompagnés d'un aperçu du résultat. Je vous invite à regarder le screencast que j'ai fait pour voir en détails comment procéder : mode d'emploi en vidéo.

 

Mode d'emploi en vidéo

Ce screencast commenté vous montre comment installer sur votre site Jimdo un des modèles de notes détaillés ci-dessous.

 

Flèche vers le haut

Modèle n°1 : léger, sans image, facile à installer

Pour utiliser ce modèle de notes, commencez par intégrer la feuille de style correspondante dans votre site, puis copiez-collez les morceaux de code dont vous avez besoin dans des espaces + Widget/HTML. Mettez-y vos propres textes bien entendu !

Source et aperçu

Exemples de messages

Source du code : Message Boxes with CSS

Le feuille de style (CSS)

  1. En mode admin, cliquer sur Paramètres > Modifier le header.
  2. Dans le cadre qui s'affiche, copier-coller le code CSS suivant et enregistrer la modification :
<style type="text/css">
 /* MESSAGE BOXES
 /////////////////////////////*/

 .msg-box { text-align: center; padding: 5px; color:#545454; width:90%; margin:5px auto; }
 .clean { background-color: #efefef; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; }
 .information { background-color: #f7fafd; border-top: 2px solid #b5d3ff; border-bottom: 2px solid #b5d3ff; }
 .ok { background-color: #d7f7c4; border-top: 2px solid #82cb2f; border-bottom: 2px solid #82cb2f; }
 .alerte { background-color: #fef5be; border-top: 2px solid #fdd425; border-bottom: 2px solid #fdd425; }
 .erreur { background-color: #ffcdd1; border-top: 2px solid #e10c0c; border-bottom: 2px solid #e10c0c; }
 </style>

Les snippets à copier-coller (HTML)

Quel que soit le message que vous voulez afficher :

  1. Créez un + Widget / HTML
  2. Copiez-collez le code fourni en remplaçant le texte donné par défaut par le vôtre.

 

Insérer un message neutre

<p class="msg-box clean">Ceci est un message neutre</p>    

Ceci est un message neutre

Insérer un message d'information

<p class="msg-box information">Ceci est un message d'information</p>    

Ceci est un message d'information

Insérer un message positif

<p class="msg-box ok">Ceci est un message positif</p>  

Ceci est un message positif

Insérer un message d'avertissement

 <p class="msg-box alerte">Ceci est un message d'avertissement</p>    

Ceci est un message d'avertissement

Insérer un message d'erreur

<p class="msg-box erreur">Ceci est un message d'erreur</p>    

Ceci est un message d'erreur

Flèche vers le haut

Modèle n°2 : basique, mais avec des icônes

Pour utiliser ce modèle de notes, commencez par intégrer la feuille de style correspondante dans votre site, puis copiez-collez les morceaux de code dont vous avez besoin dans des espaces + Widget/HTML. Mettez-y vos propres textes bien entendu !

Source et aperçu

Exemple de message d'information
Exemple de message en cas de succès
Exemple de message d'avertissement
Exemple de message d'erreur

La feuille de style (CSS)

  1. En mode admin, cliquer sur Paramètres > Modifier le header.
  2. Dans le cadre qui s'affiche, copier-coller le code suivant et enregistrer la modification :  
<style type="text/css">

.n-info, .n-success, .n-warning, .n-error {
    width: 80%;
    border: 1px solid;
    margin: 10px auto;
    padding: 15px 10px 15px 55px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.n-info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/Knob_Info.png');
}
.n-success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('http://sd-1.archive-host.com/membres/images/3347790973941088/Knob_Valid_Green.png');
}
.n-warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/Knob_Attention.png');
}
.n-error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/Knob_Remove_Red.png');
}
 </style>

Les snippets à copier-coller (HTML)

Quelque soit le message que vous voulez afficher :

  1. Créez un + Widget / HTML
  2. Copiez-collez le code fourni en remplaçant le texte donné par défaut par le vôtre.

 

Insérer un message d'information

 <div class="n-info">Ceci est un message d'information</div>  
Ceci est une importante information.
La boîte s'agrandit quand le message est plus long.

Insérer un message positif

<div class="n-success">Ceci est un message positif</div>  
Hourra ! Ce message est un message encourageant et positif !

Insérer un message d'avertissement

<div class="n-warning">Ceci est un message d'avertissement</div>  
Attention ! Ce message vous met en garde contre une erreur !

Insérer un message d'erreur

<div class="n-error">Ceci est un message d'erreur</div>  
C'est ce qu'il ne faut surtout pas faire !  
Flèche vers le haut

Modèle n°3 : simple, tout en rondeur, avec des icônes

Pour utiliser ce modèle de notes, commencez par intégrer la feuille de style correspondante dans votre site, puis copiez-collez les morceaux de code dont vous avez besoin dans des espaces + Widget/HTML. Mettez-y vos propres textes bien entendu !

Source et aperçu

Aperçu des notes

Source du code : plugin "note" de Dokuwiki

La feuille de style (CSS)

  1. En mode admin, cliquer sur Paramètres > Modifier le header.
  2. Dans le cadre qui s'affiche, copier-coller le code suivant et enregistrer la modification :  
<style type="text/css">

.noteclassic, .noteimportant, .notewarning, .notetip {
  margin: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 70% !important;
  min-height: 32px;
  clear: both;
  text-align: justify;
  vertical-align: middle;
  border-collapse: collapse;
  padding: 15px 20px 15px 80px;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
 
.noteclassic {
  /*border: 1px solid #99D;*/
  color: #99D;
  background-color: #eef;
  background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/note.png');
}
 
.noteimportant {
  /*border: 1px solid #ffc45f;*/
  color: #ffc45f;
  background-color: #ffc;
  background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/important.png');
}
 
.notewarning {
  /*border: 1px solid #d99;*/
  color: #ca7b7b;
  background-color: #fdd;
  background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/warning.png');
}
 
.notetip {
  /*border: 1px solid #9d9;*/
  color: #7acb8c;
  background-color: #dfd;
  background-image: url('http://sd-1.archive-host.com/membres/images/3347790973941088/tip.png');
}

</style>

Les snippets à copier-coller (HTML)

Insérer un message d'information

<div class="noteclassic">Ceci est un message d'information</div>
Ce message est un simple message d'information, une notule. Que se passe-t-il si le message est long ? Aucun problème, le cadre s'agrandit de lui-même !

Insérer une astuce

<div class="notetip">Ceci est une astuce</div>
Ce message peut afficher une liste d'astuces :
- astuce n°1
- astuce n°2
- astuce n°3

Insérer un avertissement

<div class="notewarning">Ceci est un avertissement</div>
On peut mettre l'avertissement en valeur avec une bordure rouge (qui se trouve dans la CSS, mais désactivée). Il suffit d'enlever la mise en commentaires pour la réactiver.

Insérer un rappel important

<div class="noteimportant">Ceci est un rappel important</div>
On peut aussi encadrer le rappel pour le faire ressortir (bordure à activer dans la CSS).
Flèche vers le haut

Modèle n°4 : le plus complet (11 messages différents)

Pour utiliser ce modèle de notes, commencez par intégrer la feuille de style correspondante dans votre site, puis copiez-collez les morceaux de code dont vous avez besoin dans des espaces + Widget/HTML. Mettez-y vos propres textes bien entendu !

Source et aperçu

Exemples de messages

La feuille de style (CSS)

  1. En mode admin, cliquer sur Paramètres > Modifier le header.
  2. Dans le cadre qui s'affiche, copier-coller le code suivant et enregistrer la modification :  
<style type="text/css">

.fave_css, .home_css, .idea_css, .author_css, .rss_css, .pen_css, .tooledit_css, .alert_css, .comment_css, .lock_css, .book_css {
width: 70%;
border: 1px solid;
margin: 10px auto;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
-moz-border-radius: 18px;
-khtml-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}
.fave_css {
color: #00529B;
background-color: #BDE5F8;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/heart_32.png);
}
.home_css {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(http://sd-1.archive-host.com/membres/images/3347790973941088/home_32.png);
}
.idea_css {
color: #9F6000;
background-color: #FEEFB3;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/lightbulb_32.png);
}
.author_css {
color: #2E2D2D;
background-color: #A1C2C7;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/user_32.png);
}
.rss_css {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(http://sd-1.archive-host.com/membres/images/3347790973941088/rss_32.png);
}
.pen_css {
color: #2E2D2D;
background-color: #C8E0C8;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/pencil_32.png);
}
.tooledit_css {
color: #554529;
background-color: #F1C983;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/tools_32.png);
}
.alert_css {
color: #2E2D2D;
background-color: #D25F66;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/warning_32.png);
}
.comment_css {
color: #2E2D2D;
background-color: #A6C8D2;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/comment_user_32.png);
}
.lock_css {
color: #2E2D2D;
background-color: #FFBABA;
background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/lock_32.png);
}
.book_css {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url(http://sd-1.archive-host.com/membres/images/3347790973941088/address_book_32.png);
}

</style>

Les snippets à copier-coller (HTML)

Icône coeur

<div class="fave_css ">
Boîte de message avec une icône "coeur".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône maison

<div class="home_css">
Boîte de message avec une icône "maison".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône ampoule

<div class="idea_css">
Boîte de message avec une icône "ampoule".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône auteur

<div class="author_css">
Boîte de message avec une icône "auteur".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône RSS

<div class="rss_css">
Boîte de message avec une icône "RSS".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône crayon

<div class="pen_css">
Boîte de message avec une icône "crayon".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône d'édition

<div class="tooledit_css">
Boîte de message avec une icône d'édition.
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône d'avertissement

<div class="alert_css">
Boîte de message avec une icône d'avertissement.
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône de commentaire

<div class="comment_css">
Boîte de message avec une icône de commentaire.
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône cadenas

<div class="lock_css">
Boîte de message avec une icône "cadenas".
</div>
Voici un moyen élégant de transmettre des messages, non ?

Icône livre

<div class="book_css">
Boîte de message avec une icône "livre".
</div>
Voici un moyen élégant de transmettre des messages, non ?
Flèche vers le haut

Modèle n°5 : un système de notation à 6 niveaux

Pour utiliser ce modèle de notes, commencez par intégrer la feuille de style correspondante dans votre site, puis copiez-collez les morceaux de code dont vous avez besoin dans des espaces + Widget/HTML. Mettez-y vos propres textes bien entendu !

Source et aperçu

Exemples de messages

La feuille de style (CSS)

  1. En mode admin, cliquer sur Paramètres > Modifier le header.
  2. Dans le cadre qui s'affiche, copier-coller le code suivant et enregistrer la modification :  
<style type="text/css">

.note0, .note1, .note2, .note3, .note4, .note5  {
  margin: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 70% !important;
  min-height: 32px;
  clear: both;
  text-align: justify;
  vertical-align: middle;
  border-collapse: collapse;
  padding: 15px 20px 15px 80px;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}
 
.note0 {
  border: 1px solid #F66;
  background-color: #FAEBD7;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note0.png);
}
 
.note1 {
  border: 1px solid #C9C;
  background-color: #FCF;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note1.png);
}
 
.note2 {
  border: 1px solid #99F;
  background-color: #CCF;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note2.png);
}
 
.note3 {
  border: 1px solid #996;
  background-color: #E9E9BE;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note3.png);
}
 
.note4 {
  border: 1px solid #C93;
  background-color: #FFE7B3;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note4.png);
}
 
.note5 {
  border: 1px solid #9C6;
  background-color: #CF9;
  background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/note5.png);
}

</style>

Les snippets à copier-coller (HTML)

Insérer un 0/5  

  <div class="note0">Je mets 0 à ce produit</div>  
Une note avec 0 point
Mauvais, raté, à éviter, dangereux, obsolète...

Insérer un 1/5

<div class="note1">Je mets 1 à ce produit</div>
Une note avec 1 point
Sans intérêt, peu fiable, faible, pas fini, peu de fonctions...

Insérer un 2/5

<div class="note2">Je mets 2 à ce produit</div>
Une note avec 2 points
Pas très utile, pas terrible, simple, ancien, facultatif...

Insérer un 3/5

<div class="note3">Je mets 3 à ce produit</div>
Une note avec 3 points
Pas mal, pratique, peut mieux faire, prometteur, à suivre...

Insérer un 4/5

<div class="note4">Je mets 4 à ce produit</div>
Une note avec 4 points
Très réussi, complet, conseillé, recommandé...

Insérer un 5/5

<div class="note5">Je mets 5 à ce produit</div>
Une note avec 5 points
Le must, un indispensable, le meilleur de sa catégorie, le top...

Rien à déclarer, vraiment ?

Écrire commentaire

Commentaires : 16
  • #1

    jonathan (jeudi, 30 décembre 2010 20:17)

    Super ce tuto! deja sur mon site... =)

  • #2

    macuisineenherbe (mercredi, 04 mai 2011 18:50)

    Au secours !! J'y arrive pas !!Je mets le code CSS puis je fais + Widget / HTML et je mets le code correspondant et je clique sur enregistrer mais là ça m'affiche que le texte, sans mises en forme.
    Quelqu'un peut m'aider svp ?

  • #3

    logogratuit (vendredi, 22 juillet 2011 13:39)

    Enfin une capture d'écran sous MAC, merci!

  • #4

    Isa (admin) (vendredi, 22 juillet 2011 14:38)

    Yeaaaah ! Mac rules ! :)

  • #5

    zeybumhania (dimanche, 24 juillet 2011 11:13)

    Pas encore testé, mais alors quel super travail que de mettre de tels outils à notre disposition!
    Merci

  • #6

    pokemimi (jeudi, 01 mars 2012 20:46)

    J'ai le même problème que Macuisineenherbe, ça ne marche qu'avec les premières notes! Comment faire?

  • #7

    mts47 (dimanche, 15 avril 2012 18:58)

    Super génial !

  • #8

    mistral-cycles (lundi, 29 octobre 2012 11:19)

    Bravo et merci

  • #9

    aloeverasante (samedi, 17 novembre 2012 21:40)

    Merci encore pour ce sujet !
    en plus j'ai vu une de tes vidéo tu as une voix très agréable! ;)

  • #10

    Enzo (samedi, 29 décembre 2012 17:55)

    Mille Merci pour ce TuTo !!!!! Bravo !

  • #11

    samsung galaxy note 2 (lundi, 21 janvier 2013 13:47)

    The people not reading your blogs are missing out a lot of quality contents.

  • #12

    Administrateur (lundi, 21 janvier 2013 16:18)

    Quand je copie le texte pour widget/HTML et que je marque ce que je désire, le texte apparaît de façon normal, pouvez vous m'aider ?

  • #13

    Administrateur (lundi, 21 janvier 2013 16:29)

    C'est bon, je ne savais pas qu'il fallait copier les CSS

  • #14

    titanic1912 (jeudi, 24 janvier 2013 20:54)

    C super!!! J'ai pu embellir tout mon sit grâce a ca!!
    Merci beaucoup a l'administrateur!

    P.S: vous pouvez aller voir mon site : "titanic1912.jimdo.com"
    il y a un quiz, un forum...

  • #15

    testwebmaster (samedi, 30 mars 2013 10:07)

    Bravo pour ce tuto

  • #16

    Inform'astuces (vendredi, 17 janvier 2014 16:53)

    Pour ceux qui n'y arrivent pas :
    Il ne faut pas mettre le petit code HTML dans "Widget/HTML" ! Il faut mettre un élément texte, cliquez sur "HTML" (dans la barre en haut à droite), copier/coller le code puis cliquer sur "Mettre à jour". Là, vous remplacez le texte par celui que vous voulez. Et voilà !

Ruban