Corriger l'affichage de notices Ermès sur supports mobiles

Chers -thécaires,
Si vous avez un portail fonctionnant avec Ermès, vous vous rendrez compte que l'adaptation sur tablettes et smartphones, que ce soit pour iOS ou android, n'est pas toujours bien gérée.
Prenons l'exemple de l'affichage de notices bibliographiques...

Vous voyez le soucis ? Le fond blanc et les bordures sont en vrac.
Vous pouvez contacter les techniciens, qui vous diront probablement comme à moi qu'ils ne peuvent rien faire.

Voyons donc comment résoudre facilement ce problème...
pour arriver à un résultat correct :

Pré-requis :

- un niveau basique en codage css
- accès aux fichiers du serveur Ermès (si vous avez un informaticien compréhensif, sinon dites-lui de faire la manip. pour vous)

Procédure :

1 - Cherchez le fichier charte.css, normalement dans wwwroot/Skins/Ermes22 (ou autre selon la version que vous avez). Si vous ne savez pas quel sous-dossier Ermes... utiliser, aller sur votre portail via un navigateur, faites un clic droit et "Afficher le code source de la page", vous verrez des lignes de liens bleus avec le chemin des feuilles de style, de la forme : href="/skins/Ermes22/NavigationThematique.css

2 - Cherchez la ligne qui correspond à l'affichage détaillé d'une notice :
#document_02 #notice_longue (aux alentours de la ligne 3000, ctrl+f pour les intimes).
L'image blanche qui sert pour l'arrière-plan est mise en forme par la ligne "background" :

background: url(images/charte/structure/notice_longue.png) no-repeat center bottom;

Il est donc défini que l'arrière-plan, le background, est constitué d'une image appelée notice_longue.png, qu'elle n'est pas répétée (la répétition duplique l'image comme pour une mosaïque) et centrée. Pour info, l'image est un rectangle blanc vertical, qu'on trouve pas loin du fichier charte.css, dans le dossier wwwroot/Skins/Ermes22/images/charte

3 - Comme cette image pose problème, on va la supprimer et la remplacer par une couleur de fond en blanc. Nous allons donc écrire la formule suivante :

background: white repeat center bottom;

ou selon vos préférences

background: #ffffff repeat center bottom;

4 - Nous avons notre couleur blanche de fond, reste à ajouter les bordures pour encadrer la notice et être raccord avec les bordures du titre de l'onglet "Description". On va donc définir une bordure noire de 1 pixel d'épaisseur, à gauche, à droite et en bas de la notice. N'en mettez pas en haut, car elle ne sera pas correctement à sa place. Ajoutez ces lignes :

border-left: 1px solid #000000;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

On obtient donc le code final suivant :

#document_02 #notice_longue {

    clear: both;

    padding: 20px 20px 30px 20px;

    background: #ffffff repeat center bottom;

    border-left: 1px solid #000000;

    border-right: 1px solid #000000;

    border-bottom: 1px solid #000000;

    overflow: auto;

}

5 - Si vous avez des enrichissements, accessibles par l'onglet "En savoir +", il va aussi falloir corriger l'affichage. Toujours dans notre fichier charte.css, cherchez les lignes correspondantes, aux alentours de la ligne 3436 :

#enrichissements {

    clear: both;

    padding: 1px 17px 10px 10px;

    background: url(images/charte/structure/notice_longue.png) no-repeat center bottom;

}

Que vous modifiez en :

#enrichissements {

    clear: both;

    padding: 1px 17px 10px 10px;

    

 background: #ffffff repeat center bottom;

    border-left: 1px solid #000000;

    border-right: 1px solid #000000;

    border-bottom: 1px solid #000000;

}

Vous avez maintenant un affichage de notice correct ! :-)