Thursday, March 25, 2010

Restoring jQuery UI Theme from ThemeRoller


If you ever use jQuery's Theme Roller, you may find it frustrating to alter a custom theme. For example, if you created a theme, downloaded it, then decided to change your colors you may not know how to restore your changes.

Believe it or not there's a pretty easy way to restore a Theme Roller theme. Before you download a theme copy, or bookmark, the URL at the top of the browser. All the changes you have made are stored in the URL! If you forget to copy the URL before downloading, the URL is stored in ..\css\custom-theme\jquery-ui-1.8.custom.css (where 1.8 is the version number).

Here's an example of a theme modification where I changed the header background to red: Red Header.

APEX 4.0 will be using jQuery and some jQuery UI components, so I hope this helps when customizing the look and feel of your applications.

3 comments:

  1. You are a genius. Thankyou so much for the hint on editing a theme. I needed to update to jquery ui 1.9 for my existing theme and this method worked perfectly.

    ReplyDelete
  2. Martin - thanks for the post.

    Is there a fool-proof tutorial for swapping in a new UI Theme to APEX from ThemeRoller ? I simply cannot get it to work at all. I am running APEX 4.2

    josephbarry2003@yahoo.com

    ReplyDelete
    Replies
    1. Hi Joseph,

      Not that I know of. Starting in 4.2.1 the APEX team has released the theme file that can make modifications a lot easier. You can download them here: http://www.oracle.com/technetwork/developer-tools/apex/downloads/index.html

      Swapping out one jQuery theme with another in APEX won't change too much using the built in themes. You can purchase some themes which tightly integrate with jQuery Theme Roller. Here's one that I've tested before: http://www.apex-themes.com/stock-themes/echo-apex-theme/

      Martin

      Delete