Want to alter the look of the ckeditor dropdown menu "Styles"

Question

Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?

Answer 1

I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.

Below are classess used by dropdowns in CKEditor 4.x for default skin.

Dropdown buttons on toolbar:

.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text 

Dropdown panels:

.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles 

To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:

.cke_combo__format .cke_combo_text{
width:150px !important;
}

.cke_combopanel__format {
width:250px !important;
}

Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.

Answer 2

Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor. First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme. Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):

ckeditor_stylesheets:
  - css/ckeditor-override.css

Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:

.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}

If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings? Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.

If you don't want to create a subtheme you can try Asset Injector-Module.