changer l'apparence des contenus d'un article

webupsud · 23/01/2014 16:49:33

Bonjour,

Je voudrais modifier l'apparence des tableaux, des formulaires et des différents niveaux de titres / types de paragraphes, non pas en changeant le fichier CSS, mais en appliquant une CSS existante aux contenus. Comment faire sachant que par défaut, Ametys utilise des balises et une structure type. Peut-on modifier cela et comment ?

Merci

Raphaël Franchet · 23/01/2014 17:03:46

Bonjour,

Je ne suis pas sûr de comprendre : vous souhaitez modifier le HTML généré par les textes riches ?
Pouvez-vous me donner un exemple concret de ce que vous voulez faire (avec du HTML avant/après)

webupsud · 23/01/2014 17:42:55

Par exemple pour un tableau inséré depuis l'éditeur, j'obtiens ce code :
<table class="simple" style="width: 100%;">
<tbody>
<tr class="odd first">
<td>
<p> test</p>

que j'aimerais remplacer par celui-ci
<table class="data-table responsive">
<tbody>
<tr>
<td>67%</td>

webupsud · 23/01/2014 17:43:55

et c'est pareil pour tous les contenus que l'on utilise depuis l'éditeur, ils génèrent un code par défaut que j'aurais besoin de modifier pour y appliquer une charte graphique existante.

Raphaël Franchet · 24/01/2014 15:13:11

Alors pour les tableaux; c'est un choix du contributeur (simple, data-strong....).
Donc soit, vous voulez juste ajouter ce choix aux choix existants, soit remplacer...
Soit en sortie, quelque soit le choix de l'utilisateur, forcer à "data-table responsive"

J'ajoute que le width=100% plus haut est lié aussi au choix du contributeur d'avoir une table qui prend toute la largeur.

Alors, pour modifier la sortie des textes riches, il faut intervenir sur la XSL qui transforme le DOCBOOK (format stocké en interne) vers le HTML final. Voici les instructions pour surcharger cela:

Et le lien vers celle par défaut pour que vous voyiez ce que vous êtes en train de surcharger:

webupsud · 24/01/2014 17:23:05

Ce que j'aimerais changer, c'est le fait que quand un utilisateur choisit le style par défaut d'un tableau, ou qu'il applique le style paragraphe introduction à son texte, ou qu'il construit un formulaire, le rendu HTML utilise d'autres classes CSS. Dans le cas du tableau, l'utilisateur n'a pas vraiment choisi le style "simple", c'est le style par défaut. J'aimerais remplacer la classe simple par la classe data-table responsive. J'ai plusieurs cas du même genre (formulaire, tableau, image légendée, style de paragraphe) où le rendu par défaut doit être changé, ou au pire, que je puisse ajouter des styles à ces éléments (mais comment ? et pas sur qu'on puisse le faire pour des éléments de formulaires)

Raphaël Franchet · 24/01/2014 17:56:52

Pour les tableaux et les images il existe des styles par défaut et ceux amenés par la charte.

Par exemple, pour les tableaux, vous pourriez par exemple "cumuler" la classe de votre charte avec celle choisie par l'utilisateur, non ?

