Afficher des messages d'alertes/stylés
Des messages stylés
Avec Jimdo seulement
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
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 :
Message d'erreur
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 :
Voici d'autres "boîtes messages" (même principe que les précédentes)
Message d'alerte
|
<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
|
<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
Juicers Reviews (mercredi, 29 mai 2013 16:07)
This informative article was exactly what I was trying to find!
medaillessmilitairesgareoult (dimanche, 08 septembre 2013 13:37)
MERCI POUR CES ASTUCES
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
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 ;)
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
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
.: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 :)
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.
.:Nico-Zino:. (dimanche, 22 février 2015 19:19)
D'accord, merci de m'avoir répondu :)
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.
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.
Martine (mardi, 13 juillet 2021 18:04)
Merci beaucoup!!! c'est exactement ce dont j'avais besoin et que je cherchais!!