Le but de cette documentation est de vous permettre d'enrichir les styles disponibles dans les éditeurs de texte en backoffice.

Si vous avez les droits d'accès au module, vous le trouverez dans le menu “Outils” du backoffice, comme le montre la capture d'écran.

Si vous ne voyez pas le module cela peut être pour l'une des raisons suivantes :

• vous n'avez pas les droits nécessaires
• le module n'est pas installé

Dans les deux cas, contactez l'administrateur du site pour qu'il remédie au problème.

Une fois dans le module, on se positionne sur le dossier racine, puis on clique sur Créer… pour choisir Créer une définition de style, comme le montre l'image ci-dessous :

Apparaît alors le formulaire de création de style qui permet de renseigner les caractéristiques du style :

• Libellé : permet d'indiquer le nom du style dans la liste déroulante de sélection des styles dans les champs de type texte
• Balise : permet de choisir la balise qui devra entourer le texte sur lequel s'applique le style.
  IMPORTANT : Il n'est pas possible d'employer ici de balise div
• Classe : nom de la classe CSS qu'utilisera la définition de style
• Style de bloc : Cocher oui pour un style de type bloc et non pour un style en ligne.
  IMPORTANT : L'utilisation d'un style de type bloc impose l'utilisation de balise de type bloc (h, p…)
• Code CSS : Vous permet d'indiquer le code CSS du style

Une fois que l'on a renseigné tous les champs i lsuffit alors de cliquer sur le bouton Créer pour enregistrer le style.

Une fois le style créé il est possible de le spécialiser pour un thème en particulier, pour cela il suffit de cliquer sur l'onglet Spécialisations par thème. Vous avez dans cet onglet la possibilité de choisir dans une liste déroulante le thème pour lequel vous souhaitez spécialiser votre style, une fois le thème sélectionné il ne reste qu'à cliquer sur le bouton Spécialiser :

Le formulaire qui va s'afficher ensuite permettra d'indiquer un code CSS différent pour le sélecteur désigné par le style dans le contexte du thème sélectionné .

Pour que le style créé soit pris en compte, faites un clic droit, puis choisir Appliquer les changements. Si cette étape n'est pas accomplie, alors le style ne sera pas présent dans la liste de l'éditeur de texte.

Une fois l'application des styles effectuée vous aurez validant le bon déroulement (screenshot ) de l'application des styles. Une fois cette étape passée, vous devez recharger le backoffice à l'aide du bouton Recharger l'interface

Dans l'éditeur WYSIWYG sélectionnez le texte sur lequel vous souhaitez appliquer votre style puis appliquez le comme sur la capture d'écran ci dessous :

Dans l'éditeur WYSIWYG placez vous dans le bloc sur lequel vous souhaitez appliquez le style puis appliquez le style le comme sur la capture d'écran ci dessous :

Une fois que vous avez enregistré vos modifications et publié le document qui en fait l'objet, vous pouvez voir vos modifications en front office. Dans l'exemple ci-dessous, nous avons appliqué un style en ligne (classe CSS redSelection) et un style en bloc (classe CSS paragraphOrange) :