Installer la Woah Bar

La Woah Bar est une barre de notification qui permet d'afficher en haut de votre site un message qui est, de fait, mis en vedette et en évidence. C'est une alternative à la fameuse Hello Bar (voyez ce tutoriel pour installer la Hello Bar dans Jimdo) qui a l'immense avantage d'être gratuite, alors que la Hello Bar est payante si on veut en faire un usage non bridé et profiter de ses statistiques. L'inconvénient de la Woah Bar, c'est que la personnalisation du design de la barre (choix de la couleur de fond, de la taille du texte, etc... ) ne se fait pas via une jolie console avec prévisualisation de l'aperçu comme la Hello Bar. Pour le reste, elle est gratuite et cela la rend d'autant plus précieuse !

Aperçu du résultat et démonstration

Voici tout de suite un aperçu de la Woah Bar :

La Woah Bar : pratique pour attirer l'oeil !
La Woah Bar : pratique pour attirer l'oeil !

Si vous voulez tester la Woah Bar par vous-même, vous pouvez :

Flèche vers le haut

Etape 1 - Mise en place des scripts

Première chose à faire, très facile : installer le moteur qui fait tourner la Woah Bar.

Où ça se passe ?

En mode Admin, cliquez sur Paramètres > Insérer dans le header. C'est dans la fenêtre de saisie que vous copierez-collerez le code du "moteur" de la Woah Bar.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Le code

Comme j'ai déposé les scripts et les images chez un hébergeur, vous n'avez rien à faire, sinon du copier-coller - pratique, non ? Voici le code à insérer en premier dans le cadre de saisie qui apparaît :

<!-- Moteur de la Woah Bar -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript">
</script>

<script src="http://sd-1.archive-host.com/membres/up/3347790973941088/WOAHbar.js" type="text/javascript">
</script>

<!-- Fin du moteur de la Woah Bar -->

N'oubliez pas d'enregistrer (bouton en bas) pour que ces changements soient pris en compte. Notez que la barre n'apparaît pas à cette étape : normal, puisque vous avez seulement installé son moteur, mais il manque la carrosserie.

Flèche vers le haut

Etape 2 - Personnalisation du design

Maintenant, on s'attaque à la carrosserie précisément : c'est dans la feuille de style qu'on choisit de quelle parure on va habiller notre barre.

Où ça se passe ?

Comme dans l'étape 1, en mode admin, allez dans Paramètres > Modifier le head. Dans le cadre de saisie qui apparaît, juste sous les scripts insérés plus haut, copiez-collez le code CSS ci-dessous.

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* style de la woahbar */

.woahbar {
position: absolute; /* pour avoir une Woah bar qui colle au haut de la fenêtre, remplacez "absolute" par "fixed" */ 
top: 0px;
left: 0px;
width: 100%;
height: 20px;  /* hauteur de la barre */
z-index: 100;
padding: 5px 0 5px 0;
text-align: center;
font-size: 12px;  /* taille de la police dans la barre */
color: #fff;  /* couleur de la police dans la barre */
background-color: #262626;  /* couleur de fond de la barre */
border-bottom: 2px solid orange;  /* couleur de la bordure inférieure de la barre */
-webkit-box-shadow: 0 4px 2px -2px #555;
-moz-box-shadow: 0 4px 2px -2px #555;
box-shadow: 0 4px 2px -2px #555;
}

.woahbar a {
color: orange !important;
text-decoration: none !important;
}
 
.woahbar-stub {
position: fixed;
top: -10px;
left: 0px;
width: 100%;
height: 19px;
z-index: 200;
padding: 7px 0 5px 0;
text-align: center;
}
 
.woahbar span {
float: left;
width: 95%;
text-align: center;
padding-top: 2px;
}
 
.show-notify {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: orange; /* couleur de fond de la flèche qui surgit quand la barre est remontée */
cursor: pointer;
}


.show-notify:hover {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 3px solid #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.35);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.35);
float: right;
margin-right: 10px;
color: #fff;
width: 35px;
height: 33px;
text-decoration: none;
background-color: #262626; /* couleur de fond de la flèche quand la souris passe dessus */
cursor:pointer;
}

