CKFinder 3 Documentation

Creating a Custom Skin

The aim of this article is to show you how to create a custom skin for CKFinder.

Please note that creating your own skin from scratch may be time-consuming. If you would like to change some basic things like colors, consider using Theme Roller instead to customize existing skins with your own theme.

Creating a Sample Custom Skin

In this tutorial a sample skin called "light" will be created in order to explain the process of creating custom skins.

Create the Skin Folder

Create the skins/light folder. A skin is nothing more than a folder with the same name as the skin, with the required skin.js file and optional resources like CSS files.

Create the skin.js File

The only required file for a custom skin is skin.js. Save the code below as skins/light/skin.js:

CKFinder.define( {
    config: function( config ) {
        // Use sample custom theme.
        config.themeCSS = 'skins/light/ckfinder.css';

        // Use Moono skin icons.
        config.iconsCSS = 'skins/moono/icons.css';

        return config;
    },

    init: function( finder ) {
        CKFinder.require( [ 'jquery' ], function( jQuery ) {
            // Enforce black iconset.
            jQuery( 'body' ).addClass( 'ui-alt-icon' );
        } );
    }
} );

How Does It Work?

The skin definition is split into two parts: config and init.

CKFinder.define( {
    config: function( config ) {
        // ...
        return config;
    },

    init: function( finder ) {
        // ...
    }
} );
  • The config callback lets the skin alter CKFinder configuration, mainly to point CKFinder to custom CSS files.
  • The init callback lets the skin execute JavaScript code when the application starts.

In the sample skin.js the following occurs:

  • The config.themeCSS is set to the custom stylesheet.
  • CKFinder is instructed to "borrow" icons from the moono skin with the config.iconsCSS setting.
  • The init callback is used to add a class to the body element (the body element inside the iframe that contains CKFinder). This class instructs CKFinder to use the alternative, black version of icons (prefixed with .ui-alt-icon) instead of the default white icons.

Note: For better performance, two default skins of CKFinder 3 (moono and jquery-mobile) have their skin.js files merged into ckfinder.js, so you will not find them in their respective folders.

Create the ckfinder.css File

It is time to create the skin stylesheet. Save the following code as skins/light/ckfinder.css:

html {
    font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
    font-size: 1em;
    line-height: 1.3;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
}

/* Icons */
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
    background-position: center center;
    background-repeat: no-repeat;
}

/* Tweaks */
.ckf-folders-panel .ui-listview > li.ui-first-child > a.ui-btn {
    border-top: 1px solid transparent;
}
.ckf-folders-panel .ui-listview > li.ui-first-child > a.ckf-folders-tree-expander {
    border-bottom-width:0;
    margin-top:0;
}
.ckf-folders-panel .ckf-panel-contents {
    border-width: 0 1px 0 0;
    border-style: solid;
    margin-top:1px;
}

Enable the Skin

Assuming that you put your skin into the <ckfinder>/skins/light folder you can now enable it by setting config.skin to light.

As you can see in the screenshot, the skin is far from being ready to use. You will, for example, need to style UI elements like dialog windows, panels or the context menu.

CKFinder using the "light" skin