Déclinaison de gabarits

Dans un gabarit, il est possible d'intégrer des déclinaisons de charte. Ces déclinaisons sont affectées aux pages par le biais des étiquettes de charte, seuls les styles CSS changent. Un test dans la XSL commune vérifie si une page, ou à défaut une de ses pages parentes, possède une étiquette de charte. Si aucune étiquette de charte n'est identifiée, c'est le style par défaut qui est appliqué, sinon, ce sont les styles apportés par cette étiquette qui sont appliqués. Selon la quantité de styles spécifiques à chaque déclinaison, deux méthodes sont possibles :

  • Si les variations de styles sont mineures et ne justifient pas l'import d'une css supplémentaire, ils peuvent être définis dans la css générique. L'ajout d'une classe à la balise body du gabarit servira de sélecteur pour réaliser les différentes déclinaisons de couleurs par exemple.
  • Si les variations de styles sont majeures, il est préférable d'importer une css spécifique pour chaque déclinaison qui viendra surcharger les valeurs définies dans la css générique. Ainsi, la css générique ne comprend pas toutes les variantes de styles non utilisés pour une page donnée.

Exemple de déclinaisons de couleurs dans le cas de variations mineures :

template.xsl

<xsl:template name="template"> 
 <html> 
 <head> 
 <!-- Contenu du head --> 
 </head> 
 <body> 
 <xsl:attribute name="class"> 
 <xsl:variable name="stylePrefix">PLUGIN_TAGS_STYLES_PAGES_</xsl:variable> 
 <xsl:variable name="style" select="substring(name(/cms/inputData/sitemap//page[@sitemap:current='true']/ancestor-or-self::page[@*[starts-with(name(), $stylePrefix)]] [1]/@*[starts-with(name(), $stylePrefix)]), string-length($stylePrefix)+1)"/> 
 <xsl:choose> 
 <xsl:when test="$style='[styleName1]'">bleu</xsl:when> 
 <xsl:when test="$style='[styleName2]'">vert</xsl:when> 
 <xsl:when test="$style='[styleName3]'">rouge</xsl:when> 
 </xsl:choose> 
 </xsl:attribute> 
 <!-- Contenu du body --> 
 </body> 
 </html> 
</xsl:template> 

Exemple de déclinaisons de couleurs dans le cas de variations majeures :

    <xsl:template name="color-css"> 
 <xsl:variable name="stylePrefix">PLUGIN_TAGS_STYLES_PAGES_</xsl:variable> 
 <xsl:variable name="style" select="substring(name(/cms/inputData/sitemap//page[@sitemap:current='true']/ancestor-or-self::page[@*[starts-with(name(), $stylePrefix)]] [1]/@*[starts-with(name(), $stylePrefix)]), string-length($stylePrefix)+1)"/> 

        <!-- A color by category --> 
        <xsl:if test="$style != ''"> 
            <xsl:variable name="color" select="translate($style,'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')"/> 
            <link rel="stylesheet" href="{ametys:skinURL(concat('css/[skinName]-',$color,'.css'))}" type="text/css" /> 
        </xsl:if> 
    </xsl:template> 
Retour en haut

Manuel de paramétrage et d'intégration