Vous savez probablement déjà que l'on peu afficher des infobulles sur son blog en réutilisant un script de la plateforme. Si vous ne le saviez pas, je vous conseil de regarder l'article suivant, cela pourra toujours vous être utile.

=> http://fanstasy-graph.eklablog.net/infobulle-a27953875

Cependant, bien que l'on puisse les personnaliser un peu grace au CSS, elles requiert que le JS soit activé sur le blog, et le contenu est inaccessible. Impossible de faire de copié collé, ou d'y insérer des liens.

Je vous propose de résoudre ce problème en créant vos propres infobulles en full CSS, auxquelles vous pourrez également ajouter des transition pour avoir un affichage un peu plus sympa.

Sans plus attendre, voici la structure HTML

<div class="infoBulle">ELEMENT VISIBLE<span class="infoBulle">CONTENU INVISIBLE</span></div>

Votre élément visible peut aussi bien être du texte, un lien ou une image. Vous pouvez également mettre ce que vous voulez dans le contenu invisible, texte image ou lien ;) Ce code vous permet donc de traiter tous les cas... sauf si vous voulez placer votre infobulle dans un texte comme ci-dessous:

Voici un texte contenant une infobulleAfficher une définition.

Même en spécifiant que div.infoBulle est un élément inline, je n'arriverais pas à ce résultat sur EklaBlog. En effet, l'éditeur HTML place automatiquement les balises <p> autour du texte, et n'autorise pas la présence d'un autre élément de type block (même s'il change de type) dans un paragraphe.
Ainsi, si j'écris :

<p> Du texte <div style="display:inline;"> Une boite </div> et du texte </p>

Cela sera corrigé à l'édition en :

<p> Du texte </p> <div style="display:inline;" > Une boite </div> <p> et du texte </p>

J'aurais donc deux paragraphes et ma boite entre les deux.

Pour régler ce problème, il faut utiliser une balise qui est par défaut de type inline. Par exemple <em> (italique) <strong> (gras) ou <a> (lien)

Si vous utiliser l'une de ces balises à la place de <div>, vous ne pourrez pas l'utiliser à nouveau à l'intérieur du <span>. Privilégiez donc le premier code (avec <div> et <span>) tant que vous pouvez.

Dans mon exemple, j'ai choisi la balise <strong> Ce qui me donne le code suivant :

<strong class="infoBulle">Mon texte visible<span class="infoBulle">Je ne <em>peux pas<em> réutiliser la balise <a href="#">strong</a></span></strong>

Passons au CSS. Je vais travailler sur mon premier code avec div (vous n'aurez qu'à arranger un peu si vous devez changer de balise). La première chose à faire est de définir les deux états de la balise span (et donc de l'infobulle), c'est à dire visible et invisible.

div span.infoBulle{
   visibility:hidden; /*masque l'infobulle*/
   position: absolute; /*permet de la faire sortir de div */
   margin-top: -Xpx; /*déplace vers le haut*/
   margin-left: -Xpx; /*déplace vers la gauche*/
   propriété : valeur; /*personnalisez*/
}

Voici l'état invisible.
Modifier le X de margin-top et margin-left pour placer votre infobulle à côté, au dessus ou en dessous du texte visible.

div.infoBulle:hover span.infoBulle {
   visibility: visible;
}

Et voici l'état visible. Il suffit de mettre visibility :visible;

Avec ces deux codes vous devriez avoir votre texte invisible qui apparait et disparait. Passons donc à la partie un peu plus fun : la personnalisation. Nous allons placer tout nos styles dans div span.infoBulle. Ça peut sembler un peu étrange étant donné que c'est l'état invisible, mais cela nous garantie que nous aurons tout au moment d'afficher l'infobulle. 
Je vous laisse personnaliser ça comme vous voulez, et je passe directement aux transitions. Si vous voulez des effets différents, je vous invite à lire les deux articles suivants :

=> Transition
=> Transform

Dans mes exemples, j'ai utiliser rotate, scale ainsi que la propriété opacité que vous devriez connaitre (sinon, allez jeter un oeil à cet article)

div span.infoBulle{
   visibility:hidden;
   position: absolute;
   margin-top: -30px;
   margin-left: -30px;
   background:  black;
   color: silver;
   transform:  scale(0) rotate(20deg);
   opacity: 0;
   transition: 300ms;
}

La partie grisée est normalement déjà présente dans votre CSS. Il s'agit du code donné plus haut pour le fonctionnement de l'infobulle.

scale(0) me permet de réduire la taille de l'infobulle jusqu'à la rendre invisible
rotate(20deg) tourne l'infobulle de 20°
opacity: 0 baisse l'alpha de l'infobulle jusqu'à la rendre invisble

Soyons bien d'accord, ce que je viens de rajouter n'a pas pour but de cacher l'infobulle, car elle l'est déjà grâce à visibility : hidden. En revanche, cela me permet, avec transition, de l'afficher et de la masquer d'une façon un peu plus classe ;) C'est ce que je vais définir dans le deuxième code, celui qui rend l'infobulle visible :

div.infoBulle:hover span.infoBulle {
   visibility: visible;
   transform:  scale(1) rotate(0deg);
   opacity: 1;
}

scale(1) redonne à mon infobulle sa taille normale
rotate(0) lui redonne la replace à l'horizontale
opacity:1 la rend visible

Toutes ces modification sont effectuées en 300ms, ce qui permet de faire une transition entre les deux états.

Pourquoi visible: hidden ?

Il est vrai que dans cet exemple j'aurais pu m'en passer, puisque je réduit sa taille à 0*0px. Mais dans tous les autres cas, même si vous mettez opacity: 0, l'élément est toujours accessible sur la page. Je vous conseil donc de le laisser, ça vous évitera d'avoir des problèmes d'affichages si vous vous trompez dans vos propriétés.

Ce tutoriel passe en revu les différents éléments de la barre d'outil EklaBlog (la petite barre blanche au dessus du blog). Comme le sujet un petit peu "touffu", des codes tout prêts sont disponible à la fin de l'article.

• Accéder aux codes

Si vous avez déjà été fouiller dans le code source du blog, vous avez pu remarquer que la menubar est constituée de nombreux éléments distincts. Je vous propose donc de décortiquer tout ça pour commencer. (seuls la structure et les identifiants sont notés)

Si vous connaissez les balises HTML, vous remarquez que la menubar est en grande partie un tableau.

Un tableau se trouve entre les balises <table>. On définit d'abbord la ligne avec <tr> puis les différentes cellules se trouvent entre les <td>
En plus du tableau qui contient presque toutes les informations, nous avons une <div> avant, et une div après le tableau.

La <div> #menubarabsolute contient toute cette structure. Mais elle est masquée par #menubar, c'est pourquoi je vous conseil de travailler en priorité sur ce sélecteur si vous voulez changer le fond ou la couleur de texte par exemple.

#menubar{background: red;}

En ce qui concerne le tableau, chaque ligne appartient à un élément spécifique. Les ID me semblent assez explicites, mais je vais quand même revenir dessus :

#menubar_hide
-> Il s'agit de la petite flèche à droite de la menubar qui permet de la masquer (d'où le "hide" voulant dire "caché")

