Définition de la charte graphique (skin.xml)


Ce fichier est optionnel mais fortement recommandé, il permet de définir une charte graphique et de proposer des images de prévisualisation (Cf. Gestion de modèles et de chartes graphiques).

Format

skin.xml

<skin>    
    <label i18n="true|false">...</label>    
    <description i18n="true|false">...</description>    
    <thumbnails>    
        <small>path_to_16px_image_relative_to_resources_dir</small>    
        <medium>path_to_32px_image_relative_to_resources_dir</medium>    
        <large>path_to_48px_image_relative_to_resources_dir</large>    
    </thumbnails>    
</skin>    

Toutes les balises sont facultatives.

Le libellé et la description sont internationalisables. Par défaut, le catalogue utilisé est le catalogue de la charte graphique situé dans le dossier cms/skins/[skinName]/i18n/

Les images de prévisualisation sont placées dans le dossier cms/skins/[skinName]/resources et appelées avec un chemin relatif. (par exemple : img/picto_16.png).

Héritage de chartes

A partir de Ametys 4.3, il est possible d'hériter d'une charte

L'élément <skin> peut recevoir 2 attributs

  • abstract : true ou false. Une charte abstraite ne peut pas être utilisée comme une charte classique. Elle peut juste être héritée afin de créer facilement des sous-chartes.
  • extends : identifiant d'une charte dont cette charte hérite. 

L'héritage agit ainsi :

  • Dans une charte héritée, tout fichier absent de la charte sera cherché dans la charte parente.
  • Lorsqu'une liste de fichiers ou de dossiers est nécessaire, les fichiers de la charte parente sont additionnés à ceux de la charte. Il est donc par exemple possible de :
    • ajouter un gabarit (mais pas d'en retirer, pour cela il faut retirer la possibilité de l'affecter à une page par exemple)
    • ajouter une vue à un service (mais pas d'en retirer, pour cela il faut désactiver la vue dans son fichier de déclaration xml)
    • etc...
  • Il est possible de ne surcharger que des fichiers importés (par exemple, un common.xsl ou un variables.scss) sans avoir besoin de surcharger les fichiers qui font cet import.
  • Les clefs i18n sont cumulées entre les catalogues : il est ainsi possible de ne surcharger que la clef qui vous intéresse.
    Attention, dès que vous toucherez à l'i18n de votre charte, il est fortement recommandé de créer tous les catalogues (mêmes vides) de toutes les langues de la charte parente.
  • Au niveau des fichiers de configuration, le support de l'héritage est configuré fichier par fichier. il faut se reporter à la documentation de chaque fichier de configuration pour en savoir plus. En dehors de cela, un fichier existant dans la charte "remplace" le fichier de la charte parente : dans les XSL ou les CSS il est possible d'importer le fichier remplacé, voir plus bas.

L'héritage multiple fonctionne : il suffit de lister les chartes parentes en les séparant par des virgules.
La charte parente première de la liste à le plus de poids.

L'héritage récursif fonctionne : si ma charte hérite d'une charte qui hérite.

Par exemple, si C1 hérite de C11 et C12, que C11 hérite elle-même de C111, alors un fichier sera cherché dans l'ordre suivant : C1, C11, C111 puis C12.

Surcharge de fichier XSL

En positionnant un fichier XSL, vous remplacez celui de la charte héritée.

Dans la plupart des cas, il convient donc de commencer par importer cette XSL "parente".

<xsl:import href="skin:SKINPARENTE://chemin/vers/la.xsl"/>

A la suite de cela vous pouvez surcharger les templates que vous souhaitez.

Surcharge de règles CSS / SCSS

Pour ajouter des règles CSS :

  • soit vous créez et importez un nouveau fichier CSS (cela implique d'ajouter l'import dans un autre fichier CSS ou depuis une XSL)
  • soit vous surchargez un fichier CSS existant (recommandé) :
    comme pour les XSL vous positionnez le fichier en lieu et place de celui de la charte parente, mettez un import vers le fichier de la charte parente, ajoutez les nouvelles règles CSS
// SCSS
@import "skin:SKINPARENTE://chemin/vers/la.scss";
// CSS
@import "../../skins/SKINPARENTE/chemin/vers/la.css"
  • si vous souhaitez éliminer des règles CSS, vous devez remplacer le fichier parent sans l'importer et dupliquer ce que vous souhaitez garder. Plus ce fichier est petit mieux c'est.

Pour aller plus loin

Dans le même dossier cms/skins/[skinName]/conf/, se trouvent 4 autres fichiers de configuration : 

  • edition-styles.xml, qui défini les styles disponibles de l'éditeur riche
  • template_assignment.xml, qui contraint l'utilisation de certains gabarits sous certaines conditions
  • tags.xml, qui décrit les étiquettes de la charte graphique
  • link-directory.xml qui défini les thématiques de liens et les input data de l'annuaire de liens de la charte graphique
Retour en haut