Changing editor colors for the Platform Edition

*This tip is working only on Platform Editions*

Changing editor colors

From the 3.6 version, the colors of the editor of the Platform Editions are stored in database. That means if you try to change the colors of your editor from the css files they will be overwritten by the ones stored in database.

Therefore you have to connect to your database, then open the “template_block” table, and here you are! Be careful : since the introduction of the flat design in the 4.2.0 update, the template blocks have been duplicated. If you want to edit blocks for the old siberian design, you should edit only blocks with type_id = 2. For the new flat design, only blocks with type_id = 4.

For example, block editor_menu will affect editor menu colors (Design, Colors, Features, Application, Publication), block area will affect the areas (the carousel of feature, the “add pages” block, etc), block select will affect the dropdown borders and texts colors, etc.

You need to know that the “code” column in this table is the name of the class used in CSS. For example, the row with “color-blue” code is the equivalent of the .color-blue class in CSS.

The 4.2.0 update introduce the user-style.css, which you can use to override the CSS of your platform.

But be aware that your user-style.css will override ALL css, so it can also override your client white label! This CSS should only be used to change the layout of your platform (elements size, elements positionning…). If it’s only a color purpose, you should use the white label for your clients or the database for your whole platform.

Be very careful while editing database, because every change couldn’t be undone, so it’s recommended to backup your table before editing or to know what you are doing!

Changing the colors in the database for the Flat Design editor

To change the colors for the Flat design editor directly in the database, in the template_blocks table you can change the colors of fiels with type_id = 4. As a rule, if the field is null it means this color property is not used.

Was this article helpful?

Related Articles