CKEditor remove style preview from Styles dropdown

Question

I've been searching and searching for an answer to this problem and cannot found a solution.

I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.

I would just like the styles in the list to have no preview at all if possible.

I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.

Any suggestions? Thanks in advance!

Answer 1

I was able to do this using the contentsCss config property. So:

CKEDITOR.editorConfig = function( config ) {
  config.contentsCss  = 'wysiwyg.css';
}

then in wysiwyg.css put your CSS code:

.cke_panel_listItem p {
  margin-left: 0px !important;
}