The edition-styles file.xml

The edition-styles.xml file is used to define styles that will be automatically applied to elements in the rich editor. By default, styles can be defined for titles, images, tables, links, paragraphs, ordered lists and unordered lists.

Note that default styles are defined in the Ametys application and cannot be modified.

The different elements and their default styles

Paragraph styles are defined by the para tag and have no default class.

Image styles are defined by the image tag and include the "simple" and "invisible" classes by default.

Table styles are defined by the table tag and include the "simple" and "invisible" classes by default.

Link styles are defined by the link tag and include the default "Normal" and "Invisible" styles.

Ordered list styles are defined by the orderedlist tag and include by default the "arabic", "lowerroman", "upperroman", "loweralpha" and "upperalpha" classes.

Unordered list styles are defined by the unorderedlist tag and include the default classes, "disc" and "square".

Create custom styles for an element

Importing style sheets

For each element, 2 CSS imports describing button styles and styles in the rich editor are performed

<import> 
<button><!-- Chemin vers la CSS des boutons --></button> 
<inline-editor><!-- Chemin vers la CSS des styles de l'élément --></inline-editor> 
</import> 

The paths defined in the underlying tags are relative to the graphic charter resource folder: skin://resources.

La balise <button> comprend le chemin vers la CSS qui définit les styles des boutons. Cette balise n'est utile que lorsque cssclass est défini dans la balise button d'un des styles.

La balise <inline-editor> comprend le chemin vers la CSS qui définit les styles des l'éléments dans l'éditeur riche. Le style appliqué sera celui défini dans la balise inline-editor dans la définition du style sélectionné.

A partir de Ametys 4.3.0, les balises <button> et <inline-editor> peuvent être multiples pour importer plusieurs CSS si nécessaire.

Style definition

The style tag appears as many times per element as there are custom styles defined.

<style> 
<button> 
<icon><!-- Chemin vers l'icône pour le bouton --></icon> 
<label i18n="true/false"><!-- Libellé du bouton --></label> 
<description i18n="true/false"><!-- Description du bouton --></description> 
<cssclass><!-- Classe CSS du bouton --></cssclass> 
</button> 
<inline-editor><!-- Style appliqué à l'élément --></inline-editor> 
</style> 

La balise <button> décrit le bouton utilisé pour appliquer le style. Il comprend le libellé (label) et la description (description) qui sont internationalisables et un icône (icon) ou une classe CSS (cssclass). La classe CSS est uniquement appliquée aux styles de paragraphe et de titre pour prévisualiser le rendu ; l'icône est appliquée à tous les autres éléments (images, tableaux, listes et liens), c'est le pictogramme qui sert de prévisualisation du style.

La balise <inline-editor> défini le style qui sera appliqué à l'élément. Par exemple, si le style défini est custom, custom sera le nom de la classe CSS appliquée à l'élément.

Noter que le fonctionnement diffère légèrement pour les paragraphes. En effet, si le style défini est h1, la balise HTML appliquée à l'élément sera <h1></h1>, mais si le style défini est p.custom, la balise HTML appliquée à l'élément sera <p class="custom" />

Example of an edition-styles file.xml

