This video shows how to define the CSS that should be used to render content in the CKEditor wysiwyg as well as what styles are available in the “Styles” dropdown.

Editor CSS

In the CSS section the first option is “Editor CSS”. This is where you can set what style sheet should affect the content of the wysiwyg. CKEditor comes with it’s own default stylesheet, but you can select another stylesheet if you want. (I’ll open a new tab to the create article page to see these settings in action.)

  • “CKEditor default” will use the default stylesheet. When I type in the box and inspect the element, we see that the css file being used is at “sites/all/ckeditor/contents.css”
  • “Use theme CSS” will use the current theme CSS. In this case, I’m using Bartik as the display theme. (Notice it’s not using the administrative theme) So, when I select this, refresh the “Create Article” page, and type in the box, we can inspect the element and see that the css file being used is at “/themes/bartik/css/style.css”

  • “Define CSS” will allow you to select a custom CSS file (or files) that you want to use. I’m going to create a new css file that sets the color of h1 tags to #f00 (red).

  • Create a file “editor.css” and place it in “sites/all/themes/editorcustom” (If you’ve created a custom theme, or sub-theme, you can place this file in that theme folder. But, if you’re using one of the free themes from drupal.org, don’t place it in your theme’s folder, as it will be overwritten when you update the theme.)

  • Add the following to “editor.css”
    • h1 {color:#f00;}

CSS file path

This field is only used if you select “Define CSS” in the previous field. I’ve already created the css file to use here, so I’ll enter the following path.

  • /sites/all/themes/editorcustom/editor.css

Now, I’ll refresh, and enter some text. This time, when I change the format to “Heading 1” the text is red. So, it works!

I’m going to change the “Editor CSS” back to “CKEditor default” for the rest of the series, just to keep things clean. When I do that, I’ll also be required to clear the “CSS file path” field and click “Save”.

Predefined styles

In order to use the predefined styles, we need to enable the “Styles” button. (You’ll also need to have configured the text format to allow the “style” attribute using HTML Purifier like we did in an earlier video. If you experience issues getting the “Styles” button to work, refer to the HTML Purifier setup video.)

  • In the “Editor Appearance” section, drag the “Styles” button to the “Used buttons” toolbar.
  • Click “Save”

With “CKEditor default” styles selected, I’ll refresh the create article page. Now, in the “Styles” dropdown, we have a number of styles available to us including “Blue Title”, “Red Title” etc.

Now I’ll select “Use theme ckeditor.styles.js”, and click save. When we refresh the create article page, it appears nothing has happened. This is because the Bartik theme doesn’t have a “ckeditor.styles.js” file, so it’s using the default one.

I’m going to copy the “ckeditor.style.js” file from the CKEditor module folder to “/sites/all/themes/editorcustom”. Then I’ll edit the file and add the line:

  • { name : 'Green Title' , element : 'h2', styles : { 'color' : '#36ba0c' } },

Predefined styles path

Now, I’ll enter “/sites/all/themes/editorcustom/ckeditor.styles.js” in the “Predefined styles path” field and click “Save”.

This time, when we refresh the create article page, we can select “Green Title” from the “Styles” dropdown.