Customizing the display of HTML editors, such as background color

Modules concernés : Merlin Backoffice ™, PrestaPricing et PrestaCatégorie (tuto et captures d'écran réalisées avec PrestaPricing)

Situation de départ

En fonction du choix du thème de votre site, il est possible que vous soyez confronté à un des problèmes suivants, lors de l'affichage de la description d'un produit ou d'une catégorie, dans l'éditeur HTML de l'onglet "fiche":

• Couleur du fond coloré au lieu d'être blanc comme sur votre site
• Textes illisibles car d'une couleur très proche de celle du fond
• Textes illisibles car trop caractères trop petits

En voici un exemple, regroupant les trois problèmes, fond gris, textes dans un gris très proche et minuscules:

Cela est du au fait que lors du chargement de cet éditeur HTML, basé sur CKEditor, celui-çi lit et utilse la feuille de style globale de votre thème (le fichier global.css du dossier theme/css/ de votre Prestashop).

Dans ce fichier de style, peut se trouver ces quelques lignes qui définissent la couleur du fond de votre site, la taille, couleur et police des textes:

Ce sont ces réglages que reprend le CKEditeur dans le module et qui ne sont pas toujours adaptés à une bonne lecture.

Comment modifier la couleur de fond et la taille, couleur et police des textes dans l'éditeur HTML CKeditor ?

En tout premier lieu il faut impérativement utiliser la version 7.3.a minimum du module Sitolog Application Connect. Si vous utilisez une version plus ancienne, voir un peu plus bas.

Dans le dossier de ce module (donc dans /modules/sitologapplicationconnect/ sur votre serveur), se trouve un fichier ck.css, qui est une feuille de style utilisée exclusivement par l'éditeur HTML, dans PrestaPricing et PrestaCatégories. Cette feuille de style n'a aucune incidence sur l'apsect de l'affichage des pages sur le site.

Par défaut, son contenu est le suivant:

/* Sitolog CKEditor CSS settings 7.3.a */
/* Feel free to customize to your own needs - Has no impact on the site pages*/
/* A personnaliser selon vos propres besoins - Sans aucune incidence sur les pages du sites*/

body{
    background:none ;  /*background - Fond*/
    /*color:#000000;*/    /*texts color - couleur des textes*/
    /*font:14px Arial;  */  /*font size and style - Taille et style de police*/
    
    /*add other style settings below: */
    /*ajouter vos autres réglages de style ci dessous: */
    
}

Donc juste en installant la version 7.3.a minimum, avec ces valeurs, par défaut, sans rien faire d'autre, la couleur du fond sera celle de l'application (blanche) et non plus celle du site. Cela résout déjà 80% des problèmes.

Si vous avez aussi un problème de couleur, de taille ou de police des textes, il suffit d'enlever les balises de marque (/* et */) comme ci dessous et éventuellement modifier la valeur de la couleur (#000000 c'est noir), de la taille des caractères (14px) etc... :

/* Sitolog CKEditor CSS settings 7.3.a */
/* Feel free to customize to your own needs - Has no impact on the site pages*/
/* A personnaliser selon vos propres besoins - Sans aucune incidence sur les pages du sites*/

body{
    background:none ;  /*background - Fond*/
    color:#000000;    /*texts color - couleur des textes*/
    font:14px Arial;    /*font size and style - Taille et style de police*/
    
    /*add other style settings below: */
    /*ajouter vos autres réglages de style ci dessous: */
   
}

Vous pouvez aussi ajouter dans ce fichier de styles tout autre réglage, tant que vous respectez le "langage" CSS. Encore une fois, cela n'aura aucune incidence sur les affichages sur le site, il s'agit de réglages modifiant uniquement l'affichage dans nos deux modules.

Sauvez vos modifications et choisissez une autre version de l'éditeur (Basique, Standard, Complet) pour le réinitialiser, votre description est à présent parfaitement lisible, écrite en noir, taille 14 pixels, en arial, sur fond blanc:

Si vous n'avez pas la version 7.3.a du module connecteur

1/Créer un nouveau fichier dans le dossier  /modules/sitologapplicationconnect, que vous appelerez ck.css, et remplissez le avec le même code que vu précédement :

/* Sitolog CKEditor CSS settings 7.3.a */
/* Feel free to customize to your own needs - Has no impact on the site pages*/
/* A personnaliser selon vos propres besoins - Sans aucune incidence sur les pages du sites*/

body{
    background:none ;  /*background - Fond*/
    color:#000000;    /*texts color - couleur des textes*/
    font:14px Arial;    /*font size and style - Taille et style de police*/
    
    /*add other style settings below: */
    /*ajouter vos autres réglages de style ci dessous: */
   
}

2/Modifiez le fichier  /modules/sitologapplicationconnect/open_ck.php, au environs de la ligne 64, en remplaçant :

contentsCss: [ +'css/global.css', +'css/'++'.css' ],

Par (la différence est en vert):

contentsCss: [ +'css/global.css', 'ck.css',+'css/'++'.css' ],

Cette modification à pour fonction d'appeler le fichier ck.css.

En espérant que ce tutoriel vous aura été utile, la semaine prochaine nous vous montrerons comment organiser rapidement l'espace, c'est à dire la taille des différentes zones, grace aux séparateurs et quelques fonctions méconnues.