Ce billet est une traduction du blog d'Owen Leonard.
Une des options de personnalisation de l'OPAC de Koha est de pouvoir ajouter un menu de navigation sur la gauche. Comme pour opacheader, il suffit d'ajouter du code HTML dans une préférence système : OpacNav (Koha manque de rigueur pour les conventions de nommage des préférences).
Si c'est la première fois que vous installez Koha, il devrait y avoir un texte par défaut dans votre préférence OpacNav, "Importants links here". Ce comportement peut nous ammennez à se poser la question "Des liens importants, mais des liens vers quoi ?", mais il s'agit juste d'un texte destiné à faire connaitre cette option de personnalisation. Si vous supprimez le contenu d'OpacNav, la colonne de gauche disparaîtra de la plupart des pages. A l'exception de la colonne des facettes sur la page des résultats de recherche ainsi que le menu du profil utilisateur.
L'OPAC des Athens County Public Libraries n'a pas de contenu dans OpacNav pour deux raisons : Premièrement, notre navigation est dans un menu horizontal dans l'entête de l'OPAC; Enfin, avoir une bare de menu sur la gauche occupe un espace précieux que nous préférons laisser aux informations dont l'utilisateur a vraiment besoin.
D'autres bibliothèques préfèrent ajouter du contenu à la préférence OpacNav parce que cela répond aux attentes de leurs utilisateurs (comme ce fût le cas pour nous dans nos anciens designs). Par chance, OpacNav offre la même liberté qu'opacheader concernant l'apparence et le comportement.
Créer le menu personnalisé
OpacNav est encore plus facile à utiliser qu'opacheader car sa position dans le template ne cause pas de problèmes de clear/float comme nous l'avons vu dans l'article sur opacheader. J'utilise Listamatic pour trouver des designs de listes. Quelque chose de simple fera l'affaire : la liste de Batiste Bieler. Collons le HTML dans la préférence OpacNav :
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
Et collons la CSS dans notre feuille personnalisée (spécifiée dans opaccolorstylesheet) ou dans la préférence système OPACUserCSS :
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}
#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}
#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}
#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }
Facile. Maintenant il faut adapter un peu notre menu aux menus voisins tels que celui du profil utilisateur.
Le menu des utilisateurs
Le menu des utilisateurs apparait sur certaines pages si vous êtes connecté à votre compte. Ce menu vous renvoie vers la page de votre compte (vos emprûnts, retards, réservations), vos amendes, vos tags, etc. Ce menu utilisateur, s'il apparaît, apparaît en dessous de votre nouveau menu personnalisé.
Après avoir ajouté ce menu personnalisé, connectez vous à votre OPAC pour voir le résultat sur la page des utilisateurs.
C'est déjà pas mal, mais ça manque encore un peu d'intégration avec le menu existant. Je vais donc régler un peu les propriétés suivantes :
- border color
- margin
- padding
- width
Voici la nouvelle CSS :
#navcontainer {
margin-right:0.5em;
padding-top:1em;
}
#navlist li {
display: inline;
/* for IE5 and IE6 */
}
#navlist {
width: 9em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 1em;
padding: 0;
border-top: 1px #979797 solid;
border-left: 1px #979797 solid;
border-right: 1px #979797 solid;
}
#navlist a {
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #979797 solid;
text-align: center;
text-decoration: none;
color: #006699;
}
#navlist a:hover { background-color: #D4E2FF; }
C'était les bases. Vous pouvez chercher d'autres menus sur Listamatic. Et rappellez vous, vous n'êtes pas limité à la navigation quand vous utilisez OpacNav. Vous pouvez ajouter n'importe quel type de contenu statique. La Rockingham Free Public Library affiche ses horaires d'ouverture. La Polytechnic Institute of NYU’s Bern Dibner Library a quand à elle un widget Meebo permettant la messagerie instantanée entre les utilisateurs de l'OPAC et l'équipe de la bibliothèque.