.woahbar-up-arrow:hover {
background: url(http://sd-1.archive-host.com/membres/images/3347790973941088/woahbar-up-arrow-hover.png);
}

.close-notify {
float: right;
margin-top:3px;
margin-right: 22px;
color: #fff;
width: 17px;
height: 19px;
text-decoration: none;
cursor: pointer;
}
 
</style>

Comment personnaliser le code ?

J'ai indiqué dans les commentaires du code (entre /* et */) comment le modifier. Ne touchez pas aux lignes qui ne sont pas commentées ; vous n'avez à personnaliser que celles qui sont commentées.

  • Choisissez le type de barre que vous souhaitez : une qui reste en haut (absolute) ou une qui colle au bord de la fenêtre quand la page défile (fixed)
  • Précisez la hauteur de la barre (20px, 25px... )
  • Indiquez la taille de la police du texte écrit dans la barre (12px, 14px... )
  • Pour le reste, il s'agit essentiellement d'adapter les couleurs de votre barre à celles de votre site, en modifiant la couleur de fond de la barre, celle de la police du texte / des liens et celle des flèches.

Le colorpicker

Pour sélectionner vos couleurs, utilisez ce sélecteur, qui vous donnera le code hexadécimal des couleurs à utiliser (par exemple, #efefef est un gris très clair) :

N'oubliez pas d'enregistrer vos changements pour les valider. La barre n'apparaît pas encore : pas de panique, c'est normal ! Elle n'est pas encore créée : ce sera la dernière étape de ce tutoriel.

Flèche vers le haut

Etape 3 - Insertion du code

Pour finir, on installe la barre en elle-même en écrivant le message qu'elle affichera.

Où ça se passe ?

Dans la barre latérale de votre site, à partir de n'importe quelle page, ajoutez un  Widget/HTML :

Le module Widget/HTML
Le module Widget/HTML

Le code commenté

Dans le cadre de saisie qui apparaît, copiez-collez le code suivant :

<div class="woahbar" style="display: none;">
     Ecrivez votre message ici. Si vous voulez mettre un lien, utilisez cette syntaxe : <a href="http://votre-site.jimdo.com">texte du lien</a>
<a class="close-notify" onclick="woahbar_hide();">
<img class="woahbar-up-arrow" src=
    "http://sd-1.archive-host.com/membres/images/3347790973941088/woahbar-up-arrow.png" alt="" />
</a>
</div>
<div class="woahbar-stub" style="display: none;">
    <a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="http://sd-1.archive-host.com/membres/images/3347790973941088/woahbar-down-arrow.png" alt="" /></a>
</div>

Personnaliser le code

Dans le code, écrivez votre message personnel. Validez et repassez en mode visiteur : votre Woah Bar est là ! (Notez d'ailleurs qu'elle disparaît toujours quand vous êtes en mode Admin).

Z'avez des trucs à dire ?

Écrire commentaire

Commentaires : 23
  • #1

    sitetest2012version2 (jeudi, 30 août 2012 13:43)

    Bonjour, j'ai un problème avec la Woah bar, en fait moi je n'ai pas de header c'est le fond du site avec une grande marge, comme sur votre site. Le problème c'est que quand je l'installe, c'est le body qui bouge et pas le background ... Si vous ne comprenez pas mon problème, je vous donne rendez-vous sur mon site test ...

    J'espère que vous arriverez à trouver une solution,

    Pierre.

  • #2

    Isa (admin) (jeudi, 30 août 2012 13:57)

    Bonjour Pierre,
    Alors là, le souci, c'est qu'autant je suis capable d'adapter le code de la Woah Bar à Jimdo pour empêcher les conflits (j'ai modifié pas mal le code), autant je ne vois pas quoi faire dans votre cas : la Woah Bar est faite pour repousser le contenant du site (type "wrapper", mais elle ne pourra pas déplacer l'image de fond d'un élément, et particulièrement pas du body... Il faudrait renoncer à cette image de fond et la mettre en logo ou header pour qu'elle profite elle aussi de l'effet "push".
    Bons tests ;)
    Isa

  • #3

    Pierre Lemière (jeudi, 30 août 2012 20:55)

    Bonjour,

    Merci de votre réponse, comment mettre l'image de header en logo ?

    Pierre.

  • #4

    Jean Claude Bouisseren (dimanche, 27 janvier 2013 12:23)

    Bonjour Isa,
    Sur le site en sujet en construction, j'ai souhaité installé la Woah Bar, mais lorsque j'installe le code 2 dans le Head comme précisé, et lorsque j'enregistre j'ai un message : un incident est survenu...... et le message s'annule. Je ne modifie pas le code pourtant. Y a t'il une incomptabilité avec mon desing F 4046 que j'ai en partie personnalisé ?
    Jean Claude

  • #5

    Léo Lagrange, fédération du Tarn (lundi, 11 février 2013 04:43)

    Bonjour, j'ai le même problème que Jean-Claude.
    Pouvez-vous me dire pourquoi cela ne fonctionne pas ?
    Merci d'avance

    la fédé Léo du Tarn

  • #6

    laligue112 (vendredi, 15 février 2013 20:45)

    Je suis désolé, mais je ne comprend rien l'étape 2, pourriez-vous m'expliquez ?

  • #7

    Amélie Gouesbier (mercredi, 20 février 2013 20:06)

    moi non plus, c'est exactement le même problème

  • #8

    favoris (mercredi, 20 février 2013 21:07)

    @Jean-Claude Bouisseren et @Leo Lagrange : je viens de tester le code sur un site de test et aucun problème au moment de l'enregistrement. Donc le code est peut-être incompatible avec votre design (mais je ne vois pas pourquoi... ) ou, plus probable, Jimdo faisait une maintenance au moment où vous avez essayé de l'installer. Ou enfin, si vous avez essayé de personnaliser le code, vous l'avez "abîmé". Essayez de le copier-coller tel quel sans le modifier ; il n'y a aucune raison que cela ne fonctionne pas.

    @Laligue : il suffit de copier-coller le code donné à l'endroit indiqué. Pour personnaliser les couleurs, il faut suivre les indications fournies dans le code et s'aider du colorpicker pour récupérer les codes hexadécimaux correspondant aux couleurs voulues.

    @amélie : même problème que Laligue ou que Léo ? Dans les deux cas, reportez-vous aux réponses que j'ai faites ci-dessus.

    Bon courage !

  • #9

    Bouisseren Jean Claude (samedi, 23 février 2013 10:57)

    Bonjour,
    Merci Isa pour ta réponse. Suivant tes conseils j'ai procédé à la mise en place des 2 codes dans le head, sans faire aucune modification. Helas le résultat ne change pas. A savoir : lors de l'affichage du 2eme code à l'enregistrement un message d'érreur s'affiche, ce 2eme code ne s'affiche pas dans le head. Peut-être des design Jimdo "incompatible". Sites concernés : www.elceka-1max2karting.com ---- www.municipales-juvignac.jimdo.com ( ce dernier en phase construction ). Merci encore pour ton attention.
    Bise.

  • #10

    favoris (dimanche, 24 février 2013 13:19)

    @Jean-Claude : attention, le 2e code ne s'installe par dans le Head, mais dans un Widget-HTML de la barre latérale de votre site (celle où il y a la pub de Jimdo) : revoyez l'étape 3 du tuto. C'est sans doute pour cela que vous avez un message d'erreur ;) Tenez-moi au courant !

  • #11

    favoris (dimanche, 24 février 2013 13:23)

    @Jean-Claude : le premier code doit être mis tout en haut du cadre de saisie (en premier, rien ne doit être avant ce code dans la fenêtre de saisie de "Modifier le Header") sans quoi ça ne marche pas. Vérifiez cela aussi ?

  • #12

    Bouisseren Jean Claude (dimanche, 24 février 2013 17:55)

    Bonjour ISA,
    J'ai bien reçu le message et tes explications. Problème réglé en plaçant dans le head les codes 1 et 2 en premiers dans la fenêtre. Un détail donc qui a son importance. Merci encore.
    J'en profite pour te signaler que derniérement , j'ai trouvé sur le site Ze Tuto à la page : http://zetuto.jimdo.com/tutos/ , les mêmes notes qui ont du style que tu proposes " Enrichir le contenu" Styler les Listes.
    Je trouve pas élégant du tout de s'approprier ( si cela est le cas ? ) le travail d'une autre personne... !.
    Bise
    Jean Claude

  • #13

    Ze Tuto (jeudi, 28 février 2013 20:43)

    @ Jean Claude (Bouisseren) bonjour Jean, je crois qu'il y a un malentendu, je n'ai pas copié de tutoriels de ce site. Le tutoriel "messages stylés" que je propose sur mon site, c'est moi qui l'ai trouvé, par hasard. Ce Tuto ne se trouve d'ailleurs pas sur ce magnifique site ( il est différent).

    Cordialement, Ze Tuto.

  • #14

    aloevera-for-ever (mardi, 12 mars 2013 21:33)

    Bonjour,
    je viens d'essayer de mettre les scripts au 2eme cela ne marche pas Jimdo " a un problème"
    j'ai essayé sur un 2e site idem ! c'est à s'arracher les cheveux cela fait 5 fois que j'essaie et avec le script initial sans l'avoir changé :( pffffff
    pas facile dès fois

  • #15

    favoris (mardi, 12 mars 2013 21:56)

    @Aloevera-for-ever : accrochez-vous ! Je me permets de vous renvoyer aux commentaires n°11 et 12 un peu plus haut. Vous verrez que la place des codes a son importance. Bon courage !

  • #16

    aloevera-for-ever (mardi, 12 mars 2013 22:03)

    Oui merci , j'ai vu après et je viens de tout refaire sur 2 sites ... en mettant les 2 codes bien en haut du header et sans changer les codes , déja il n'y a plus de problème avec jimdo lol
    mais cela ne fonctionne toujours pas :((
    au bout de 1h j'arrête ... je réessayerai à un autre moment
    merci tout de même pour tout le reste :D

  • #17

    favoris (mercredi, 13 mars 2013 09:29)

    @aloevera-for-ever : je vois plusieurs raisons pour lesquelles cela ne fonctionne pas :

    1 - interaction avec le script "quickribbon" inséré pour afficher le ruban dans le coin supérieur droit de la fenêtre.

    2 - Dans votre code source, il traîne un autre appel à Jquery (inséré dans Paramètres > Modifier le head) pour un bouton scroll to top. Il doit y avoir conflit entre les deux appels à Jquery.

    3 - Il y a peut-être conflit entre le script de la Woah Bar, l'ascenseur que vous avez installé et le bouton de retour en haut de Jimdo. Puisque Jimdo propose une fonction native pour remonter en haut, je vous recommande d'abandonner l'ascenseur à deux boutons. Désinstallez-le et nettoyez le code de votre Header.

    Bon courage !

    Isa

  • #18

    Nathalie Démaret-Portelli (lundi, 29 avril 2013 15:23)

    Bonjour,
    J'ai aussi essayé de mettre en place cette Woahbar mais je ni arrive pas. Disons que je rentre le 1er code dans le header sans problème mais pour le 2ème c'est pas possible. Au moment de l'enregistrer j'ai un message disant qu'un problème est survenu et que l'enregistrement ne s'est pas fait. J'ai tenté à plusieurs reprises sans succès.
    Quelqu'un pourrait m'aider, svp ?
    Merci ;-)

  • #19

    Isabelle (jeudi, 04 juillet 2013 17:32)

    @Nathalie : je vois que la Woahbar est en place sur votre site : apparemment, vous avez réussi finalement. (Le problème venait sans doute d'une maintenance des serveurs chez Jimdo ; en tout cas, c'est le message qui s'affiche quand c'est le cas pour moi !)

  • #20

    TonRetroWeb (samedi, 07 septembre 2013 16:39)

    Salut, j'ai un petit problème...
    Quand je met le deuxième code "Personnalisation du design" sa me met un méssage d'érreur : La structure HTML est invalide et n'a pas été enregistrée.
    Et la vue que je suis nul en html je vais pas allez loin.. Quelqu'un peux m'aider plz

  • #21

    Isabelle (vendredi, 04 octobre 2013 21:49)

    @tonretroweb : je pense qu'il faut revoir les codes utilisés - une erreur a dû se glisser quelque part... Sinon, essaie Snacktools (outil "notification") ici : http://www.notifysnack.com/

  • #22

    Mme Philippe (lundi, 14 octobre 2013 19:59)

    Bonjour
    je viens suivre votre tuto, sur mon site c'est spécial en effet ça fonctionne mais uniquement dans le Widget/HTML et dans la barre latérale auriez vous une idée ?

  • #23

    Isabelle (mercredi, 16 octobre 2013 13:29)

    @Mme Philippe : en mode admin, la Woah Bar reste dans la colonne latérale. En repassant en mode visiteur, elle s'affiche au bon endroit. Si ce n'est pas le cas, c'est soit parce que le template n'est pas compatible avec elle, soit parce que vous avez fait une erreur en insérant les codes. Reprenez alors l'installation pas à pas pour régler le problème.
    Bon courage !

Ruban