Creating a Custom Theme with jQuery Mobile Theme Roller

The aim of this article is to show you how to customize one of the two available default CKFinder skins (jquery-mobile) to match your environment.

CKFinder UI is based on jQuery Mobile so its look and feel can be changed using jQuery Mobile Theme Roller.

In order to use a theme created with Theme Roller you will need to configure CKFinder to use the jquery-mobile skin by setting the config.skin option.

Creating a Theme

To create a theme visit the jQuery Mobile Theme Roller website and create a custom look. You can create as many swatches as you wish up to the jQuery Mobile limit of 26 swatches.

When you are done editing the theme inside Theme Roller, click the "Download" button at the top of the site.

Use the "Download Theme" dialog window to name your theme. In this guide ckfinder-demo will be used as the theme name.

Installing a Theme

From the downloaded .zip archive extract the themes folder into your public folder.

In this guide the themes folder was extracted directly to the public folder so its path on the web server is /themes/. As a result, the path to the jQuery Mobile theme will be /themes/ckfinder-demo.css.

To use your custom theme, set the config.skin, config.swatch and config.themeCSS options:

CKFinder.start( {
    // Themes created with Theme Roller will work with the 'jquery-mobile' skin.
    skin: 'jquery-mobile',
    // jQuery mobile swatch name. In this guide swatches 'a', 'b' and 'c' were created.
    swatch: 'b',
    // The path to your custom theme.
    themeCSS: '/themes/ckfinder-demo.css'
} );

With the above configuration set, CKFinder will use the newly created theme and its swatch b.

If your theme contains multiple swatches, you can also change the swatch to another after adjusting the config.swatch option. The example below uses swatch c instead.

CKFinder.start( {
    // Themes created with Theme Roller will work with the 'jquery-mobile' skin.
    skin: 'jquery-mobile',
    // jQuery mobile swatch name. In this guide swatches 'a', 'b' and 'c' were created.
    swatch: 'c',
    // The path to your custom theme.
    themeCSS: '/themes/ckfinder-demo.css'
} );