Donc dans le fichier docbook2html.xsl de votre skin créé comme expliqué plus haut (avec l'import de la version par défaut), surcharger les lignes suivantes (trouvée sur le lien vers le svn plus haut)

    <xsl:template match="docbook:table">
        <table>
            <xsl:if test="@width = '100%'">
                <xsl:attribute name="style">width: 100%;</xsl:attribute>
            </xsl:if>
            
            <xsl:copy-of select="@class"/>
            <xsl:copy-of select="@summary"/>
            <xsl:copy-of select="@align"/>
            
            <xsl:if test="@title">
                <caption>
                    <xsl:if test="@titleAlign">
                        <xsl:attribute name="style">text-align: <xsl:value-of select="@titleAlign"/>;</xsl:attribute>
                    </xsl:if>
                    <xsl:value-of select="@title"/>
                </caption>
            </xsl:if>
 
            <xsl:apply-templates select="docbook:tbody"/>
        </table>
    </xsl:template>

et remplacer

<table>
       ...
       <xsl:copy-of select="@class"/>

par

<table class="data-table responsive {@class}">

du coup en sortie vous auriez par exemple

<table class="data-table responsive simple">

Ensuite pour les styles de paragraphe, c'est différent car vous les choisissez tous dans votre charte graphique.

Tout ça est expliqué sur cette page

webupsud · 24/01/2014 19:11:36

Merci, j'ai utilisé le fichier edition-styles.xml et cela marche assez bien pour ce que je veux faire.

J'ai un autre blocage (et oui !), cette fois-ci sur les formulaires. Comment puis-je changer leur structure et leur apparence ?

Raphaël Franchet · 27/01/2014 11:19:52

Les formulaires dans les contenus riches sont créés et agencés par le contributeur.
Il dispose de 2 apparences pré-configurées : ligne ou colonne, ou bien il peut choisir "personnalisé" et dans ce cas agence les champs comme il le souhaite.

Si ensuite, vous souhaitez intervenir sur les balises générées, même combat que plus haut : le formulaire est stocké en docbook donc vous pouvez intervenir dans la XSL docbook2html.xsl dans votre charte. Par contre, cette fois-ci il faudra en plus utiliser "priority" comme indiqué dans la doc. Voici la XSL amenée par le plugin forms pour traiter cela:

webupsud · 18/02/2014 12:14:54

pour les formulaires, où peut on changer la structure de la mise en page (dans le fichier que vous m'indiquer, on ne peut changer que les éléments des formulaires).

Or j'aurais d'abord besoin de changer le code qu'Ametys génère pour un formulaire créé via l'éditeur du CMS, à savoir qqchose comme ca :

j'aimerais supprimer la mise en forme via des tableaux pour mettre des balises div à la place

Last edited by webupsud (18/02/2014 12:16:11)

Raphaël Franchet · 18/02/2014 12:38:52

ça c'est du ressort du contributeur en fait. C'est lui qui choisit comment dessiner son formulaire.
Vous disposez d'un bouton Apparence, qui permet de passer de colonnes (tableau) à lignes.

Mais ensuite, le contributeur est libre de la présentation elle n'est pas imposable pas le CMS.
Sauf si dans la XSL en question, lorsque vous interceptez la balise <form> vous ne laissez pas faire le flux XML mais contruisez les enfants "à la main"... mais c'est compliqué et frustrant pour le contributeur qui aura fait une mise en forme qui sera détournée au rendu.

webupsud · 18/02/2014 13:04:39

Je n'avais pas vu que l'apparence libellé au dessus changeait la structure du code généré, en l’occurrence en utilisant des div à la place d'un tableau.

C'est ce dont j'ai besoin... par contre je veux modifier l'attribut class des div générées, comment faire ?

Last edited by webupsud (18/02/2014 14:47:46)

webupsud · 18/02/2014 14:50:57

Et même si l'apparence me convient mieux, il faudrait que je puisse changer certaines petites choses, donc finalement édité le code source généré par l'apparence libellé au dessus des formulaires. Où peut-on le faire ?

Merci

Raphaël Franchet · 18/02/2014 17:15:19

Vous ne pourrez pas faire ça facilement autrement qu'en intervenant sur la XSL de sortie...

RSellin · 30/10/2015 17:46:29

Bonjour,

Je me permets de relancer le thread, car je suis dans la même galère.
Ma nouvelle charte est basée sur BootStrap et si tout se passe correctement au niveau contenu, le rendu des formulaire part en vrille.

Pour bien faire, il faudrait pouvoir générer le formulaire hors d'un tableau.
Dans la XSL en lien plus haut, je ne vois pas aucune référence à une table ou autre.
Une surcharge est-elle réellement possible ?

Merci d'avance

Raphaël Franchet · 02/11/2015 10:55:36

Bonjour,
le rendu des formulaires est laissé à la libre appréciation du contributeur.
En effet, pendant la création d'un formulaire, le contributeur peut choisir parmi trois apparences :
* libellé à gauche qui génère des tableaux
* libellé au dessus qui génère des simples paragraphes
* personnalisé qui permet à l'utilisateur d'organiser comme il le souhaite

RSellin · 16/02/2016 12:13:42

Merci pour la réponse.

J'aimerai surtout intervenir sur la sémantique HTML générée sur chaque champ.
N'y a-t-il pas un fichier comme le docbook2html qui ciblerait le contenu ?

Raphaël Franchet · 08/03/2016 10:58:00

Bonjour,

en effet, c'est la XSL docbook2html qui fait le rendu graphique des champs de formulaire.
Par exemple, au niveau de votre skin vous avez peut-être déjà un fichier cms\skins\demo\stylesheets\io\docbook2html.xsl qui va pouvoir surchargé le rendu par défaut amené par le plugins forms :

Attention quand vous surchargez des rendus par défaut dans docbook2html.xsl, il faut comprendre que toutes les XSLs sont concaténées dans un ordre non-déterministe.
DONC contrairement aux imports classiques, lorsque vous souhaitez surcharger un rendu d'un template existante, il faut ajouter l'attribut *priority="100"* pour que votre template soit choisi à coup sûr.

Forum Ametys

#1 23/01/2014 16:49:33

changer l'apparence des contenus d'un article

#2 23/01/2014 17:03:46

Re: changer l'apparence des contenus d'un article

#3 23/01/2014 17:42:55

Re: changer l'apparence des contenus d'un article

#4 23/01/2014 17:43:55

Re: changer l'apparence des contenus d'un article

#5 24/01/2014 15:13:11

Re: changer l'apparence des contenus d'un article

#6 24/01/2014 17:23:05

Re: changer l'apparence des contenus d'un article

#7 24/01/2014 17:56:52

Re: changer l'apparence des contenus d'un article

#8 24/01/2014 19:11:36

Re: changer l'apparence des contenus d'un article

#9 27/01/2014 11:19:52

Re: changer l'apparence des contenus d'un article

#10 18/02/2014 12:14:54

Re: changer l'apparence des contenus d'un article

#11 18/02/2014 12:38:52

Re: changer l'apparence des contenus d'un article

#12 18/02/2014 13:04:39

Re: changer l'apparence des contenus d'un article

#13 18/02/2014 14:50:57

Re: changer l'apparence des contenus d'un article

#14 18/02/2014 17:15:19

Re: changer l'apparence des contenus d'un article

#15 30/10/2015 17:46:29

Re: changer l'apparence des contenus d'un article

#16 02/11/2015 10:55:36

Re: changer l'apparence des contenus d'un article

#17 16/02/2016 12:13:42

Re: changer l'apparence des contenus d'un article

#18 08/03/2016 10:58:00

Re: changer l'apparence des contenus d'un article

Board footer