Le plugin CSS Editor d’Omeka Classic

Vous hébergez votre bibliothèque numérique grâce au Pack Nakalona d’Huma-Num et vous souhaitez un peu de personnalisation visuelle, voir même donner une vrai identité visuelle à votre site ?

Oui, quelques thèmes sont installés.
Oui, on peut mettre ses logos et personnaliser un peu l’affichage.

Mais on se retrouve vite limité…

sauf si…

on utilise le plugin CSS Editor !

Ne vous emballez pas toutefois car…

CSS Editor ne fait pas tout :-/

D’abord, le CSS en soi ne permet pas de tout faire sur le rendu graphique d’une page web : cela permet de modifier l’affichage, la police, la couleur, voir même la mise en page, etc. mais cela ne permet pas de modifier les contenus (enfin, un tout petit peu mais très ponctuellement…). Pensez au CSS comme à une feuille de style sur votre éditeur de texte préféré : ça rend joli (ou pas), ça rend plus régulier, plus propre, plus « carré », mais ça n’écrit pas du contenu pour vous.

Il y a plusieurs générations de CSS. Le CSS3 est super cool car il permet de faire plein de jolies choses… mais ne bavons pas trop : CSS Editor, le plugin d’Omeka Classic (version 1.1 mise à jour le 20 mars 2019 et disponible à ce jour sur le site officiel d’Omeka bref la version dispo sur le pack Nakalona d’Huma-Num) à une limitation, il ne prend pas en charge toutes les fonctionnalités de CSS3…

Message aux connaisseurs : notamment, il nettoie le CSS de certaines pseudo-classe et pseudo-éléments et donc les seules dispo actuellement sont ‘first-child’, ‘link’, ‘visited’, ‘active’, ‘hover’,’focus’. Pour être précise, ce n’est pas complètement sa faute, il utilise un comportement défini par Omeka lui-même (cf. mon ticket pour demander que cela en soit autrement… on ne sait jamais, j’ai tenté ma chance !)

CSS Editor permet de faire plein de trucs 🙂

Je passe par quelques exemples. Si vous souhaitez aller plus loin, tentez de poser vos questions en commentaire, sait-on jamais, je pourrai avoir le temps de vous répondre 😉

Sur les images ci-dessous, vous pouvez voir le résultat en haut, et le code CSS en bas. Plus bas dans ce billet, vous trouverez l’intégralité du code CSS à copier-coller ↓ (zinquiétez pas, ya pas de droit, c’est pô créatif du code CSS… enfin, pas celui-là 😛). Encore plus bas dans ce billet, vous trouverez quelques explications pour comprendre quelques bases du CSS ↓ et être (je l’espère) capable de reproduire, modifier, améliorer, mettre à votre goût.

Exemple 1 : Afficher les créateurs les uns à la suite des autres et ajouter un (joli ?) cadre

Exemple 2 : Afficher la date juste après l’intitulé de la métadonnée « Date »

Exemple 3 : Lister les sources sous forme de liste à puce personnalisée

L’exemple complet à copier-coller

/* Exemple CSS pour Omeka / plugin CSS Editor par AnneGF @ Litt&Arts */

/* Afficher les créateurs les uns à la suite des autres, plutôt que les uns en dessous des autres */
#dublin-core-creator .element-text { /* sélection de la class="element-text" sous l'élément ayant pour identifiant dublin-core-creator */
display: inline; /* affichage "en ligne" */
margin-left: 10px; /* marge à gauche de 10px permettant d'espacer les créateurs */
}

#dublin-core-creator {
border: 1px solid grey; /* ajout d'un cadre ligne (solid) d'épaisseur 1px, gris */
padding: 5px; /* ajout d'un espace interne au bloc de 5 px pour que la ligne ne soit pas "collée" au contenu */
}

#dublin-core-creator h3 {
margin-top: 2px; /* réduction de l'espace au-dessus du titre de niveau h3 (en l'occurrence "Créateur") à 2px */
}

/* Afficher la date sur la même ligne que le le titre de la métadonnée "Date" */

#dublin-core-date h3, #dublin-core-date .element-text { /* ici, on sélectionne deux ensembles d'éléments en séparant les sélecteurs par une virgule */
display: inline; /* affichage "en ligne" */
}

/* Afficher les sources sous forme de liste */

