Forum Ametys

Sambo

Guest

Registered: 10/03/2014

Posts: 16

décalage titre de 2 niveaux

Bonjour,

J'ai appliqué mon style personnalisé sur les titre h1, h2, h3 et h4 avec la config suivante de mon fichier edition-style.xml :

<styles>
    <para>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/styles.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>online-editor</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>online-editor</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>online-editor</cssclass>
            </button>
            <inline-editor>h3</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE4_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE4_DESCRIPTION</description>
                <cssclass>online-editor</cssclass>
            </button>
            <inline-editor>h4</inline-editor>
        </style>
...

Côté back, le niveau est bien respecté. Lorsque j'applique à un titre le style Titre 1, mon titre est bien entouré d'une balise <h1>, idem pour les titres de niveaux inférieurs.

Par contre côté front, tous les h sont décalés de niveau inférieur, les <h1> sont transformés en <h3>, <h2> en <h4>, <h3> en <h5>.

Comment s'explique ce décalage et comment peut-on faire en sorte de conserver la hiérarchie du back vers le front?

Merci

Raphaël Franchet

Expert Team

From: Toulouse

Registered: 10/08/2010

Posts: 1,111

Re: décalage titre de 2 niveaux

Bonjour,

ce décalage est là justement pour conserver la hiérarchie des titres.
Quand vous définissez une zone, vous choisissez le niveau de titre de base, par exemple

<zone name="default" level="2"/>

Cette instruction signifie : Un "Titre 1" de contenu ou de service sera mis en <h2>.
Le même contenu dans une autre zone pourrait voir ses titres 1 convertis en <h3>.

Ce n'est pas au contributeur de réfléchir si à cet endroit il doit mettre des "Titre 1" ou des "Titre 2".
Il doit TOUJOURS commencer par des titres de niveau 1 (sinon, il a une alerte à la sauvegarde d'ailleurs) dans un contenu (de même pour les rendus de services).

Donc si vous avez une zone qui est à la racine de votre html, vous pouvez mettre "level='1'", mais c'est clairement un cas très rare que je n'ai jamais rencontré.

Souvent le html ressemble à ça

<h1>Titre de ma page</h1>
<h2>Titre de ma zone</h2>
<h3>Titre 1 de mon contenu</h3>

et les css mon le même rendu pour le h3 en visu, que pour le h1 en édition.

Pour résumé, vous ne voulez pas que vos "Titre 1" deviennent des <h1>

---

Raphael Franchet
Expert Ametys

Sambo

Guest

Registered: 10/03/2014

Posts: 16

Re: décalage titre de 2 niveaux

Merci pour cette réponse qui était claire