Creating and configuring a charter templatev1.0.0, v1.1.0, v1.2.0, v1.3.0

This page is intended for integrators with a minimum knowledge of HTML, CSS, XML, XSL, I18N ... and familiarity with the integration of a Ametys graphic charter. See the Graphic integration page.

Setting up a graphic charter requires setting up its template. In other words, a charter can only be customized via the Graphic Charter Workshop if it is linked to a charter template.

The graphic charter becomes an "instance" of the model.

  1. Creating a charter template Ametys
  2. Setting up a graphic template
    1. Style parameters (resources/css/*.css)
    2. Translation parameters (i18n/messages.xml)
    3. Variant parameters (model/variants/xxx/yyyy)
    4. Image parameters (model/images/xxx)
    5. Text parameters (**/*.xsl)
  3. Model configuration files
    1. Ribbon organization (file model/cms-ribbon.xml)
    2. Colors and color themes (model/colors file.xml)
    3. Styles CSS (file model/css-styles.xml)
    4. Default values (file model/default-values.xml)
      1. Special case of theme colors

 

Creating a charter template Ametys

All graphic charter templates are contained in the "models" directory of the application.

The organization of a charter template is almost identical to theorganization of a graphic charter.

A model has an additional directory named "model" with :

  • variant parameters: model/variants/**
  • image parameters: model/images/**
  • the ribbon configuration file with all parameters: model/cms-ribbon.xml
  • colors and color themes file: model/colors.xml
  • the available styles file css : model/css-styles.xml
  • the default values file: model/default-css.xml

The last 4 files are configuration files.
They are described in more detail in the Model configuration files section.

 

Setting up a graphic template

Style parameters (resources/css/*.css)

The CSS parameters are used to modify style elements: font, font size, color, character styles (bold, italic, underlined), margins, background color, alignment, etc.

A style parameter is declared directly in the CSS file, on the same line as the parameterizable CSS property, in the form of a comment, as follows:

/* AMETYS ("id", "Label", "Description") */

or

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

 

The parameter identifier must be unique.

The label is optional. It can be a key i18n defined in the model catalog.

The description is optional. It can be a key i18n defined in the model catalog.

The comment must be positioned before the semicolon.

Sample declarationsRibbon elements
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") */;  
}  
Effect on the graphic charter

Warning
The css parameter must appear on a single line, without braces. For example, a parameter declared as follows will not be detected:

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

write instead:

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



Important
The same css parameter can be present in several places in the same css file, or in several css files.
Case in point: the choice of level 1 title color applies both in the main css (ametys.css), the mobile css (ametys-mobile.css) and in css for wysiswyg editing(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;   
}  

You don't need to define a label and/or description for all occurrences - just one is enough.

 

Translation parameters (i18n/messages.xml)

The i18n parameters can be used to modify internationalized charter texts (e.g. site title).

A i18n parameter is declared directly in the i18n/messages.xml file of the model, in the form of a comment XSL as follows:

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

or

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

The parameter identifier must be unique.

The label is optional. It can be a key i18n defined in the model catalog.

The description is optional. It can be a key i18n defined in the model catalog.

Sample declarations
<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>  
Ribbon elementsEffect on the graphic charter

 

Variant parameters (model/variants/xxx/yyyy)

Variant parameters are used in complex cases, when it is necessary to replace one or more files (XSL, images, css files , javacripts, ....).

The model/variants directory contains a subdirectory for each variant parameter. The directory name is the parameter identifier.

The model/variants/[VARIANT] directory contains as many directories as there are possible values for this variant.

Each model/variants/[VARIANT]/[VALUE] directory contains files which reproduce the root tree of a skin and which will be added to it (and overwritten if necessary) when the variant is applied.

In the Graphic Design Workshop, each variant is represented by a gallery (menu). The elements in the gallery are made up of the different possible values for this variant.

Optionally, the model/variants/[VARIANT] directory can contain PNG format icons, thumbnail_32.png (32 x 32 pixels) and thumbnail_16.png (16 x 16 pixels), which will be used for the generated menu.
This directory can also contain a VARIANT file.xml for the menu label and description (with or without i18n keys).

Optionally, the directory model/variants/[VARIANT]/[VALUE] can also contain a PNG image in the form [VALUE].png, which will be used for the gallery item.
This directory can also contain a VALUE file.xml for the label and description of the menu item (with or without i18n keys).

Here's an example:

Here's an example of variant parameters defining 3 variants for the side menu ("vmenu"):

  • with a border separating menu items ("borders" variant),
  • with a background image on menu items ("boxes" variant),
  • simple, without border or background color ("simple" variant)
Parameter declarationRibbon element
Effect on the graphic charter

 

The vmenu.xml file contains the parameter label and description:

File 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>  

VALUE].xml files(simple.xml, borders.xml and boxes.xml) contain the label and description of the variant, which appears in the gallery. Example with the simple.xml file:

Simple file.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>  

