La personnalisation de l’interface de la base de fiches se fait à deux niveaux :
au niveau de l’administration via de simples formulaires
au niveau des fichiers du contexte Tomcat en remplaçant les ressources par défaut
Possibilité de personnalisation dans l’administration
Les possibilités offertes concernent le nom de la base et les logos. Elles sont accessibles via > Administration > Configuration.
Configuration > Intitulés de la base
Cette page permet d’indiquer les intitulés de la base dans les différentes langues de travail.
L’intitulé long correspond au nom qui est affiché sur la page d’accueil (celle où l’utilisateur s’identifie), par exemple « Intranet de MonOrganisme ». Il sert également de titre général. C’est donc lui qui se retrouvera dans les marque-pages.
L’intitulé court n’est pas pour le moment utilisé directement dans la base de fiches, il est utilisé dans l’exportation vers le moteur de recherche où il précède l’intitulé de la fiche afin d’indiquer l’origine de la fiche.
Configuration > Logos
Cette page permet de modifier trois fichiers image différents :
l’icone 16 x 16 pixels est le fichier qui, sous Firefox, va être utilisé dans l’onglet, la barre d’URL et les marque-pages pour accompagner l’URL ou le titre de la base
l’icone 32 x 32 pixels est l’icone qui apparaît à droite du menu, cet icone sera donc présent en permanence lorsque l’utilisateur est connecté,
le logo d’accueil est l’image qui apparaît au dessus du titre de la base dans la page d’accueil.
Ces trois images doivent être au format PNG. Il est évidemment préférable que l’icone 16 x 16 pixels fasse bien 16 x 16 pixels, idem pour l’icone 32 x 32. Il n’y a pas de contraintes de dimension pour le logo d’accueil.
Agir au niveau du thème de l’application
En jetant un œil au code source des pages générées par la base de fiches, vous constaterez que la plupart des liens vers les ressources graphiques (feuille de style CSS, icones, puces) sont sous la forme theme/css/affichage_menu.css, theme/icons/16x16/menu_link_newsession.png, etc. Ces ressources graphiques sont regroupées au sein d’un « thème ».
Si vous regardez dans le répertoire du contexte de votre application dans Tomcat (là où se trouve WEB-INF), vous verrez que les fichiers theme/css/affichage_menu.css ou theme/icons/16x16/menu_link_newsession.png n’existent pas. En effet, pour tous les fichiers d’un thème (ceux dont le chemin commence par theme/, par exemple theme/css/user.css), l’application procède de la manière suivante :
1) elle vérifie si le répertoire _theme/ existe dans le répertoire du contexte (Notez le trait de soulignement devant theme) et si un fichier s’y trouve avec le même nom (exemple : _theme/css/user.css) ; si le fichier s’y trouve, c’est son contenu qui est transmis au navigateur ;
2) si le fichier n’a pas été trouvé à l’étape 1), c’est le fichier du thème par défaut qui est transmis (ou un message d’erreur si le fichier n’existe pas).
Il est donc assez simple de remplacer un icone par un autre, il suffit de repérer son nom dans le code HTML de la page et de mettre un autre icone du même nom dans _theme/.
Ce mécanisme permet de construire progressivement son propre thème en changeant les icones un à un. Il permet de garder un thème opérationnel après une mise à jour vers une nouvelle version introduisant de nouvelles ressources graphiques puisqu’en cas d’absence dans le thème c’est la ressource par défaut qui est utilisée.
Pour avoir un aperçu de tous les fichiers d’un thème, il faut se plonger dans le code source du logiciel et aller dans fr/exemole/bdfserver/servlets/resources/defaulttheme.
Cas des fichiers CSS
Les feuilles de style CSS contiennent beaucoup plus d’information qu’une image et celles-ci risquent fort d’évoluer au cours du développement du logiciel. En remplaçant une feuille de style existante, on court le risque de passer à côté d’une nouveauté au moment du passage à une nouvelle version. Pour éviter cela, toutes les feuilles de style CSS se contentent d’importer une autre feuille de style portant le même nom avec _1 accolé.
Par exemple, la feuille de style theme/css/user.css contient l’unique instruction suivante : @import url(user_1.css). Ainsi, lorsqu’on voudra personnaliser user.css, on créera le fichier _theme/css/user.css qui comprendra toujours en première ligne @import url(user_1.css) et ensuite les règles personnalisées. Du fait du fonctionnement de CSS, les règles personnalisées prendront le pas sur celle de user_1.css et les règles non écrasées de v[user_1.css]] resteront valides.
Signalons que les feuilles de style sont réparties par grande section de l’interface du logiciel (corpus.css correspond par exemple à la partie de gestion du corpus), elles font toutes appel à une feuille de style commune _theme.css. C’est cette feuille de style qui doit être modifiée pour changer la présentation de la base de fiches (par exemple, en introduisant une image en fond).