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