Extending Templates for jQueryUI

[cmb]

Hello Template Designers,

I'm a coder, not a designer, and by far less an artist. But I want to bring to your attention the possibilities and necessities given by the jQuery4CMSimple plugin. This is relativly new to CMSimple, but it might be a nice and modern addition. Currently there are no plugins available that use jQueryUI in the front-end, but that is likely to change in the near future. jQueryUI gives plugin developers several new opportunities for web development, but it also requires additional work for the template designers to provide a a look and feel, that's adapted to the templates.

As there are AFAIK currently no plugins available, that use jQueryUI for the front-end of CMSimple, I like to show you some of the modest "improvements", that could be made in the back-end. I've downloaded and installed some of the latest templates presented in the "Templates" forum, and took screenshots comparing the default jQueryUI theme to some other already available ones. I've also posted the according link to the presentation of the jQuery theme.

<EDIT>removed broken links</EDIT>

I guess the further development of plugins making use of the jQueryUI features depends at least partially on the availability of support from the templates. So IMO it would be really nice, if the template designers would have a look at this issue, and provide support for appropriate jQueryUI themes in their templates.

Any comments appreciated.

Christoph

[maeg]

Hi Christoph

I'm not a hardcore coder, but i make all my templates myself!

I totally agree, at the moment i'm working on a new template, maybe you can help me with the finale code, so it supports jQueryUI

/
Maeg

[cmb]

Hi Maeg,

thanks for your reply and your interest in supporting jQueryUI themes with your templates.

I'm not a hardcore coder, but i make all my templates myself!

The theming support for jQueryUI doesn't require any skills except knowledge about CSS. And even that might not be necessary, because of the "themeroller".

About the themes

You could have a look at plugins/jquery/lib/jquery_ui/css/smoothness/. You'll find a file jquery-ui-1.8.13.css there, which defines the theme, and a subfolder images/, which provides the necessary icons. Basically it's possible to edit the CSS manually to create a new theme, but as it's a very extensive CSS file with a lot of style definitions, this is a huge undertaking. But the jQueryUI team provides help: the themeroller.

About the themeroller

You should go to http://jqueryui.com/themeroller/. On the left you'll find the menu, to choose a basic style (Gallery), and the possibility to adjust the basic style according to your wishes (Roll your own). On the right you see the different jQueryUI widgets, which are displayed with the current style settings, so you can see how the (modified) theme looks like. After you're finished creating your theme, just download it, selecting all components (what should be the default).

Integrating the jQueryUI theme into your template

Create a new folder in your template folder called jquery_ui/. Extract the downloaded zip file. Copy the files from /css/NAME_OF_THE_THEME/ to the newly created folder in your template folder. Rename the file jquery-ui-XXX-custom.css to jquery_ui.css.

And that's all you need to do, to add jQueryUI theming support to your template! I quick final test should suffice, to check, that everythings works as expected. Just call a plugin that uses jQueryUI (e.g. in Pagemanager's administration, try to delete a page, so that the confirmation dialog pops up), and see if everything is as you like it.

If you've got further questions, I'm gladly willing to help.

Christoph