Customize CKEditor CSS - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 12. There's an updated version available that covers our most recent release.

30-11-2017

Customize CKEditor CSS

The style of the editing area and the 'styles' combo box of CKEditor can be customized. The CSS file that control this styling is specified in the CKEditor configuration property ' contentsCss'. The default style is defined in the file ckeditor/hippocontents.css in the jar file hippo-cms-richtext-ckeditor-plugins. Hence the default configuration is:

{
  contentsCss: 'ckeditor/hippocontents.css'
}

To use custom CKEditor styling in your project, first include a CSS file in your CMS module. For example:

cms/src/main/resources/ckeditor/myckeditorstyle.css

Second, reference this custom CSS file in the CKEditor configuration.

ckeditor.config.overlayed.json:

{
  contentsCss: [
    'ckeditor/hippocontents.css',
    'ckeditor/myckeditorstyle.css'
  ]
}

If the default style should be replaced completely, then do not include 'ckeditor/hippocontents.css' in the 'contentsCss' configuration property.

In Bloomreach Experience Manager 10.2 and above, it is also possible to add custom styles without repeating the hippocontents.css file.
ckeditor.config.appended.json:
{
  contentsCss: [
    'ckeditor/myckeditorstyle.css'
  ]
}

Scope custom CKEditor CSS rules

Each rule in the custom CKEditor CSS file must be scoped to one of these classes:

  • .cke_wysiwyg_div.cke_editable for the editing area
  • .cke_panel_container for the 'styles' combo box
Without proper scoping, custom CKEditor CSS may affect the layout of Bloomreach Experience Manager itself. 

Examples of properly scoped CKEditor CSS rules:

/* make all links in the editing area green */
.cke_wysiwyg_div.cke_editable a {
  color: green;
}

/* make the h1 entry in the styles select box blue */
.cke_panel_container .cke_panel_listItem h1 {
  color: blue;
}

Customize the style of specific HTML fields 

It is also possible to customize the CSS of a specific HTML field instead of all HTML fields. First add a custom CSS class to such a field using "Add CSS class" in the document type editor (e.g. add a CSS class called "myspecialfield"). Second, scope the CSS rules for that field to that CSS class only (e.g. use ' .myspecialfield .cke_wysiwyg_div.cke_editable' as the scope).

To customize the preview of a saved HTML field, follow the steps mentioned in tweak the CSS of the CMS and apply it to the HTML field of your choice.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?