Build jQuery UI themes with jQUIT Builder

jQuit Builder is now available in beta. jQuit Builder is a tool which allows you to create custom jQuery UI themes much like with the jQuery UI ThemeRoller. From experience I have found it difficult to make good looking themes with the ThemeRoller, which is why I have come up with this helpful alternative. The idea of a custom theme builder is great and my implementation is heavily inspired by the jQuery UI ThemeRoller.

jQuery UI ThemeRoller is great, but I find it lacks in certain areas. For example, it allows for too many irrelevant styling possibilities and often the end-result is dull. Lets be honest – only about 2-4 of the prefabricated themes look some what acceptable. The implementation I propose is inspired by Metro UI used by Microsoft in Windows Phone 7 and the upcoming Windows 8. In my opinion Metro UI is nice and clean.

Anyway, have a go at it! Let me know what you think. If the general feedback is positive I will keep developing the jQUIT Builder and add more features.

Try jQUIT Builder



  1. jq  February 16, 2012

    Nice work. Thanks for sharing

  2. Freddy  March 2, 2012

    Great looking themes. Thanks!

  3. webman  March 7, 2012


  4. Max  March 12, 2012

    I really like it, thanks for sharing!
    If it’s ok with you, I’d like to build a WP7 app template based on it.

    One thing: please: add TILE :-)

    • admin  March 13, 2012

      You are welcome to use this theme for a Windows Phone template. If you could mention jQUIT I’d appreciate it ;-)

      About the tiles, I’ve seen a couple of jQuery-based implementations that work pretty well. However, I’m not planning on implementing dynamic tiles with this theme, as this is a theme ONLY. jQUIT uses jQuery UI out-of-the-box with no JavaScript added – only the stylesheet has been modified. Adding tile functionallity would require coding a jQuery plugin, which I’m not currently planning.

  5. Alex  April 20, 2012

    This is very good! Thank You!

  6. Mike Panter  May 18, 2012

    This is useful, thanks. I’m looking at developing jquery metro style mobile app using cordova, and this may well save some time. Cheers.

  7. Cee  May 18, 2012

    Wow!!! Very Good awesome Thank you+++

  8. Hary  June 15, 2012

    This is great! Very easy to create our own customized Jquery UI themes. Thanks!

  9. Deepen Dhulla  June 25, 2012

    Good Themes to have power of jquery & themes look of Metro ui


  10. Robert Compton  June 27, 2012


    I am currently building a web application as a management hub for an application called Docs On Tap. I love the Metro Design Theme and needed a jquery theme to go along with my website. I first tried to create one using jQueryUI Themeroller with no success. Next, I discovered Wijmo had two metro themes for their controls. This prompted me to search for metro jQuery themes and thus I found jQuit. The jQuit theme generator worked well and I now have a jQuery metro theme with my colours.

    Your little application has been a blessing to me.


  11. James  July 30, 2012

    This was so helpful. I have a small internal app that is basically just polling a service via ajax and i was using a default jQuery UI theme. When someone other dev asked for a Metro look I found this and had the page updated in 10 mins. Talk about productivity! Thanks for this I’m book marking it now.

    • admin  July 30, 2012

      Thanks for your comment. I much appreciate it.

  12. Fallon Massey  August 8, 2012

    This is really a nice project you’ve started.

    I downloaded the code, but the demo site is very limited, not even a button was there.

    Is it possible to include your current demo in the download?


    • admin  August 8, 2012

      Thanks. I’ll include the buttons in the download soon. There is one button though for opening the dialog.

      • Fallon Massey  August 9, 2012

        LOL, you’re 100% correct… now I feel stupid.

        Still, I hope you’ll include the fuller demo because it also has other items missing from the simple demo.


  13. szczepan  August 13, 2012

    Hello, thanks for that Tool!
    Can you please add a User Gallery with Css Designs, Voting and Ranking! Please!!!!!!! I have lock for that a long time!

  14. Fallon Massey  August 21, 2012

    Is there some reason you haven’t included the full demo in the download?

  15. Paul Davidson  August 28, 2012

    Superb, I was looking to change the theme roller to incorporate a blue metro style! Are you planning on keeping this up to date? The jQuery release is up to 1.8.23, whereas your version is up to 1.8.16.


  16. Greg  September 18, 2012

    i hope you keep working on this – nice to see some variations for jquery. thank you

  17. 了了也  October 29, 2012

    It is very good.
    I love Windows 8 style.

  18. Martijn  October 30, 2012

    Would love to use one of these themes but font colors, header padding and font sizes seem to be different in downloaded themes from the ones shown in your themeroller. Tried including some of the other CSS from your site in tests, but it just seems the generated downloaded file is wrong.

    • admin  October 30, 2012

      Hi Martijn
      I will look into it as soon as possible and see if I can figure out what’s wrong.

      • Martijn  October 30, 2012

        If you want to support jQueryUI 1.9.1, you should search&replace all “ui-tabs-selected” by “ui-tabs-active”.
        Or, preferably, just duplicate the “ui-tabs-selected” rules so it remains backwards compatible.

      • Martijn  October 30, 2012

        I’ve done some updates to the CSS and demo page. If you like I can mail them.
        * CSS is jQueryUI 1.9.1 compatible.
        * Changed accordion icon position so you can use a larger range of font-size.
        * Changed icon location on button, so it defaults to the correct position.
        * Updated demo page to use .button() calls instead of hardcoded classes for dialog button.
        * Added buttonset to demo page.

        • Keith  November 19, 2012

          Hi Martijn -

          Can you post your change that handles the below when using 1.9.1?

          *Changed accordion icon position so you can use a larger range of font-size.


        • admin  November 20, 2012

          Hi Martijn

          Could you send me a copy of the changes you’ve made. Maybe I’ll include your changes, if you’re ok with it? I actually just updated the builder to use jQuery UI 1.9.1.


  19. alpesh  November 5, 2012

    excellent builder……………..
    it gives full idea to make metro themes………

  20. BlueMonkey  November 8, 2012

    Thank you very much! I will use it on my website.

  21. Hugo Luna  November 8, 2012

    Thank you! Themes are great! is there a way to make the border a little sharper?

  22. Leszek  November 25, 2012

    This is great! I’m now looking for an interesting theme for jquery ui. I’ve also tried Theme Roller.
    Thanks for sharing.

  23. Akilat  November 27, 2012

    This is great! Very easy to create our own customized Jquery UI themes. Thanks!

    Gebelik Hesaplama
    Hamilelik Hesaplama
    Yumurtlama Hesaplama

  24.  December 21, 2012

    Incredible! I’m really enjoying the layout of your site. Are you using a customized theme or is this readily available to all users? If you don’t want to say the name of it out in the general public, please contact me at: mae. I’d really enjoy to get my hands on this template! Appreciate it.

  25. nadun  December 23, 2012

    cant thank you enough for this awesome work :) .. being a core developer myself i often find out difficulties to make a website beautiful.. with tools like these the problem seems to go away.. thanks once again :)

  26. Osama Khodrog  January 28, 2013

    Hello Im Osama I love your controls and i hope tp apply in mysite

    thank you

  27. Halil İbrahim Kalkan  February 10, 2013


    There is a problem with latest jQueryUI. Close icon in dialogs is in incorrect place. Please fix it.

    • Jan  February 11, 2013

      To fix the dialog close button issue I added this to the end of jquery-ui.css

      /* Fix for close dialog */

      .ui-dialog .ui-dialog-titlebar .ui-button {
      background: transparent;
      border: 0;

      .ui-dialog .ui-dialog-titlebar .ui-button-icon-primary {
      top: 0;
      left: 0;

      Haven’t done any formal testing but it seems good enough for me

  28. Henning  February 19, 2013


    awesome work!
    Yet i ran into some problems myself when using the downloaded css.
    My environment is:
    - JQuery 1.9.1
    - JQueryUI 1.10.0
    - Internet Explorer 8 (work related) and Chrome 24 are my main testing browsers

    I created a theme with jQUIT and included the CSS into my project.
    Here’s what I ran into so far:
    - The jqueryUI tooltip is not displayed correctly in IE8 (seems to have 100% width)
    - The dialog close button is incorrectly displayed, but the fix Jan posted worked for me
    - The accordion headers are very wrong… (font color not correct, icon display, header size)

    Is there a fix for this?

    Thanks a lot.

  29. Lorenzo  February 20, 2013

    I found an error at line 689:
    .ui-tabs-nav > .ui-state-focus a{background:#66B3FF;border-color:;color:#ffffff;}



    • kubik256  January 25, 2014

      The missing border-color on line 689 is still there,
      but can be fixed very fast :)

      .ui-tabs-nav > .ui-state-focus a{background:#66B3FF;border-color:{missing coor};color:#ffffff;}

      Additional info: It works almost perfectly with jQueryUI 1.10.4,
      only .ui-accordion-header, .ui-dialog-titlebar-close and spinner needs fix.
      I’m working on finding that incompatibilities ;)

      Very nice work, many thanks :)

  30. Sandroyy  March 10, 2013

    First, congratulations on the excellent work. Second: I am using the version of jquery-ui 1.10.1. When you intend to upgrade to this version jquit? Again, thanks for the great work you do for the web developer community.

  31. Pieterjan  April 2, 2013

    Hi, nice metro theme.
    But I came across an issue, I added some tabs, but unfortunately there there aren’t closable tabs supported?

    Thanks keep up the good work.

  32. javad  April 16, 2013

    perfect job !

    i always had problems with jquery ui themes they were inappropriate for modern web sites … now it is just great whit this theme builder !

    thanks a lot :)

  33.  April 25, 2013

    I’m really enjoying the theme/design of your website. Do you ever run into any browser compatibility issues? A few of my blog visitors have complained about my website not operating correctly in Explorer but looks great in Firefox. Do you have any ideas to help fix this problem?

  34. Jonnas  April 29, 2013

    To fix the overlay modal when the page has vertical scrollbar.

    Line 41: “position:absolute” becomes “position:fixed”

  35. Sascha  June 1, 2013

    Thanks a lot for sharing. Thomas! I was already creating all kinds of color variations for MetroUI CSS using ThemeRoller and wanted to share them as a Git repository but with your tool it’s sooo easy to create the different color types that everybody will be able to create the color versions by themselves.

  36. steve  October 3, 2013

    When trying to download a customized theme the download is 0 bytes and corrupt. But when downloading a pre loaded them the zip opens and is 152kb. Any help would be awesome.

  37. kubik256  January 25, 2014

    Improvement for Accordion (create circle dynamicaly by CSS not by image -> it’s more flexible):
    /* Accordion states */
    .ui-accordion-header.ui-state-active, .ui-accordion-header.ui-state-active.ui-state-hover{background-color:#ffffff !important;color:#525252;border-color:#d4d4d4 !important;}
    .ui-accordion-header.ui-state-active a{ color: #525252 !important;}
    .ui-accordion-header.ui-state-default a{ color: #ffffff;}
    .ui-accordion-header.ui-state-hover a{color:#ffffff;}
    .ui-accordion-header.ui-state-active .ui-icon{
    background-image:url(../img/ui-icons_d4d4d4_0.png) !important;
    border: 2px solid #D4D4D4 !important;
    border-radius: 12px;
    .ui-accordion-header.ui-state-default .ui-icon{
    border: 2px solid #FFFFFF;
    border-radius: 12px;
    .ui-accordion-header.ui-state-hover .ui-icon{
    border: 2px solid #FFFFFF;
    background-color: #FFFFFF;
    border-radius: 12px;

    • kubik256  January 25, 2014

      Fixed dialog close button for jQueryUI 1.10.4 :
      (circle around icon is create by CSS – no images)

      * jQuery UI Dialog 1.8.16
      * Copyright 2011, AUTHORS.txt (
      * Dual licensed under the MIT or GPL Version 2 licenses.
      .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
      .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
      .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
      .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; background-color: transparent !important; border:0 !important; }
      .ui-dialog .ui-dialog-titlebar-close span { position: relative; display: block; top: -3px; left: -3px; }
      .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
      .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
      .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
      .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
      .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
      .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 2px; bottom: 2px; }
      .ui-draggable .ui-dialog-titlebar { cursor: move; }

      /* Dialog states */
      .ui-dialog{border-color:#3399ff;background-color:#ffffff !important;}
      .ui-dialog-buttonpane{border-color:#3399ff !important;background-color:#ffffff;}
      .ui-dialog-content{background-color:#ffffff !important;}
      .ui-dialog-titlebar .ui-icon{
      border: 2px solid #FFFFFF;
      border-radius: 12px;
      .ui-dialog-titlebar .ui-state-hover .ui-icon{
      border: 2px solid #FFFFFF;
      background-color: #FFFFFF;
      border-radius: 12px;

  38. Michael  February 22, 2014

    Thanks for this very nice jQueryUI theme and theme “roller”.
    I would like to report one Little “bug”: Please have a look at the Modal Dialog Close button (you do not have that widget on your demo site but create one with $(#).Dialog();. Somehow the “x” is not centered in the respective Icon but is offset to the lower right corner. I have tried to counter-Offset the relevant class but this did not work (it has moved the “x” but I could not move it into the close Icon as it has been cut (wrong Z-index?). This happens in IE11 as well as in the most current Firefox Version.

    - As I am just a Hobbyist and no real developer, I could not figure out how to fix this.
    - If you want, I can send you a screenshot of the Problem and a full test code snippet.

    Maybe if you could have a quick look at this?

    Thanks you and with Kind regards,


  39. srikanth  May 5, 2014

    but not responsive template

  40. Huy Nguyen  May 10, 2014

    Hi there,

    Thank you for the wonderful template! Just one thing though, the theme doesn’t seem to go quite well with jQueryUI Tooltip. It doesn’t allow me to use jQueryUI Tooltip as it messes up the whole screen. I wonder if it is because of me or jquit, but when I replace the jQueryUI.js downloaded from by the official jQueryUI.js, tooltip works fine now; BUT the whole dialog() gets messed up :D . Any advice?

  41. รับเพิ่มไลค์  June 8, 2014

    Hello just wanted to give you a quick heads up.

    The text in your content seem to be running off the screen in Internet explorer.

    I’m not sure if this is a format issue or something to do with browser compatibility but I thought I’d post to
    let you know. The style and design look great though! Hope you get the problem
    resolved soon. Cheers

  42. admin  September 6, 2014

    I regret to inform that I will no longer be maintaining jQuit. Unfortunately I’m not able to find the time necessary to keep the builder updated as all my time is allocated to other projects. I appretiate the many comments and good input.
    Best regards Thomas


Add a Comment