Outils pour utilisateurs

Outils du site


Panneau latéral

manual:richtext

Module Richtext

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

L'utilisation de ce module nécessite la connaissance de la syntaxe CSS

Accéder au module

 Accéder au module Richtext 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.

Créer un style

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 :  Création d'un style

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.

Spécialiser du style par thème

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 : Spécialiser par thème

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

Prise en compte

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.  Appliquer les styles CSS

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

Dans l'éditeur WYSIWYG

Style en ligne

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 :  Application d'un style en ligne

Style en bloc

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 :  Application d'un style bloc

Résultat

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

 Screenshot  Code HTML généré
manual/richtext.txt · Dernière modification: 2017/01/19 14:54 (modification externe)