Comment personnaliser l’apparence d’une fichothèque en intervenant sur le CSS dans le répertoire custom/ ?

Pour personnaliser le CSS utilisé dans une fichothèque il faut accéder à l’interface de modification des ressources via Gestion des ressources qui se trouve dans Administration. Cette interface donne accès à tous les fichiers « statiques » utilisés par l’interface : Javascript, XSLT et, bien sûr, CSS. Par exemple, les fichiers CSS de l’interface se trouvent dans theme/css/).

Modifier directement les fichiers du thème est possible mais peut poser problème lors d’une mise à jour du logiciel : les corrections et les ajouts apportés par la nouvelle version risquent de ne pas être pris en compte. C’est pour cela qu’existe un répertoire custom/) qui contient des fichiers vides. Ces fichiers vides sont destinés à accueillier vos réglagles personnalisés. Les fichiers pour le CSS sont les suivants :

• custom/fiche.css : CSS inséré dans les gabarits de transformation des fiches en HTML

• custom/fiche_odt.css : CSS inséré dans les gabarits de transformation des fiches en ODT

• custom/theme.css : CSS inséré dans toutes les pages de l’interface

Les autres fichiers de custom/ concernent la personnalisation pour d’autres langages que CSS.

Par exemple, en rajoutant le code ci-dessous dans custom/theme.css), tous les champs de saisie de texte se retrouvent avec un texte jaune sur fond magenta (nous vous laissons juge de l’esthétique d’une telle modification) :

input[type=text] {
    color: yellow !important;
  background-color: magenta;
}

Note : les fichiers CSS sont enregistrés en cache par notre navigateur, vous risquez donc de ne pas voir apparaitre immédiatement vos applications ; la solution sous Firefox est de faire la combinaison de touches Crtl+F5 pour demander au navigateur de recharger la page en vidant le cache associé

Ordre de préséance en CSS

Toute la subtilité du CSS est d’établir un ordre de préséance des règles. L’exemple typique est celui de la couleur des liens dans une page web qui varient suivant l’emplacement (par exemple, dans le texte principal et dans le menu). Le CSS va utiliser ce qui est appelé des sélecteurs pour traduire informatiquement la phrase « les liens sont bleus par défaut et rouges dans le menu ». Quand le navigateur doit déterminer la propriété d’un élement à afficher (par exemple, sa couleur) et que plusieurs règles contradictoires s’appliquent (l’une dit bleu et l’autre dit rouge), il suit une norme très précise pour déterminer quelle règle l’emporte.

Décrire cette norme ne peut pas être le propos ici (voir Démarrer avec CSS sur le site de Mozilla) : on retiendra simplement le principe que plus le sélecteur est compliqué et impose des conditions (notamment par rapport aux éléments contenant l’élément à traiter), plus il y a de chance que la règle l’emporte sur les autres.

Concrètement, l’enjeu pour la personnalisation est que la règle décrite dans le fichier du répertoire custom/ l’emporte bien sur la règle par défaut.

Cela est assuré par trois mécanismes :

• les fichiers de personnalisation sont toujours placés à la fin : en CSS, lorsque des sélecteurs identiques proposent des règles différentes, c’est le dernier par ordre de chargement dans la page qui l’emporte

• le mot-clé !important est très peu utilisé dans les règles par défaut : ce mot-clé permet d’imposer une règle même avec un sélecteur de peu de poids

• le choix de conception fait par le logiciel (visible dans les fichiers CSS de theme/css/ pour l’interface du logiciel ou de css/ pour le CSS inséré dans les fiches) est de se baser presque exclusivement sur des classes (aux noms longs pour être le plus explicite possible) avec très peu de sélecteurs complexes ; il est dès lors assez facile d’écrire des sélecteurs qui l’emporteront sur les règles par défaut.

On notera, par exemple, les sélecteurs basés sur les identifiants ne sont présents que theme/css/main.css et theme/css/main.css et concernent des éléments fondamentaux de la diposition de l’interface sur lequel il est sans doute préférable de ne pas appliquer de personnalisation…

Le CSS des fiches

Le CSS des fiches est destiné à être inséré directement dans la page HTML générée par le gabarit de transformation. Cela permet d’avoir un fichier HTML sans référence externe et donc facilement transportable (envoi par courriel) et archivable.

L’insertion de ces fichiers CSS est assuré par ce type d’instruction que l’on trouve par exemple dans xsl/fiche.xsl :

<style type="text/css">
  <xsl:text>&#10;</xsl:text>
  <xsl:value-of select="document('bdf://this/xml-pack/css/_ficheblockelements.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/css/_predefinedclasses.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/theme/css/_codemirror.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/css/fiche.css')/xml-pack" disable-output-escaping="yes"/>
  <xsl:value-of select="document('bdf://this/xml-pack/custom/fiche.css')/xml-pack" disable-output-escaping="yes"/>
</style>

On voit dans l’exemple que css/custom.css est bien inséré en dernier. Dans le cas d’un gabarit de transformation personnalisé, il faudra s’assurer que cette insertion est toujours opérationnelle pour profiter de la personnalisation du CSS(la question n’est à se poser que si le gabarit personnalisé n’importe pas xsl/fiche.xsl).

Introduire ses propres classes CSS

Dans l’état actuel du logiciel, il n’y a actuellement que deux emplacements où il est possible d’introduire de nouvelles classes CSS : dans les gabarits de transformation et dans le formulaire d’une fiche.

Dans le cas des gabarits de transformation, la situation est simple : la liberté d’écrire son propre code HTML est totale, on peut donc introduire toutes les personnalisations que l’on désire.

Dans le cas des formulaires d’une fiche, deux mécanismes autorisent la définition de classes spécifiques :

• les commentaires qui sont des blocs de texte HTML insérés entre deux champs qui sont gérés dans la page Insertion de commentaires d’un corpus (voir la fiche sur les commentaires)

• l’attribut ficheform:classes défini pour un composant dans la page Attributs des composants d’un corpus (voir la fiche sur les indications de saisie).