#menubar_logo
-> La zone contenant le logo d'EklaBlog. Je vous rappelle que même s'il est très facile de le supprimer ou le modifier, ce serait totalement irrespectueux vis à vis de la plateforme

#menubar_section_account
-> La zone contenant votre pseudo et votre avatar réduit

#menubar_notifications
-> Cellule contenant l'icône et le nombre de notification

#menubar_section_content
-> Contenu

#menubar_section_appearance
-> Apparence

#menubar_section_interactions
-> Interactions

#menubar_section_manage
-> Configuration

#menubar_section_help
-> Aide

#menubar_favorites
-> Bouton favoris (invisible pour le fondateur du blog)

La classe menubar_section.menubar_section sert à définir l'apparence des sections (les petites barres blanches verticales). Cependant, toutes les images de sections ne se trouvent pas dans cette classe (notamment pour les favoris, je reviendrais dessus plus loin)

Pour la dernière <div> #menubar_info, il s'agit de la partie utilisée par le staff d'EklaBlog pour noter de cours message à l'intention des utilisateurs

Vous avez certainement remarqué que j'ai oublié ne parler de l'ID #menubar_show. Il s'agit en fait de la flèche permettant de rendre la menubar visible après avoir été masquée. Nous allons donc voir un peu plus en détail comment fonctionne cette flèche

Je ne suis pas sûre que l'explication technique vous intéresse, je dirais donc simplement que hide() et show() sont deux fonctions qui sont appelées au clique pour afficher ou masquer la menubar (et accessoirement, afficher #menubar_show lorsque la menubar est invisible).