When applying the "boxes" variant, for example, all directories and files in the model/variant/vmenu/boxes directory are copied to the directory of the working version of the skins/[CHART_NAME] charter.

Image parameters (model/images/xxx)

An image-type parameter is a variant parameter but limited to one image.

Image parameters are declared in the model/images directory.

In this directory, each customizable image is represented by a directory named after the image, whose path is identical to the path relative to the resources/img directory in the charter. This directory contains all the images of choice.
Images can be sorted into sub-folders.

This variant directory can contain a [filename] file.xml for the menu name and description (with or without keys i18n)

Here's an example:

Here's an example of an image parameter used to modify the charter banner.

Parameter declarationRibbon elementEffect on the graphic charter

File 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>  

The template features 8 banners in 2 groups ("Abstract" and "Nature"),

For any image setting, you can select your own image from your hard disk by clicking on"From file".

When this parameter is applied, the resources/img/header.jpg image is replaced by the chosen image.

Text parameters (**/*.xsl)

Text parameters are used to modify the text elements of a XSL file.

They can be used, for example, to modify a variable XSL or untranslated text contained in a XSL.

It is declared directly in the XSL file in the form of a comment, as follows:

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

or

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

The parameter identifier must be unique.

The label is optional. It can be a key i18n defined in the model catalog.

The description is optional. It can be a key i18n defined in the model catalog.

For i18n keys, it is declared in the message file.xml by default only. No need to recall the skinfactory identifier in each language. A default value is also required. See : Translation parameters above.

 

Sample declaration
<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>  
Ribbon elementEffect on the charter

 

 

Model configuration files

Ribbon organization (file model/cms-ribbon.xml)

The model/cms-ribbon.xml file contains the ribbon generated from the model parameters. It contains all parameters, with their identifiers, sorted by tabs and groups.

Simple example with 3 parameters

<?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>  

You don't need to create this file when you create your template, as it will be generated automatically according to the template parameters the first time you open the Graphic Design Workshop.

However, this file can be manually modified to reorganize parameters into groups / menus / sub-menus or to modify labels and icons.

<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>  

The choice of parameter identifiers can help you organize parameters more easily into tabs, groups, menus or sub-menus.

In fact, depending on the identifiers, the parameters will be automatically organized into tabs / groups / menus and sub-menus according to the following conventions:

Identifier format 
[tab].[group].[item].

The parameter is placed in the "tab" tab and the "group" group.

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

The parameter is placed in the "menu" menu, which in turn is placed in the "tab" tab and the "group" group.

<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>  

Applies to CSS parameters only

[tab].[group].[menu].[item].[subitem].

The parameter can be accessed from the "item" menu item in the "menu" menu, which itself is located in the "tab" tab and the "group" group.

<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>  

Applies to CSS parameters only

 

The model/cms-ribbon.xml file is re-generated each time the model is modified. Parameters that no longer exist are commented out. New parameters are added at the end of the file, or at the end of a group or menu, depending on their identifier, and labels and icons are retained.

Example: Removing the "header.slogan.size" parameter and adding the "header.menu.bgcolor" parameter

<?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>  

 

Menus and submenus are all generated with an icon. Wherever possible, the icon is deduced from the menu identifier.

For example, 2 parameters CSS whose identifiers are "content.text.link.color" and "content.text.link.text-decoration". When generating the cms-ribbon.xml file, they will automatically be placed in the "content" tab, then the "content.text" group, then the "content.text.link" menu. The icon automatically chosen for the menu will be the link icon (/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>  

If no icon can be deduced from the menu identifier, then the icon is used.

 

You can modify the icons used in menus by specifying the path to your own icons.
Some icons are supplied by plugin. They are listed in the table below with their path.

IconPathIconPath

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

Colors and color themes (model/colors file.xml)

The model/colors.xml file contains:

  • all Hexa codes for default colors
  • all available themes and their colors in Hexa format
<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>  

Styles CSS (file model/css-styles.xml)

This file contains the values that will be proposed in the menus for each style css listed: font-family, font-size, border-style, border-width, letter-spacing, text-indent, line-height, width, height, margin, padding
and since 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>)

Sample menus

Default values (file model/default-values.xml)

The model/default-values.xml file contains default parameter values.

For parameters of type CSS, i18n or text, the default values can be taken respectively from the css, messages.xml or XSL file where they are located. There is therefore no need to re-specify them in this file.

However, this is not the case for variants and images. For these 2 types of parameters, a default value must be specified in this file.

The file is built as shown below:

<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>.

Special case of theme colors

For CSS type parameters referencing a color (color, border-color, background-color), it may be useful here to specify a default color if this is a color chosen in a theme.

For colors chosen in a theme, it's not the hex color that's saved but the position of the color in the theme: color-theme-1, color-theme-2, color-theme-3, ...

When a graphic template is generated, the colors are defined according to the default model, and the user can then easily adapt this template by choosing a different color theme.

<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>  
Back to top

Skin factory