edition-styles.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<styles> 
    <para> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE1_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE1_DESCRIPTION</description> 
                <cssclass>htmleditor-h1</cssclass> 
            </button> 
            <inline-editor>h1</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE2_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE2_DESCRIPTION</description> 
                <cssclass>htmleditor-h2</cssclass> 
            </button> 
            <inline-editor>h2</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE3_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE3_DESCRIPTION</description> 
                <cssclass>htmleditor-h3</cssclass> 
            </button> 
            <inline-editor>h3</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SUBTITLE_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SUBTITLE_DESCRIPTION</description> 
                <cssclass>htmleditor-p-sub-title</cssclass> 
            </button> 
            <inline-editor>p.sub-title</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_INTRODUCTION_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_INTRODUCTION_DESCRIPTION</description> 
                <cssclass>htmleditor-p-introduction</cssclass> 
            </button> 
            <inline-editor>p.introduction</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NORMAL_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NORMAL_DESCRIPTION</description> 
                <cssclass>htmleditor-p</cssclass> 
            </button> 
            <inline-editor>p</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NARROWSPACED_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NARROWSPACED_DESCRIPTION</description> 
                <cssclass>htmleditor-p-narrow-spaced</cssclass> 
            </button> 
            <inline-editor>p.narrow-spaced</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_IMPORTANT_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_IMPORTANT_DESCRIPTION</description> 
                <cssclass>htmleditor-p-important</cssclass> 
            </button> 
            <inline-editor>p.important</inline-editor> 
        </style> 
        <style> 
            <button> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SECONDARY_LABEL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SECONDARY_DESCRIPTION</description> 
                <cssclass>htmleditor-p-secondary</cssclass> 
            </button> 
            <inline-editor>p.secondary</inline-editor> 
        </style> 
    </para> 
    
    <table> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
        <style> 
            <button> 
                <icon>img/bo/Table_Data_Light_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT_DESC</description> 
            </button> 
            <inline-editor>datalight</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Table_Data_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATA</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATA_DESC</description> 
            </button> 
            <inline-editor>data</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Table_Data_Strong_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATASTRONG</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATASTRONG_DESC</description> 
            </button> 
            <inline-editor>datastrong</inline-editor> 
        </style> 
    </table> 
    
    <link> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
        <style> 
            <button> 
                <icon>img/bo/Link_Download_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_DOWNLOAD</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_DOWNLOAD_DESC</description> 
            </button> 
            <inline-editor>download</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Link_KnowMore_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_KNOWMORE</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_KNOWMORE_DESC</description> 
            </button> 
            <inline-editor>know-more</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Link_External_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_EXTERNAL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_EXTERNAL_DESC</description> 
            </button> 
            <inline-editor>external</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Link_Mail_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_MAIL</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_MAIL_DESC</description> 
            </button> 
            <inline-editor>mailto</inline-editor> 
        </style> 
    </link> 
    
    <image> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
        <style> 
            <button> 
                <icon>img/bo/Image_Frame_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_FRAME</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_FRAME_DESC</description> 
            </button> 
            <inline-editor>frame</inline-editor> 
        </style> 
        <style> 
            <button> 
                <icon>img/bo/Image_LargeFrame_32.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_LARGEFRAME</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_LARGEFRAME_DESC</description> 
            </button> 
            <inline-editor>largeframe</inline-editor> 
        </style> 
    </image> 
    
    <unorderedlist> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
        <style> 
            <button> 
                <icon>img/postbullets.png</icon> 
                <label i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CUSTOM</label> 
                <description i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CUSTOM_DESC</description> 
            </button> 
            <inline-editor>custom</inline-editor> 
        </style> 
    </unorderedlist> 
    
    <orderedlist> 
        <import> 
            <button>css/bo/buttons.css</button> 
            <inline-editor>css/bo/editor-content.css</inline-editor> 
        </import> 
    </orderedlist> 
</styles> 

Charter heritage

From Ametys 4.3.0

Missing file

As the generic inheritance rule indicates, if the file is absent, the file from the parent charter is used.

Heritage

If the file is present it will be mixed with the parent chart file according to the following rules:

  • If the category (para, table...) exists in only one of the two files, it is used.
  • If the category (para, table...) exists in both files
    • imports are concatenated
    • Tous les styles du fichier hérité sont mis mais on peut en retirer certains en mettant un style avec l'attribut remove="true". C'est la valeur de <inline-editor> qui permet d'identifier un style.
    • On peut ajouter un style avec une valeur de <inline-editor> non existant dans le fichier hérité est ajouté.
<styles>
    <para> <!-- présent dans le fichier d'origine -->
        <style remove="true">
            <inline-editor>h3</inline-editor> <!-- Style retiré du fichier d'origine -->
        </style>
        <!-- les autres styles sont copiés du fichier d'origine -->
        <style> <!-- nouveau style ajouté -->
            ...
            <inline-editor>X</inline-editor><!-- valeur unique -->
        </style>
    </para>     
    <table> <!-- non présent dans le fichier d'origine : tout est ajouté -->
        ...
    </table>
    <!-- les autres catégories sont copiées du fichier hérité -->
</styles>

Blocking inheritance

By default, inheritance applies, but if the file has the attribute inherit="false", then only the local file is used.

<?xml version="1.0" encoding="UTF-8"?>
<styles inherit="false">
    ...
</styles> 
Back to top

Setup and integration manual