CKSource

Skins

The FCKeditor interface is built using a skin system. The package is distributed with three skins ready to be used, but you can easily create your custom one.

The distributed skins can be found in the "editor/skins" directory. Each skin (default, office2003 and silver) has its own directory with its files. Take a look at the "_samples/html/sample05.html" files to see those skins at work.

Creating your Skin

The easiest way to create a skin is making a copy of the default one and making modifications to its files. So, just make copy of the "editor/skin/default" folder and give it the name you prefer.

It is recommended to place your skin outside the FCKeditor directory. In this way you don't have to be afraid of losing it when updating the editor to newer versions.

Basic Skin Files

The following files must be found in your skin directory:

   * fck_editor.css: this file defines the main interface, including the toolbar, its items (buttons, panels, etc.) and the context menu.
   * fck_dialog.css: this file defined the dialog boxes basic structure (standard for all dialogs).
   * fck_strip.gif: the default toolbar buttons and context menu icons are designed in this special image file. It is a vertical image containing all icons placed one above the other. Each icon corresponds to a 16x16 pixels image. Custom images can also be added to this "strip".
   * images/toolbar.buttonarrow.gif: the small arrow image used in the toolbar combos and "panel buttons". 

Other images used by the skin (in the css files) are encouraged to be placed in the "images" folder.

The CSS Files

The most common way of customizing the skin is by making changes to the fck_editor.css and fck_dialog.css files. Those files have some comments regarding their contents.

So, just go playing with those files and have fun! If your changes to the .css files appear to have no effect, try flushing your browser's cache and reload the page containing the FCKeditor.

Configuring the Editor

By default, FCKeditor is configured to use the "editor/skins/default" skin.

It is quite simple to set the editor to use other skin. Just set the SkinPath configuration option to the skin directory path. For example, in the fckconfig.js file:

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

Or:

FCKConfig.SkinPath = '/MySkin/' ;

Of course the best solution is to set the skin directory path in your cutom Configuration File

You may also set the path in the server side, when creating an editor instance. In PHP, for example:

$oFCKeditor->Config['SkinPath'] = '/MySkin/' ;

Publishing and Downloading Skins

You can find our Skins directory at our SourceForge web site, following this URL: http://sourceforge.net/tracker/?group_id=75348&atid=740153

We are inviting our community to publish your skins there.