colorRoller | jQuery Plugin

$.colorRoller()RC

a jQuery ThemeRoller plugin

New Features
[ ver. 0.1.1 | 2017-02-21 ]

  • jQuery 3.x support

    This version has been updated to work with the latest version of jQuery (3.x)

  • External source support [php required]

    Specify a jQuery theme that's hosted on a different server or domain. fetchCSS documentation


Upcoming Features

  • Support for script minification

    Currently this plugin requires a seperate un-minified theme to work. In future we'll add support for minified versions of jQuery UI themes.

  • CSS generator

    Load an external jQuery theme to extract colors and generate css that you can use on your site.

$.colorRoller Features ver. 0.1.1

2017-02-21
Use individual ThemeRoller colors on your page

$.colorRoller extracts colors from a jQuery UI ThemeRoller theme and makes them available for individual use on the page. You can either let the plugin handle this on page load, or copy the css output to your main css file linked to your site. check out the $.colorRoller demo

$(document).ready(function($) { $.colorRoller(); });

[ see basic setup requirements and installation instructions in the $colorRoller documentation section ]


DOM availability

After page load, each theme parsed by $.colorRoller will be available in a DOM object. Hex colors can be programmatically retrieved from the colorRoller DOM object. see an example

colorRoller['theme-name'].uiHex.bgColorHeader

[ DOM object is named: colorRoller - note missing $. when accessing the DOM object ]


Additional themes

Limited by the number of colors in your ThemeRoller theme? Good news, ThemeRoller supports css scoping which enables you to add multiple ThemeRoller themes to a page. $.colorRoller supports multiple themes by specifying the theme name and css scope when initializing $.colorRoller. see an example

$.colorRoller({themeName: 'secondary-theme', cssScope: 'secondary'});

Callback Support

To ensure the parsed colors will be available when assigned to elements, you can add any scripted styling on $.colorRoller's callback function.

$.colorRoller({options}, function(){ ...callback function... });
Usage License | Feedback | © 2017 - Francois du Plessis
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Creative Commons Licence