Création et paramétrage d'un modèle de chartev1.0.0, v1.1.0, v1.2.0, v1.3.0

Cette page est destinée aux intégrateurs ayant un minimum connaissances en HTML, CSS, XML, XSL, I18N … et familiers avec l'intégration d'une charte graphique Ametys. Voir la page Intégration graphique.

Le paramétrage d'une charte graphique passe par le paramétrage de son modèle. Autrement dit, une charte ne peut être paramétrable et être personnalisée via l'atelier charte graphique que si elle est liée à un modèle de charte.

La charte graphique devient une "instance" du modèle.

  1. Création d'un modèle de charte Ametys
  2. Paramétrage d'un modèle de charte graphique
    1. Paramètres de styles (resources/css/*.css)
    2. Paramètres de traduction (i18n/messages.xml)
    3. Paramètres de variantes (model/variants/xxx/yyy)
    4. Paramètres d'images (model/images/xxx)
    5. Paramètres de texte (**/*.xsl)
  3. Fichiers de configuration du modèle
    1. Organisation du ribbon (fichier model/cms-ribbon.xml)
    2. Les couleurs et les thèmes de couleur (fichier model/colors.xml)
    3. Les styles CSS (fichier model/css-styles.xml)
    4. Les valeurs par défaut (fichier model/default-values.xml)
      1. Cas particulier des couleurs de thèmes

 

Création d'un modèle de charte Ametys

L'ensemble des modèles de chartes graphiques sont contenus dans le répertoire "models" de l'application

L'organisation d'un modèle de charte est quasi-similaire à l'organisation d'une charte graphique.

Un modèle possède un répertoire supplémentaire nommé "model" avec :

  • les paramètres de variantes :  model/variants/**
  • les paramètres d'images : model/images/**
  • le fichier de configuration du ribbon avec l'ensemble des paramètres : model/cms-ribbon.xml
  • le fichier des couleurs et thèmes de couleur : model/colors.xml
  • le fichier des styles css disponibles: model/css-styles.xml
  • le fichier des valeurs par défaut: model/default-css.xml

Les 4 derniers fichiers sont des fichiers de configuration.
Ils sont détaillés plus loin au chapitre Fichiers de configuration du modèle.

 

Paramétrage d'un modèle de charte graphique

Paramètres de styles (resources/css/*.css)

Les paramètres CSS permettent de modifier les éléments de styles: police, taille de police, couleur, styles de caractères (gras, italique, souligné),  marges, couleur de fond, alignement, ...

Un paramètre de style se déclare directement dans le fichiers CSS, sur la même ligne que la propriété CSS paramétrable, sous forme d'un commentaire, de la manière suivante:

/* AMETYS ("id", "Libellé", "Description") */

ou

/* AMETYS ("id", LABEL_I18N_KEY, DESCRIPTION_I18N_KEY) */

 

L'identifiant du paramètre doit être unique.

Le libellé est optionnel. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

La description est optionnelle. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

Le commentaire doit être positionné avant le point virgule.

Exemples de déclarationEléments du ruban
h1.art-logo-name  
{  
  font-family: Tahoma, Arial, Helvetica, Sans-Serif /* AMETYS ("header.title.font-family", "Famille de police") */;  
  font-weight: normal;  
  font-size: 30px;  
  padding: 0;  
  margin: 0;  
  color: #22485D /* AMETYS ("header.title.color", "Couleur du titre") */;  
}  
p.art-logo-text a:hover  
{  
  font-family: Tahoma, Arial, Helvetica, Sans-Serif /* AMETYS ("header.title.slogan.font-family") */;  
  font-weight: normal /* AMETYS ("header.title.slogan.font-weight") */;  
  font-size: 22px; /* AMETYS ("header.title.slogan.font-size") */;  
  padding: 0;  
  margin: 0;  
  color: #2B5973 !important /* AMETYS ("header.title.slogan.color") */;  
}  
Effet sur la charte graphique

Attention
Le paramètre css doit apparaitre sur une seule ligne et sans accolades. Par exemple, un paramètre déclaré de la manière suivante ne sera pas détecté:

body{ background-color: #ffff00/* AMETYS ("page.body.bgcolor", "Couleur de fond") */; }  

écrivez plutot:

body{  
    background-color: #ffff00/* AMETYS ("page.body.bgcolor", "Couleur de fond") */;  
}  



Important
Le même paramètre css peut être présent à plusieurs endroits du même fichier css ou dans plusieurs fichiers css.
Cas d'application: le choix de la couleur du titre de niveau 1 s'applique à la fois dans la css principale (ametys.css), la css mobile (ametys-mobile.css) et dans les css pour l'édition wysiswyg (editor-content.css).

/** @Fichier ametys.css */  
.ametys-cms-content h3  
{  
 color: #95499C /* AMETYS ("content.text.title.h1.color", "Couleur du titre 1") */;  
    margin: 19px 0;  
    font-size: 22px;        
}  

/** @Fichier bo/button.css */  
.htmleditor-h1  
{  
  color: #95499C /* AMETYS ("content.text.title.h1.color") */;  
    font-size: 22px;  
}  

/** @Fichier bo/editor-content.css */  
.mceContentBody h1  
{  
    color: #95499C /* AMETYS ("content.text.title.h1.color") */;  
    margin: 19px 0;  
    font-size: 22px;   
}  

Il n'est pas nécessaire de définir un libellé et/ou une description sur toutes les occurrences, une seule suffit.

 

Paramètres de traduction (i18n/messages.xml)

Les paramètres i18n permettent de modifier les textes internationalisés de la charte (par exemple: le titre du site).

Un paramètre i18n se déclare directement dans le fichier i18n/messages.xml du modèle, sous forme d'un commentaire XSL de la manière suivante:

<message key="I18N_KEY">Texte par défaut<!-- AMETYS("id", "Libellé", "Description") --></message>  

ou

<message key="I18N_KEY">Texte par défaut<!-- AMETYS("id", TEXT_LABEL, TEXT_DESC) --></message>  

L'identifiant du paramètre doit être unique.

Le libellé est optionnel. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

La description est optionnelle. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

Exemples de déclaration
<message key="SKIN_TITLE">CMS Java Open Source<!-- AMETYS ("header.title.i18ntitle", SKINFACTORY_PARAMETER_SKIN_TITLE_TEXT) --></message>  
<message key="SKIN_SUBTITLE">Demo<!-- AMETYS ("header.title.i18nslogan", SKINFACTORY_PARAMETER_SKIN_SUBTITLE_TEXT) --></message>  
Éléments du rubanEffet sur la charte graphique

 

Paramètres de variantes (model/variants/xxx/yyy)

Les paramètres de variantes sont utilisés pour les cas complexe, lorsqu'il est nécessaire de remplacer un ou plusieurs fichiers (XSL, images, fichiers css, javacripts, ....).

Dans le répertoire model/variants du modèle on trouve un sous-répertoire par paramètre de variante. Le nom du répertoire est l'identifiant du paramètre.

Le répertoire model/variants/[VARIANT] contient autant de répertoires que de valeur possible pour cette variante.

Chaque répertoire model/variants/[VARIANT]/[VALUE] contient des fichiers qui reproduise l'arborescence racine d'une skin et qui seront ajoutés à celle-ci (et écrasés le cas échéant) lors de l'application de cette variante.

Dans l'atelier charte graphique, chaque variante est représentée par une galerie (menu). Les éléments de la galerie sont constitués des différentes valeurs possibles pour cette variante.

Facultativement le répertoire model/variants/[VARIANT] peut contenir des icônes au format PNG,  thumbnail_32.png (32 x 32 pixels) et thumbnail_16.png (16 x 16 pixels) qui seront utilisés pour le menu généré.
Ce répertoire peut contenir aussi un fichier VARIANT.xml pour le libellé et la description du menu (avec ou sans clés i18n)

Facultativement également le répertoire model/variants/[VARIANT]/[VALUE] peut contenir une image au format PNG sous la forme [VALUE].png  qui sera utilisée pour l'élément de la galerie.
Ce répertoire peut aussi contenir un fichier VALUE.xml pour le libellé et la description de l'élément du menu (avec ou sans clés i18n)

Illustration par un exemple :

Voici ci-après, un exemple de paramètres de variantes définissant 3 variantes pour le menu latéral ("vmenu"):

  • avec une bordure séparant les éléments du menu (variante "borders"),
  • avec une image de fond sur les éléments du menu (variante "boxes"),
  • simple, sans bordure ni couleur de fond (variant "simple")
Déclaration du paramètreÉlément du ruban
Effet sur la charte graphique

 

Le fichier vmenu.xml contient le libellé et la description du paramètre :

Fichier vmenu.xml

<?xml version="1.0" encoding="UTF-8"?>  
<parameter>  
    <label i18n="true">SKINFACTORY_VARIANTS_VMENU_LABEL</label>  
    <description i18n="true">SKINFACTORY_VARIANTS_VMENU_DESC</description>  
</parameter>  

Les fichiers [VALUE].xml (simple.xml, borders.xml et boxes.xml) contiennent le libellé et la description de la variante, qui apparaissent dans la galerie. Exemple avec le fichier simple.xml:

Fichier simple.xml

<?xml version="1.0" encoding="UTF-8"?>  
<variant>  
    <label i18n="true">SKINFACTORY_VARIANTS_VMENU_VARIANT_SIMPLE_LABEL</label>  
    <description i18n="true">SKINFACTORY_VARIANTS_VMENU_VARIANT_SIMPLE_DESC</description>  
</variant>  

Lors de l'application de la variante "boxes" par exemple, l'ensemble des répertoires et fichiers du répertoire model/variant/vmenu/boxes sont copiés dans le répertoire de la version de travail de la charte skins/[NOM_CHARTE].

Paramètres d'images (model/images/xxx)

Un paramètre de type image est un paramètre de variantes mais limité à une image.

Les paramètres de type image sont déclarés dans le répertoire model/images du modèle.

Dans ce répertoire, chaque image paramétrable est représentée par un répertoire du nom de l'image, dont le chemin est identique au chemin relatif au répertoire resources/img de la charte. Ce répertoire contient l'ensemble des images de choix.
Les images peuvent être classés par sous-dossiers.

Ce répertoire de la variante peut contenir un fichier [filename].xml pour le libellé et la description du menu (avec ou sans clés i18n)

Illustration par un exemple :

Voici ci-après un exemple de paramètre de type image permettant de modifier la bannière de la charte.

Déclaration du paramètreÉlément du rubanEffet sur la charte graphique

Fichier header.xml

<?xml version="1.0" encoding="UTF-8"?>  
<parameter>  
    <label i18n="true">SKINFACTORY_MENU_IMAGE_HEADER</label>  
    <description i18n="true">SKINFACTORY_MENU_IMAGE_HEADER_DESC</description>  
</parameter>  

Le modèle propose 8 bannières classées dans 2 groupes ("Abstrait" et "Nature"),

Pour tout paramètre d'image il est possible de choisir sa propre image depuis son disque dur en cliquant sur "A partir du fichier".

Lors de l'application de ce paramètre, l'image resources/img/header.jpg  est remplacée par l'image choisie.

Paramètres de texte (**/*.xsl)

Les paramètres de texte permettent de modifier des éléments de texte d'une XSL.

Ils peuvent être utilisés par exemple pour modifier une variable XSL ou du texte non traduit contenu dans une XSL.

Il se déclare directement dans le fichier XSL sous forme d'un commentaire de la manière suivante:

<xsl:variable name="foo">Paramètre de variable<!-- AMETYS("txt.params.foo", "Foo", "Description de foo") --></xsl:variable>  

ou

<xsl:variable name="foo">Paramètre de variable<!-- AMETYS("txt.params.foo", I18N_FOO_LABEL, I18N_FOO_DESC) --></xsl:variable>  

L'identifiant du paramètre doit être unique.

Le libellé est optionnel. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

La description est optionnelle. Il peut s'agir d'une clé i18n définit dans le catalogue du modèle.

Pour les clés i18n, il se déclare dans le fichier message.xml par défaut uniquement. Inutile de rappeler l'identifiant skinfactory dans chacune des langues. Une valeur par défaut est aussi nécessaire. Voir : Paramètres de traduction ci-dessus.

 

Exemple de déclaration
<div class="footer-copyright">  
     <xsl:call-template name="footer-links"/>  
                 
     <p>Copyright © 2013. Tous droits réservés<!-- AMETYS ("footer.text.copyright", SKINFACTORY_FOOTER_COPYRIGHT_LABEL) --></p>  
</div>  
Élément du rubanEffet sur la charte

 

 

Fichiers de configuration du modèle

Organisation du ribbon (fichier model/cms-ribbon.xml)

Le fichier model/cms-ribbon.xml contient le ruban (ribbon) généré à partir des paramètres du modèle. On y retrouve tous les paramètres, avec leur identifiants, classés par onglets et groupes.

Exemple simple avec 3 paramètres

<?xml version="1.0" encoding="UTF-8"?>  
<ribbon xmlns:i18n="http://apache.org/cocoon/i18n/2.1">  
    <tab label="Paramètrage" id="org.ametys.skinfactory.Tab" contextualGroup="K" contextualColor="5" contextualLabel="Atelier charte graphique">  
        <groups>  
            <group label="Entête" icon="">  
 <large/>  
 <medium>  
                    <parameter id="header.logo.color" />  
                    <parameter id="header.logo.size" />  
                    <parameter id="header.slogan.size" />  
                </medium>  
 <small/>  
  </group>  
        </groups>  
    </tab>  
</ribbon>  

Vous n'avez pas besoin de créer ce fichier lors de la création de votre modèle, il sera généré automatiquement en fonction des paramètres du modèle à la première ouverture de l'atelier charte graphique.

Ce fichier peut cependant être modifié manuellement pour ré-organiser les paramètres dans des groupes / menus / sous-menu ou pour modifier les libellés et les icônes.

<group icon="" label="Paragraphe">  
    <large/>  
    <medium>  
        <menu id="p.secondary" label="Secondaire" icon-large="skins/demo/resources/img/p-secondary_32.jpg" icon-small="skins/demo/resources/img/p-secondary_16.jpg">  
            <parameter id="p.secondary.font-size" />  
            <parameter id="p.secondary.font-color" />  
            <parameter id="p.secondary.font-style" />  
            <parameter id="p.secondary.padding-left" />  
        </menu>  
        <menu id="p.introduction" label="Introduction" icon-large="skins/demo/resources/img/p-introduction_32.jpg" icon-small="skins/demo/resources/img/p-introduction_16.jpg">  
            <parameter id="p.introduction.font-size" />  
            <parameter id="p.introduction.font-weight" />  
            <parameter id="p.introduction.letter-spacing" />  
        </menu>  
    </medium>  
    <small/>  
</group>  
<group icon="" label="Menu">  
    <large/>  
    <medium>  
        <menu id="a.menu" label="Liens" icon-medium="/plugins/skinfactory/resources/img/button/police_32.png" icon-small="/plugins/skinfactory/resources/img/button/police_32.png">  
            <parameter id="a.menu.font-size" />  
            <parameter id="a.menu.font-family" />  
            <menu id="a.menu.normal" label="Normal">  
                <parameter id="a.menu.normal.color"/>  
                <parameter id="a.menu.normal.font-weight"/>  
            </menu>  
            <menu id="a.menu.over" label="Survolé">  
                <parameter id="a.menu.over.color"/>  
                <parameter id="a.menu.over.font-weight"/>  
            </menu>  
        </menu>  
    </medium>  
 <small/>  
</group>  

Le choix des identifiants de paramètres peut vous aider à organiser plus facilement les paramètres en onglets, groupes, menu ou sous-menu.

En effet, en fonction des identifiants, les paramètres seront organisés automatiquement en onglet / groupe / menu et sous-menu selon les conventions suivantes:

Format de l'identifiant 
[onglet].[groupe].[item]

Le paramètre est placé dans l'onglet "onglet" et le groupe "groupe"

<tab label="onglet"  id="org.ametys.skinfactory.Tab.onglet">  
 <groups>  
 <group id="onglet.groupe" label="groupe">  
 <parameter id="onglet.groupe.item"/>  
 </group>  
 </groups>  
</tab>  
[onglet].[groupe].[menu].[item]

Le paramètre est placé dans le menu "menu" lui-même placé dans l'onglet "onglet" et le groupe "groupe"

<tab label="onglet"  id="org.ametys.skinfactory.Tab.onglet">  
 <groups>  
 <group id="onglet.groupe" label="group">  
 <menu id="onglet.groupe.menu" label="menu">  
 <parameter id="onglet.groupe.menu.item"/>  
 </menu>  
 </group>  
 </groups>  
</tab>  

S'applique aux paramètres CSS uniquement

[onglet].[groupe].[menu].[item].[subitem]

Le paramètre sera accessible à partir de l'él"ment de menu "item" du menu "menu" lui-même placé dans l'onglet "onglet" et le groupe "groupe"

<tab label="onglet"  id="org.ametys.skinfactory.Tab.onglet">  
 <groups>  
 <group id="onglet.groupe" label="group">  
 <menu id="onglet.groupe.menu" label="menu">  
 <menu id="onglet.groupe.menu.item" label="item">  
 <parameter id="onglet.groupe.menu.item.subitem"/>  
 </menu>  
 </menu>  
 </group>  
 </groups>  
</tab>  

S'applique aux paramètres CSS uniquement

 

Le fichier model/cms-ribbon.xml est ré-généré à chaque modification du modèle. Les paramètres qui n'existent plus sont commentés. Les nouveaux paramètres sont rajoutés à la fin du fichier, à la fin d'un groupe ou d'un menu en fonction de leur identifiant.Les libellés et icônes sont conservées.

Exemple : Suppression du paramètre "header.slogan.size" et ajout du paramètre "header.menu.bgcolor"

<?xml version="1.0" encoding="UTF-8"?>  
<ribbon xmlns:i18n="http://apache.org/cocoon/i18n/2.1">  
    <tab label="Entête" id="org.ametys.skinfactory.Tab.header" contextualGroup="K" contextualColor="5" contextualLabel="Atelier charte graphique">  
        <groups>  
            <group label="Logo" icon="" id="header.logo">  
                <medium>  
                    <parameter id="header.logo.color" />  
                    <parameter id="header.logo.size" />  
                    <!--parameter id="header.slogan.size" /-->  
                </medium>  
            </group>  
            <group label="menu" icon="" id="header.menu">  
                <medium>  
                    <parameter id="header.menu.bgcolor" />  
                </medium>  
            </group>  
        </groups>  
    </tab>  
</ribbon>  

 

Les menus et sous-menus sont tous générés avec une icône. Dans la mesure du possible l’icône est déduite en fonction de l'identifiant du menu.

Par exemple, soit 2 paramètres CSS dont les identifiant sont "content.text.link.color" et "content.text.link.text-decoration". Lors de la génération du fichier cms-ribbon.xml, ils seront automatiquement placés dans l'onglet "content", puis le groupe "content.text" puis le menu "content.text.link". L'icône automatiquement choisit pour le menu sera l'icône des liens (/plugins/skinfactory/resources/img/button/link_32.png) :

<tab id="org.ametys.skinfactory.Tab.content" label="content">  
 <group id="content.text" label="text">  
 <menu id="content.text.link" icon-small="/plugins/skinfactory/resources/img/button/link_16.png" icon-medium="/plugins/skinfactory/resources/img/button/link_32.png" label="link">  
 <parameter id="content.text.link.color"/>   
 <parameter id="content.text.link.text-decoration"/>  
 </menu>  
 </group>  
</tab>  

Si aucune icône ne peut être déduite de l'identifiant du menu, alors l’icône est utilisée.

 

Vous pouvez modifier les icônes utilisées dans les menus en spécifiant le chemin vers vos propres icônes.
Quelques icônes sont fournies par le plugin. Les voici listées dans le tableau ci-dessous avec leur chemin.

IcôneCheminIcôneChemin

plugins/skinfactory/resources/img/button/bgcolor_16.png
plugins/skinfactory/resources/img/button/bgcolor_32.png

plugins/skinfactory/resources/img/button/list_16.png
plugins/skinfactory/resources/img/button/list_32.png
plugins/skinfactory/resources/img/button/fontcolor_16.png
plugins/skinfactory/resources/img/button/fontcolor_32.png		plugins/skinfactory/resources/img/button/menu_16.png
plugins/skinfactory/resources/img/button/menu_32.png
plugins/skinfactory/resources/img/button/text_16.png
plugins/skinfactory/resources/img/button/text_32.png

plugins/skinfactory/resources/img/button/hmenu_16.png
plugins/skinfactory/resources/img/button/hmenu_32.png

plugins/skinfactory/resources/img/button/fontsize_16.png
plugins/skinfactory/resources/img/button/fontsize_32.png		plugins/skinfactory/resources/img/button/hmenu_element_16.png
plugins/skinfactory/resources/img/button/hmenu_element_32.png
plugins/skinfactory/resources/img/button/police_16.png
plugins/skinfactory/resources/img/button/police_32.png		plugins/skinfactory/resources/img/button/vmenu_16.png
plugins/skinfactory/resources/img/button/vmenu_32.png
plugins/skinfactory/resources/img/button/link_16.png
plugins/skinfactory/resources/img/button/link_32.png		plugins/skinfactory/resources/img/button/border_style_16.png
plugins/skinfactory/resources/img/button/border_style_32.png
plugins/skinfactory/resources/img/button/bold_16.png
plugins/skinfactory/resources/img/button/bold_32.png		plugins/skinfactory/resources/img/button/border_width_16.png
plugins/skinfactory/resources/img/button/border_width_32.png
plugins/skinfactory/resources/img/button/italic_16.png
plugins/skinfactory/resources/img/button/italic_32.png		plugins/skinfactory/resources/img/button/para_16.png
plugins/skinfactory/resources/img/button/para_32.png
plugins/skinfactory/resources/img/button/underline_16.png
plugins/skinfactory/resources/img/button/underline_32.png		plugins/skinfactory/resources/img/button/line_height_16.png
plugins/skinfactory/resources/img/button/line_height_32.png
plugins/skinfactory/resources/img/button/blockheader_16.png
plugins/skinfactory/resources/img/button/blockheader_32.png		plugins/skinfactory/resources/img/button/letter_spacing_16.png
plugins/skinfactory/resources/img/button/letter_spacing_32.png
plugins/skinfactory/resources/img/button/image_16.png
plugins/skinfactory/resources/img/button/image_32.png		plugins/skinfactory/resources/img/button/heading1_16.png
plugins/skinfactory/resources/img/button/heading1_32.png
plugins/skinfactory/resources/img/button/photo_16.png
plugins/skinfactory/resources/img/button/photo_32.png

plugins/skinfactory/resources/img/button/heading2_16.png
plugins/skinfactory/resources/img/button/heading2_32.png

plugins/skinfactory/resources/img/button/table_border_16.png
plugins/skinfactory/resources/img/button/table_border_32.png

plugins/skinfactory/resources/img/button/heading3_16.png
plugins/skinfactory/resources/img/button/heading3_32.png

 

plugins/skinfactory/resources/img/button/table_header_16.png
plugins/skinfactory/resources/img/button/table_header_32.png

plugins/skinfactory/resources/img/button/heading4_16.png
plugins/skinfactory/resources/img/button/heading4_32.png

plugins/skinfactory/resources/img/button/margin_left_16.png
plugins/skinfactory/resources/img/button/margin_left_32.png

plugins/skinfactory/resources/img/button/heading5_16.png
plugins/skinfactory/resources/img/button/heading5_32.png

plugins/skinfactory/resources/img/button/margin_right_16.png
plugins/skinfactory/resources/img/button/margin_right_32.png

plugins/skinfactory/resources/img/button/heading6_16.png
plugins/skinfactory/resources/img/button/heading6_32.png

Les couleurs et les thèmes de couleur (fichier model/colors.xml)

Le fichier model/colors.xml contient:

  • l'ensemble des codes Hexa des couleurs proposées par défaut
  • l'ensemble des thèmes disponibles et leurs couleurs aux format Hexa
<colors>  
    <default>  
        <color>88524e</color>  
        <color>ef254a</color>  
        <color>e887b8</color>  
        <!-- etc -->  
    </default>  
    <theme id="themeA">  
        <label i18n="false">Theme A</label>  
        <colors>  
            <color>13444e</color>  
            <color>2b9ab1</color>  
            <color>46bbd2</color>  
            <!-- etc -->  
        </colors>  
    </theme>  
    <theme id="themeB">  
        <label i18n="false">Theme B</label>  
        <colors>  
            <color>0e2734</color>  
            <color>1a4861</color>  
            <color>328dbd</color>  
            <!-- etc -->  
        <colors>  
    </theme>  
</colors>  

Les styles CSS (fichier model/css-styles.xml)

Ce fichier contient les valeurs qui seront proposées dans les menus pour chaque styles css énumérés: font-family, font-size, border-style, border-width, letter-spacing, text-indent, line-height, width, height, margin, padding
et depuis la version 1.2.0 border-radius, background-position and background-repeat

<?xml version="1.0" encoding="UTF-8"?>  
<styles>  
    <font-family>  
        <item>  
            <label i18n="false">Arial</label>  
            <value>Arial, sans-serif</value>  
            <cssclass>font-arial</cssclass>  
        </item>  
        <item>  
            <label i18n="false">Courier New</label>  
            <value>Courier New</value>  
            <cssclass>font-courier</cssclass>  
        </item>  
        <!-- etc -->  
    </font-family>  
    <font-size>  
        <item>  
            <label i18n="false">8px</label>  
            <value>8px</value>  
        </item>  
        <item>  
            <label i18n="false">9px</label>  
            <value>9px</value>  
        </item>  
        <!-- etc -->  
    </font-size>  
  
    <border-style>  
        <item>  
            <label i18n="true">plugin.skinfactory:PLUGINS_SKINFACTORY_BORDER_STYLE_NONE</label>  
            <value>none</value>  
        </item>  
        <item>  
            <label i18n="true">plugin.skinfactory:PLUGINS_SKINFACTORY_BORDER_STYLE_SOLID</label>  
            <value>solid</value>  
            <icon plugin="skinfactory">img/button/border_style_solid_16.png</icon>  
        </item>  
        <!-- etc -->  
    </border-style>  
  
    <!-- etc -->  
</styles>  

Pour chaque item, vous devez définir un label (<label>) et une valeur (<value>).

Vous pouvez ajouter une icone (<icon>) et/ou une classe css (<cssclass>)

Exemples de menus générés

Les valeurs par défaut (fichier model/default-values.xml)

Le fichier model/default-values.xml contient les valeurs par défaut des paramètres.

Pour les paramètres de type CSS, i18n ou texte, les valeurs par défaut peuvent être déduites respectivement du fichier css, messages.xml ou du fichier XSL où ils se trouvent. Il est donc inutile de les re-préciser dans ce fichier.

En revanche, ce n'est pas le cas pour les variantes et les images. Pour ces 2 types de paramètres, une valeur par défaut doit être spécifiée dans ce fichier.

Le fichier est construit comme ci-dessous:

<default-values>  
    <color-theme>ametys</color-theme>  
 <parameter id="header.jpg">ametys.jpg</parameter>  
 <parameter id="button.png">buttons/purple.png</parameter>   
</default-values>  

Le thème par défaut peut être également préciser ici, dans la balise <color-theme>.

Cas particulier des couleurs de thèmes

Pour les paramètres de type CSS référençant une couleur (color, border-color, background-color) il peut être utile ici de préciser une couleur par défaut si il s'agit d'une couleur choisit dans un thème.

En effet, pour les couleurs choisies dans un thème, ce n'est pas la couleur hexa qui est sauvegardée mais la position de la couleur dans le thème : color-theme-1, color-theme-2, color-theme-3, ...

Lors de la génération d'une charte graphique, les couleurs seront ainsi définies en fonction du modèle par défaut, et l'utilisateur pourra alors très simplement déclinée cette charte en choisissant une autre thème de couleur.

<default-values>  
    <color-theme>ametys</color-theme>  
 <parameter id="header.jpg">ametys.jpg</parameter>  
 <parameter id="button.png">purple.png</parameter>   
 <parameter id="content.text.title.h1.color">color-theme-1</parameter>  
    <parameter id="content.text.title.h2.color">color-theme-2</parameter>  
    <parameter id="content.text.title.h3.color">color-theme-3</parameter>  
    <parameter id="content.text.title.h4.color">color-theme-3</parameter>  
 <parameter id="content.para.important.bgcolor">color-theme-11</parameter>  
    <parameter id="content.para.important.color">color-theme-9</parameter>  
    <parameter id="content.para.introduction.color">color-theme-6</parameter>  
</default-values>  
Retour en haut

Skin factory