14/10/2023 Franck Bugnet Trick

Customizing the display of HTML editors, such as background color

Here's how to configure CKEditor to choose the background color, font color and sizes of the Merlin Backoffice HTML editor


Applicable to : Merlin Backoffice ™, PrestaPricing and PrestaCategorie addons (tuto and screen shots made with PrestaPricing)

Starting point

Depending on the choice of the theme of your site, you may be confronted with one of the following problems, when displaying the description of a product or a category, in the HTML editor of the form tab:

  • Colored background instead of being white as on your site
  • Texts unreadable because of a color very close to that of the background     
  • Unreadable texts because too small characters


Here is an example, regrouping the three problems, gray background, texts in a very close and tiny gray:

CkEditor with illegible text

This is because when loading this HTML editor, based on CKEditor, it reads and uses the global style sheet of your theme (the global.css file in the theme / css / folder of your Prestashop). In this style file, can be found these few lines that define the color of the background of your site, size, color and text font:

CkEditor with illegible text

These are the settings that the CKEditeur uses in the module and which are not always suitable for a good reading.

How to change the background color and text size, color and font in the HTML editor (CKeditor) in the modules?

In the first place it is imperative to use the minimum version 7.3.a of the Sitolog Application Connect module. If you are using an older version, see next paragraph for a solution.

In the folder of this module (so in /modules/sitologapplicationconnect/  on your server), there is a ck.css file, which is a style sheet used exclusively by the HTML editor, in PrestaPricing and PrestaCategories.

This style sheet does not affect the apsect of displaying pages on the site. By default, its contents are as follows:

  /* 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: */
    
}

So by just installing version 7.3.a minimum, with these values, by default, without doing anything else, the background color will be that of the application (white) instead of that of the site. This already solves 80% of the problems.

If you also have a problem with color, size or text font, simply remove the mark tags (/ * and * /) as below and optionally change the value of the color (# 000000 is Black), the size of the characters (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: */
   
}

You can also add any other settings to this style file, as long as you respect the CSS "language". Again, this will not affect the views on the site, these are settings that only change the display in our two modules.

Save your changes and choose another version of the editor (Basic, Standard, Complete) to reset it, your description is now perfectly legible, written in black, size 14 pixels, in arial, on a white background:

CkEditor with illegible text

If you do not have version 7.3.a or later of the connector module

1 / Create a new file in the /modules/sitologapplicationconnect folder, called ck.css, and fill it with the same code as seen previously:

/* 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 / Modify the file /modules/sitologapplicationconnect/open_ck.php, around line 64, replacing:

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

By (the difference is in green):

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

The purpose of this change is to load the ck.css file after it calls the global.css stylesheet. So the body styles will be overriden.

Hoping that this tutorial will have been useful to you, next week we will show you how to quickly organize the space, that is to say the size of the different zones, thanks to separators and some unknown functions.


Category's other articles Settings and ergonomic tips

Settings
  • Login
    • £ GBP
    • $ USD
Menu