Barre d'outil [EklaBlog]

30.05.2014

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

Structure de la menubar

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

Les flèches "hide" et "show"

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

#menubar_hide,
#menubar_show { background-image: url("IMAGE");
}

Remplacez image par l'url de votre image.

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

#menubar_hide { background-image: url("IMAGE1");
width: Xpx;
}
#menubar_show { background-image: url("IMAGE2");
width: Xpx;
}

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)

Les sections et les onglets

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.

<td class="menubar_section" id="menubar_section_content">
  <div>
  <img src="/images/menubar/icon_content.png" alt="" class="icon" /> Contenu </div>
  <ul>
  <li onclick="Module.edit('mod', 'article', 'new');">Nouvel article</li>
  <li onclick="Module.create('mod', 'articles');">Nouvelle rubrique</li>
  <li onclick="Module.create('mod', 'html');">Nouvelle page</li>
  <li onclick="Module.edit('mod', 'survey', 'new');">Nouveau sondage</li>
  <li onclick="Module.create('mod', 'newsletter');">Nouvelle newsletter</li>
  <li onclick="Module.create('mod', 'flickr');">Nouvelle galerie Flickr</li>
  <li onclick="Module.create('mod', 'guestbook');">Nouveau livre d'or</li>
  <li onclick="Module.create('mod', 'forum');">Nouveau forum</li>
   <li onclick="Windows.load('mod', 'manage');">Gérer les rubriques</li>
  <li onclick="Windows.load('blog', 'files');">Gérer les fichiers</li>
   </ul>
</td>

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 { background: none; }

#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 :

#menubar_section_content,
#menubar_section_appearance,
#menubar_section_interactions,
#menubar_section_manage,
#menubar_section_help,
#menubar_section_account { propriété : valeur; }

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

<td class="menubar_section" id="menubar_section_account">
     <a href="http://www.eklablog.com/profile/nagalia">
   <img src="https://ekladata.com/iwK1Zo1ze8aMq9k1mAi0f42xeCM@19x19.gif" alt="" class="icon" />
Nagalia
</a>
   <ul>
   <li onclick="Windows.load('membres', 'myprofile');">Mon profil</li>
   <li onclick="Windows.load('membres', 'profile');">Informations personnelles</li>
   <li onclick="Windows.load('membres', 'following');">Abonnements</li>
   <li onclick="Windows.load('membres', 'msg');">Messages</li>
   <li onclick="Windows.load('membres', 'notifications');">Notifications</li>
   <li onclick="Windows.load('membres', 'revenues');">Revenus</li>
  <li onclick="document.location='http://www.eklablog.com/?createblog';">Créer un blog</li>
  <li onclick="logout();">Déconnexion</li>
  </ul>
</td>

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 :

#menubar { color : red; }

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 :

#menubar,
#menubar a { color: red; }

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 :

.menubar_section li { propriété : valeur; }

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 :

.menubar_section li:last-child { propriété: valeur; }

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

.menubar_section li { background-image: none;
background-color: COULEUR;}
.menubar_section li:last-child { background-image: none;
background-color: COULEUR;}

Les notifications

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_panel li { propriété : valeur; }

Notifications survolées :

#notifications_panel li:hover { propriété : valeur; }

Nouvelles notifications :

#notifications_panel .new_notification {propriété : valeur; }

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

Favoris

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 :

#menubar_favorites{background-image: none}

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

#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%;
}

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.

Module de connexion

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

<td id="menubar_signin">
<form action="?" method="post">
<p>
Connexion :
<input type="text" name="pseudo" id="menubar_signin_username" />
<input type="password" name="passe" id="menubar_signin_password" />
<input name="connexion"/>
<input name="remember"/>
<input type="submit" id="menubar_signin_submit" class="button_win" />
</p>
</form>
</td>

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

#menubar_signin { background: none; }

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

.menubar_button { background: none;}

Des codes pratiques

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; }