24 May 2017

Custom CSS styles with CKEditor and Wysiwyg Module in Drupal 7

The CSS Zebra
The CSS Zebra

In Drupal 7 you can easily define custom CSS styles which you can choose within the editor. It is a small, useful feature that makes writing an article easy and saves a lot of time. Here a tutorial with the Wysiwyg Module and the CKEditor libraries. It lets you apply your CSS classes of your style sheet to choose from the drop-down menu in the CKEditor.

Installation of the modules

If you have not already done so, download the Wysiwyg module, and the modules IMCE and IMCE Wysiwyg bridge for the image integration. Unpack the modules in the /sites/all/modules folder. Then download the CKEditor JavaScript package - the standard package will do - and unzip it to the folder /sites/all/libraries. Make sure that the version of the CKEditor is compatible with the Wysiwyg module. Install the modules.

CKEditor profile

Under Configuration → Content authoring → Wysiwyg profiles create a new profile. As an example I will create the profile "Full HTML".

CKEditor:create a profile with the Wysiwyg module in Drupal 7
When selecing the CKEditor on their download site make sure that the version of the CKEditor is compatible with the Wysiwyg module. Here a "Full HTML" profile is created, so there are no restrictiones.

 

Under "Editor" select the CKEditor. Create the profile and add desired buttons and plugins. Under the tab "CSS" the classes and elements can be defined.

If the styles of the custom style sheet shall be shown within the editor, choose "Use theme CSS" in "CSS Editor".

Some CSS elements, like h1-h6 are already in place. Other CSS classes and HTML elements can be added.

Custom CSS classes

Now, in the section "CSS classes" you can enter your own classes. The syntax is [label]=[element].[class].

The [label] can be chosen freely as a name, [element] is the HTML element, and [class] the CSS selector.

For example, you have a class .blue in your style sheet.

.blue {fontsize: 0.9em; color: blue;}

The entry in "CSS classes" would be:

blue font=p.blue

When working on an article within the CKEditor, select the desired section, and choose the CSS class in the drop-down menu under "Style".

HTML block formats

Also you can add HTML elements like blockquote and code in the section "Block Formats". If you want, add classes to them like above. But also if you have them plain set without classes in your style sheet, , e.g.:

code {font-family: monospace, background-color: #ccc;}

you may choose the formats in the CKEditor.

Just fill in your elements in "Block formats", comma separated, and without a blank space.

Like above, select the desired section while working with the editor, and choose the format under, well, "Format".

Here just a few examples as they could appear in a style sheet:

ul.info {list-style-type: square;}

h2.sidebar {font-size: 1.2em;}

.green {color: #008000;}

In the Wysiwyg profile fill in the following:

info list=ul.info

titel sidebar (H2)=h2.sidebar

green span tag=span.green
Custom CSS classes and HTML block elements in the CKEditor profile
Custom CSS classes can be added easily in the Wysiwyg configuration in the CKEditor profile. In "Block formats" just add plain HTML block elements. If you want to give the a class, list them under "CSS classes".

 

Once configured, the application is very easy to handle. Just with list HTML elements like ul and ol mind, that you first select the list items, and then click on the list buttons ("Insert Bulleted List" or "Insert Numbered List"). After that a custom ul- or ol class will show up in the "Styles" menu. Find the block elements under "Format".

Here the source code would look like:

<p class="blue">Here is a test <span class="green">article</span> with a list:</p><ul class="info"><li>sub-item 1</li><li>sub-item 2</li><li>sub-item 3</li></ul>

Wrinting an article, CSS classes appear in the CKEditor
When writing an article within the editor, choose the "Full HTML" format which you have previously created. Find your CSS classes in the menu under "Style", block elements under "Format".

 

It pays off to define the own CSS styles once for your work. It's always the same styles which are used. You can quickly integrate a larger number of custom styles. But also with a small number of own styles it makes writing easier than switch to the source code and then fill in your style.

Add new comment