#menubar_show et #menubar_hide sont donc deux éléments totalement différents ;)

Pour changer l'image de la flèche (parce que je suppose que c'est ce qu'il vous intéresse), vous pouvez créer des nouvelles images en adaptant la taille de la div et de la cellule. Si vous n'avez pas envie de calculer de nouvelles mesures, vous pouvez faire une unique image sur le même modèle que les flèches de base :

/!\ Les dimensions doivent être identiques. Copiez / collez cette image dans votre logiciel de graphisme pour ne pas vous tromper

Les deux flèches de gauche sont les flèches pour masquer la menubar. Celle du bas est l'image affiché lorsque vous cliquez
A droite, ce sont les flèches pour remettre la menubar

Je le répète, il s'agit de deux éléments différents donc vous devez noter les deux sélecteurs dans votre CSS

Remplacez image par l'url de votre image.

Si avez fait deux images différentes il faut les renseigner séparément : 

Pour ceux qui ne suivent pas, IMAGE1 sera l'image affichée pour masquer la manubar et IMAGE2 l'image pour la remettre.
Si votre image ne fait pas 17px de large, vous devez également préciser sa largeur (remplacez le X)

Attaquons la "grosse" partie.

Les sections sont les éléments de la menubar que l'on peut survoler pour afficher un petit menu, que je vais appeler "onglet". Les notifications et les favoris seront vu un peu plus loin.

Contenu, Apparence, Interactions, Configuration et Aide ont exactement la même structure, je vais donc commencer par ceux là en prenant #menubar_section_content comme exemple. La section du profil est un tout petit peu différente.

Je vous rappelle que .menubar_section est la classe affichant les barre de séparation. Si vous voulez les supprimer il vous suffit d'indiquer qu'il y a pas d'arrière plan :

#menubar_section_content est le sélecteur de cette section. Si vous travaillez sur une autre section, il suffit de remplacer "content" par le nom de la section en question. Tous les sélecteurs sont notés dans la première partie de l'article.

Si vous voulez modifier toutes les sections d'un coup, il faut le noter de cette façon :

Pour ceux qui s'apprête à copier coller le code tel quel, "propriété : valeur;" est à remplacer par les propriétés de votre choix.

Passons maintenant à la petite différence de #menubar_section_account

Vous pouvez voir que l'avatar et le pseudo sont dans un lien qui redirige à la page de l'utilisateur. Par conséquent, si vous voulez appliquer des effets de texte sur vos section (changer la couleur par exemple) vous devez également indiquer a dans le sélecteur. Un exemple sera peut être plus parlant :

Ce code modifiera la couleur de texte de toutes les sections sauf de #menubar_section_account
Pour résoudre ce problème, vous devriez écrire ceci :

Maintenant que vous êtes au point avec les sections, voyons les onglets

Vous avez sûrement remarqué qu'il s'agit d'une liste. Donc pour y accéder en CSS, nous allons utiliser la classe .menubar_section en précisant que nous nous intéressons aux listes contenues dans cette classe :

Il faudra également utiliser le pseudo-class :last-child (traduisez littéralement par "dernier enfant") pour travailler sur la dernière ligne de l'onglet, par exemple si vous voulez ajouter un arrondis :

Si vous voulez changer les images, vous pouvez les faire sur ce modèle, ce qui vous évitera d'avoir à changer la taille des onglets :

La zone bleue correspond à la partie visible au survol. 

Si vous voulez mettre uniquement des couleurs, n'oubliez pas de supprimer l'image de base

Si vous regardez dans le code source, vous verrez que le code des notification est ridiculement court comparé au reste des onglets :

Le contenu des notifications sera chargé dynamiquement lorsque vous cliquerez sur l'icône.

#nb_new_notif est le nombre de nouvelle notification. Quand la balise <span> est vide, c'est simplement qu'il n'y a pas de nouvelle notification ;)
#notification_panel est l'onglet qui affiche les notification. Lorsque le contenu est chargé, il s'agit d'une liste qui contient plusieurs éléments :

Les classes .notif_msg et .notif_date permettent respectivement de modifier l'affichage du texte de la première ligne et de la deuxième ligne du bloc de notification

Voici l'image de base des notification. 
Les parties blanches correspondent au mode d'affichage normal, la dernière étant la dernière ligne de l'onglet "Afficher toutes les notification"
La partie bleue claire indique les nouvelles notifications
Enfin, en bleu foncé, c'est l'état survolé

