How to Modify the Ephox Stylesheet and Features


 Ephox EditLive! allows system administrator and developers to configure the styles used by the editor by setting predefined styles in the drop down menu. This document describes how to do this.


The Ephox EditLive! is an text editor with word processor capabilities like autosave, tables, images, font styles and lists. It's commonly used in IBM Web Content Manager for editing content items as it provides a Microsoft Word© like interface which makes users feel more comfortable using it. Ephox EditLive! allows system administrator and developers to configure the styles used by the editor by setting predefined styles in the drop down menu. This document describes how to do this.

How it works?

Ephox EditLive! editor stores its styles in its own configuration file called "ibm_eljconfig.xml.jsp".

The configuration file is a combination of JSP, CSS and XML. When the editor is loading it reads the configuration file to set everything up before the editor is shown to the user.

It uses JSP instructions (Java) to produce different XML elements in the file, depending on user's settings and/or groups they belong to.

It also contains an style block where we can define any styles we want to be available when the user is editing a content item. This style block is like any other style block found in an HTML file. The Ephox configuration file allows for an external file to be included by using the <link> tag the same way it's used in an HTML file. This document explains the block method.

Accessing the file

To get the file we go to the following path in the server where IBM WCM is installed:


for example, in a Unix server it could be:


From that directory we can get a copy of the "ibm_eljconfig.xml.jsp" file and open it on our favorite editor. Don't forget to save a backup copy before modifying the file.

Configuring the file

As we previously said the configuration file contains a style block similar to this:

<style type="text/css">

@charset "UTF-8";

/* Version: 2012-12-17 */

/* Default font */
body {
	font-family: "Helvetica";
	font-size: 12px;

td {vertical-align: top}
a {color: #028bd4}
hr {
	border: none 0;
	border-top: 1px solid #b3b4b4;
	height: 1px;

In this block we can add, remove or modify any styles like we do in any CSS stylesheet. The important part of editing these styles is that the classes we define here are loaded in the editor's styles drop down menu so they can be applied to the text the user selects. This drop down menu is context-dependent, only classes that make sense to the current text being edited will be shown. If the text is a paragraph it won't show styles for a list (<li> elements) until you are editing/selecting a list.

The other options we can configure is the font face and font size drop down menu. These are not configured in the style block but in its own XML tags in the same file.

<!-- Font Face drop-down -->
<toolbarComboBox name="Face">
	<comboBoxItem name="Arial" text="Arial"/>
	<comboBoxItem name="Courier New" text="Courier New"/>
	<comboBoxItem name="Helvetica" text="Helvetica"/>
	<comboBoxItem name="Sans-serif" text="Sans-serif"/>
	<comboBoxItem name="Georgia" text="Georgia"/>
	<comboBoxItem name="Times New Roman" text="Times New Roman"/>

<!-- Font Size drop-down -->
<toolbarComboBox name="Size">
	<comboBoxItem name="10px" text="10px"/>
	<comboBoxItem name="12px" text="12px"/>
	<comboBoxItem name="14px" text="14px"/>
	<comboBoxItem name="16px" text="16px"/>
	<comboBoxItem name="18px" text="18px"/>
	<comboBoxItem name="20px" text="20px"/>
	<comboBoxItem name="22px" text="22px"/>
	<comboBoxItem name="24px" text="24px"/>

Debugging Ephox Editlive! configuration file

If we make changes to the configuration file and we want to be sure those changes are being taken by Ephox Editlive! editor then we can enable debugging to see the contents of the configuration file being loaded by Ephox Editlive! editor.

To do this we go to any content item that loads the Ephox Editlive! editor, when the editor is in edit mode (i.e. it allows to edit the content) we go to the "Help" menu and we click on "Enable Debug Logging".

After this we have to enable Java console to see the logging of the editor when it loads. To do this we open the Java Control Panel utility by going to "Control Panel" and double clicking the Java icon.

This will open the Java Control Panel. We go to the "Advanced" tab an enable the Console by selecting "Show Console" and clicking "OK" button to save the changes.

Now that we enabled debugging we must restart the browser. Then we go to any content item that uses Ephox Editlive! editor. When the editor is loading the Java Console will pop up displaying the configuration file loaded by the editor.

Enterprise Web Development, System Analysis, Database Design
Oliver is an experienced software developer, system analyst and database programmer. He has over eight years of experience in software development including manufacturing, supply chain management and financial modules. As an Enterprise Web Developer and Solution Architect he has provided portal support using IBM products while also improving and releasing an enterprise portal redesign and implementation. In his free time he enjoys experimenting with different programming languages and tools.