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:
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:
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:
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
-
How to turn off the automatic display of the control panel?
Trick
A quick and easy tip to control how and when the control panels should appear and disappear in Sitolog's addons like PrestaPricing or Merlin Backoffice
-
How to lock, detach and anchor the control panel?
Trick
This simple trick show you how to lock control panels in Sitolog Prestashop addons, anchor them or place them on a second screen.
-
How to display all PrestaShop products
Trick
In all Sitolog PrestaShop mass edit add-ons, there is a very simple way to display more than 5000 or even all products or combinations lines, by changing the paging value
-
Adjust the horizontal scrawlers of the tables to define the fix columns
Trick
This tip allows you to set the limit between the still visible and static columns to the left and those that you can scroll right through the horizontal elevator in PrestaPricing, Prestacategories and Merlin Backoffice
-
How to maximize the working areas thanks to the separators?
Trick
The Prestashop addon Merlin Backoffice is easily customizable. See here how to you can resize the various working areas
-
How to select all the rows of a block with a single click?
Trick
This Merlin Backoffice addon tips allows you to select all the lines of a block very quickly, like all the products of a category
-
How to solve product photos being not displayed in PrestaPricing ?
Trick
All correct settings to apply if product photos do not show up in Merlin Backoffice PrestaShop addon
-
10 super efficient ways to boost your data management...
Tip
Merlin Backoffice speeds up the admin process by a 100 factor. Discover its 10 best settings to work fast, without slowness, and thus be able to administer products without heads.
-
Search and select multiple lines in one single operation
Trick
How to with Merlin Backoffice for PrestaShop, search and select in one single step, products or categories (or other items), matching any filter, to mass edit them
-
Fast and advanced search and filtering methods in PrestaShop
Video
How to
Very detailed video tutorial to learn how to quickly search for products or variations, or filter the contents of catalog tables in the PrestaShop database using Sitolog's Merlin Backoffice module
-
Voir le nombre de produits par catégorie