#dublin-core-source .element-text {
display: list-item; /* affichage de type liste */
margin-top: -12px; /* réduction de la marge supérieur pour resserrer les éléments de la liste entre eux */
margin-left: 15px; /*augmenter la marge à gauche pour aligner avec le titre */
list-style: "- "; /* changer le style de liste (par défaut, des "points") et utiliser des tirets (bien écrire "- " et non "-" sinon on a "-élément" au lieu de "- élément"
}

Quelques explications sur ce code CSS

CSS manipule les éléments HTML (les éléments de la page web) grâce à des sélecteurs. Ça veut bien dire ce que ça veut dire : CSS sélectionne un élément, puis lui applique des règles d’affichage, de mise en page, de mise en forme.

Pour bien écrire les sélecteurs, il faut d’abord repérer la métadonnée pour laquelle on souhaite changer l’affichage et repérer son identifiant. Par exemple, pour la métadonnées « Créateur », il s’agit d’une métadonnée Dublin Core dont le nom « standardisé » est « creator » : son identifiant est « dublin-core-creator ». Cet identifiant est présent dans le HTML et permet ainsi la manipulation en CSS.

Le sélecteur pour la métadonnée « Créateur » sera « #dublin-core-creator » : le « # » indique que l’on sélectionne un élément grâce à son identifiant et « dublin-core-creator » est l’identifiant en lui-même.

Le sélecteur « #dublin-core-creator h3 » est plus spécifique et sélectionne un élément de type « h3 » à l’intérieur de l’élément ayant l’identifiant « dublin-core-creator« . Il s’agit, selon ce comment Omeka génère le HTML, du titre de la méta-données qui s’affiche sur les pages.

Une autre façon de sélectionner des choses est d’utiliser leur classe. En effet, en HTML, on peut donner une classe a des éléments et ainsi permettre de manipuler facilement un ensemble d’élément (en sélectionnant tous les éléments qui ont la même classe). Omeka donne la classe « element-text » à tous les éléments qui contiennent les valeurs des métadonnées. Ainsi, on peut manipuler toutes les valeurs de métadonnées définies pour la métadonnées « Créateur » (bref, on peut manipuler tous les créateurs) en utilisant la combinaison de sélecteurs « #dublin-core-creator .element-text » :
– le « # » indique que l’on sélectionne un élément grâce à son identifiant et « dublin-core-creator » est l’identifiant en lui-même ;
– le « . » indique que l’on sélectionne un élément grâce à sa classe et « element-text » est le nom de celle-ci ;
– l’enchaînement des deux sélecteurs « #X .Y » indique que l’on sélectionne les .Y qui sont dans un #X. Ainsi on prend toutes les valeurs de métadonnées de la métadonnées « Créateur ».

Je m’arrête là dans les explications car j’ai peur de rendre les choses trop complexes. Au final, reproduire à partir des exemples devraient suffire en terme de compréhension, non ? Et faire des essais en tout genre aussi surtout !

Ah si… j’oubliais…

Pour connaître les identifiants, deux solutions : soit l’on a de l’intuition et on parle anglais (ça se tente : pour la date, c’est dublin-core-date, pour le sujet, c’est dublin-core-subject), soit on mène son enquête ! Voici les étapes (sous Mozilla Firefox ; cherchez l’équivalent sur votre navigateur) :

  • ouvrir une page de contenu avec son navigateur
  • cliquer droit et choisir « Examiner l’élément » . Un panneau s’ouvre en bas de page.
  • cliquer sur la première icône en haut à droite du panneau (un carré avec une petite flèche), elle devient bleue
  • déplacer la souris dans la page et cliquer (choisir) un titre de métadonnées (par exemple le mot « Créateur »)
  • l’inspecteur (le panneau en bas) se met à jour et amène au niveau du code html en question
  • là lire (décoder) le html :
    <div id= »dublin-core-creator«  class= »element »>
            <h3>Créateur</h3>
             <div class= »element-text« ><a href= »/items/browse?advanced%5B0%5D%5Belement_id%5D=39&amp;advanced%5B0%5D%5Btype%5D=is+exactly&amp;advanced%5B0%5D%5Bterms%5D=Henri+Camille+Danger+%28ill.%29″>Henri Camille Danger (ill.)</a></div>
             <div class= »element-text »><a href= »/items/browse?advanced%5B0%5D%5Belement_id%5D=39&amp;advanced%5B0%5D%5Btype%5D=is+exactly&amp;advanced%5B0%5D%5Bterms%5D=Inconnu+%28grav.%29″>Inconnu (grav.)</a></div>
    </div>

J’ai mis en gras les 3 informations utilisées dans mes sélecteurs : l’identifiant (id) « dublin-core-creator« , le titre de la métadonnées est bien dans un élément « h3 » et les différentes valeurs de métadonnées ont bien toutes la classe « element-text« .

Et maintenant… à vous de jouer !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.