Search code examples
jqueryjquery-uiwidgetthemeroller

Using jQuery UI Themeroller together with a custom jQuery UI widget?

I am getting the benefits of Themeroller combined with the standard widgets included in jQuery UI.

The part that leaves me guessing is using Themeroller together with a custom widget that's build on top of the jQuery UI widget factory.

This is what's stated under the help tab on http://jqueryui.com/themeroller/:

The framework is designed to be used not only for our own jQuery UI components, but for custom UI widget development as well! Visit the jQuery UI documentation to learn more about the new jQuery UI CSS Framework

So I go to the page about jQuery UI CSS Framework. And this leaves me with two important questions that are not clearly covered on the jQuery UI website:

  1. As a developer, how do you set up Themeroller for your custom widget?
  2. As a user, how can one theme that custom widget with Themeroller?

The reason why I want to use Themeroller is because I want to offer the user an easy way to style the widget, even if they don't know anything about CSS. I am also open to alternatives to Themeroller.

Solution

  • You have to use the jQueryUi CSS classes in your widget to use the same background images font-sizes borders and so on.

    Any changes to those classes in the themeroller will then also affect your widget.