• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!


ThemeRoller gallery

Page history last edited by Yanick 14 years, 6 months ago

The ThemeRoller gallery tab needs a functionality re-vamp to make it more interactive with voting and user-generated themes. 


New Community-driven gallery

The current gallery consists of a hard-coded flat file with a set of TR URLs. It would be nice to transition this into an area where jQuery UI  users can submit themes from ThemeRoller and have the gallery display them by recency, views, rating, etc.


Each saved theme would have the following attributes:


  • Server-generated thumbnail for each theme
  • Title (ex. "South Street")
  • Name of creator: optional, default to "Unknown" if left blank (Ex. "John Doe")
  • Web URL of creator, use as link for creator name: optional do not link name if left blank (Ex. www.foo.com)
  • Average star rating of theme (1-5 stars) and total count of votes
  • Date added (Ex. "November 22, 2008")
  • ThemeRoller URL


Themes could then be sorted by:

  • Most viewed (most clicks to view > least)
  • Newest (latest date first > oldest)
  • Top rated (highest rating > lowest)
  • Color palette (nearest matching color overall > least)


The mockup on the right is a very early sketch (yes, the tabs are wrong) that illustrates how this could look in the new ThemeRoller layout. Each theme could simply have the thumbnal, title, creator and star rating to keep the presentation simple and compact.

Clicking on a theme would refresh the widget preview on the right but keep the user on the gallery tab. Once a theme is clicked, we can use an animation to display the theme actions panel (see lower right gray box with "jQuery UI Default" title). In the theme actions panel, we display:


  • Title
  • "by {creator}" - creator name is linked ot their web URL (if provided)
  • Rate this theme label with 5 star rating widget that saves on click via AJAX
  • Download button - creates downloadable zip of theme css and widget sample pages
  • Customize button - flips use over to the "Roll your own" tab pre-filled with selected theme values


In order to make this happen, we would need a developer who has the time to build out this functionality. Filament Group can provide all the front end design and coding, but we need a developer to built out the back end and database.




Feel free to keep adding new ideas!

Comments (7)

Steven Black said

at 9:33 am on Apr 16, 2009

Newb question about themes.

Background: I have several applications still under development with Theme Switcher capability. This makes for great demos, and it's expected that theme-switching demonstrates considerable ability to extend and customize the application.

It's all good.

EXCEPT: In some themes invoked by the Theme Switcher, the font-size is notably larger, and this plays havoc with some of our UI controls, especially the jqGrid plugin, whose next version is ThemeRoller-ready.

QUESTION: Can anyone see a rational way to cleanly separate theme-switching from font-size switching?

Switching fonts when switching themes is cool! Switching font-sizes, not so much.

**--** Steve

scottjehl said

at 10:33 am on Apr 16, 2009

Good question.
We included font size in theming because what looks right in one font can look very different in another. For example, Verdana is a pretty large font, whereas something like Trebuchet MS is pretty small.

If all widgets had a base font size of say, 11px, it might look too large in some fonts and too small in others. By tying font-size to themes, it allows you to make tweaks to make a widget feel "just right" with a given type face.

That said, I'm not entirely sure what you're suggesting. Are you requesting the removal of font size from themeroller or just the theme switcher?
thanks for the input!

scottjehl said

at 12:11 pm on Apr 16, 2009

In your particular app, you could just set the font size on your widget with a very specific selector and it should override the themes that come in.

Steven Black said

at 12:34 pm on Apr 16, 2009

Thanks for the reply, Scott. Interesting links. Yes, I knew about the different apparent font-sizing among fonts, but the links you provide make this tangible and appreciable.

I didn't mention -- I think this is a cool use-case -- to make the WHOLE APPLICATION themeable, I've made every page themeable. Therefore,
* The page header area is class .ui-widget-header
* The rest of the pages below the header are class .ui-widget-content
* And therein can be found normal widgets like tabs, datepicker, jqGrid, etc.

This nesting works great and it looks really good too. Fantastic, in fact.

The font switching is good too but in some cases, within jqGrid for example, things get a little out of hand. The difference between "Cupertino" and "Excite Bike" or "Humanity" is quite large and I wonder if we should tune-up Cupertino, or tune-down the others somewhat.

I wish there was a callback on the ThemeSwitcher tool. Maybe there is? I'll check.

Anyway, I think it might be helpful to look at ThemeRoller as something useful way beyond jQuery-UI widgets.

**--** Steve

Ricardo Feltran said

at 10:56 am on Dec 14, 2009

I am from Brazil
Congratulations this is fantastic.
Ricardo - São Paulo

Yanick said

at 11:26 pm on Jan 3, 2010

I can't wait to have user contributed themes! The existing ones are nice, but I had to roll my own for a personal project, and would contribute it if this was possible...

johnslegers said

at 5:35 pm on Jan 19, 2012

A pre-release of jQuery Bootstrap has been published at http://jslegers.github.com/jquery-bootstrap/ . This new framework combines the layout of Twitter with the semantics of jQuery into a CSS framework that's a jQuery UI theme as well.

Any feedback would be appreciated!

You don't have permission to comment on this page.