Pour mettre de la couleur ou une autre image, vous devez utiliser les sélecteurs suivants :

Notifications normales :

Notifications survolées :

Nouvelles notifications :

Bien sûr, comme pour les onglets vu précédemment, vous pouvez utiliser :last-child pour modifier la dernière ligne.

Je passe rapidement sur ce module, car il n'y a pas grand chose à dire, excepté qu'il n'est pas du tout fait comme les autres, donc les images à enlever ou modifier ne se trouvent pas aux même endroits...

La séparation se trouve en background de #menubar_favorites. Pour l'enlever :

En supprimant le fond bleu du survol, on supprime également l'icône du coeur. Il faut la replacer comme ceci :

Le code précédant permet également de changer cette icône. Remplacez les url en bleue par vos images. La première correspond au coeur rouge et la deuxième au coeur gris.

On a trop souvent tendance à l'oublier mais il fait bien partie de la menubar ;)

La barre de séparation se trouve en arrière plan de #menubar_signin

Vous pouvez également modifier les éléments du formulaire (champs de texte et bouton)

Pour finir, les deux boutons qui apparaissent à côté du module de connexion appartiennent à la même classe .menubar_button. Vous n'avez donc qu'à spécifier background : none; pour enlever la séparation

Comme la menubar est assez longue et fastidieuse à modifier, je vous propose quelques codes tout près pour vous éviter de taper des lignes répétitives de code :

Supprimer toutes les barres de séparation 

.menubar_button
.menubar_section:hover,
.menubar_section,
.menubar_separation,
.menubar_button,
#menubar_logo,
#menubar_favorites { background: none;}

Supprimer tout les fonds bleus au survol

#menubar_section_content,
#menubar_section_appearance,
#menubar_section_interactions,
#menubar_section_manage,
#menubar_section_account,
#menubar_section_help,
#menubar_notifications,
#menubar_signin { background: none;
}
#menubar_favorites_btn,
#menubar_nofavorites_btn:hover {
      background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
}
#menubar_favorites_btn:hover,
#menubar_nofavorites_btn {
      background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
}

Menubar visible au survol avec transition (il faut remonter la page pour éviter les 20px de vide entre le contenu du blog et le haut de la fenêtre)

#body {top: 0px;
   border-top: none;
}
#menubar { opacity: 0;
   transition: 800ms;
   -webkit-transition: 800ms;
   -moz-transition: 800ms;
   -o-transition: 800ms;
}
#menubar:hover{ opacity: 1; }

Exemple d'un onglet de notification gris et rouge

#notifications_panel{ background-color: silver;
   border-radius: 0 0 20px 20px;
}
#notifications_panel li { background: none;}
#notifications_panel li:hover {background: rgba(255,255,255,0.5);
}
#notifications_panel li:last-child:hover{  border-radius: 0 0 20px 20px;
   background: rgba(255,255,255,0.5);
}
#notifications_panel .new_notification {background : red; }

Exemple d'onglets gris

.menubar_section ul { background-color: silver;
   border-radius: 0 0 20px 20px;
}
.menubar_section li { background-image:none;}
.menubar_section li:hover { background: rgba(255,255,255,0.5); }
.menubar_section li:last-child {background-image:none;}
.menubar_section li:last-child:hover {border-radius: 0 0 20px 20px; }

Pour suive ce tutoriel, vous avez besoin d'un minimum de connaissance en HTML et en CSS, nous n'utiliserons pas de JS.

On va créer notre menu sous la forme de listes imbriquées. La première liste contiendra les titres visibles, et les sous-listes seront les onglets visibles au survol.
1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS

2- Créez votre première liste (les titres visibles)

3- Enfin, créez vos sous listes qui apparaitrons au survol

4- N'oubliez pas d'ajouter vos liens

Ne modifiez pas le code suivant, il permettra à votre menu de fonctionner correctement.

Passons maintenant à la personnalisation :

La "barre" contenant vos titres visibles.

Le code suivant correspond à vos titres visibles.

Code pour les onglets visibles au survol.

Mettez votre HTML dans un module simple. Puis modifier votre id dans le css de la manière suivante :

"position: absolute" rend votre menu indépendant par rapport aux autres éléments de la page. Déplacez le ensuite en changeant les valeurs de "top" et "left"

Pour plus d'information, je vous renvoie à l'article suivant :
=> http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132