Hi!

Currently I am developing a Webapp with heavy use of jQuery UI Stuff.
Now i want to Transform my Widgets such as Dialog, Tabs and Buttons to my Design Imagination.
I know it is possible to make different / multiple jQuery UI Themes for a Single Page.
But i think this is not such an elegant way.
Why use four or five different themes for only two oder three types of tabs and two different dialog types and two or three button types?

Actually i have build some forked files for the UI 1.8 Demos but when it comes to production use this is not really working as i expected.

is there a good way to do something like: jquery.ui.dialog_fork1.css, jquery.ui.dialog_fork2.css, jquery.ui.dialog_fork3.css and so on and keep the possibility to update the ui later to a new version?

thanks everybody.

J 

1. /* Dialog
   ----------------------------------*/
   .ldb-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
   .ldb-dialog .ldb-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
   .ldb-dialog .ldb-dialog-title { float: left; margin: .1em 16px .2em 0; }
   .ldb-dialog .ldb-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
   .ldb-dialog .ldb-dialog-titlebar-close span { display: block; margin: 1px; }
   .ldb-dialog .ldb-dialog-titlebar-close:hover, .ldb-dialog .ldb-dialog-titlebar-close:focus { padding: 0; }
   .ldb-dialog .ldb-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
   .ldb-dialog .ldb-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
   .ldb-dialog .ldb-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
   .ldb-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
   .ui-draggable .ldb-dialog-titlebar { cursor: move; }
   
   
   .ldb-dialog {
   background-color: #E0E0E0;
   }
   
   .ldb-dialog .ui-corner-all  {
   -moz-border-radius:0px 0px 0px 0px;
   }
   
   .ldb-dialog .ui-widget-content {
   /*background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;*/
   background: #E0E0E0;
   border:0px solid #AAAAAA;
   color:#222222;
   margin: 0;
   padding: 0;
   }
   
   .ldb-dialog .ui-dialog .ui-widget-header {
   background:url("images/product_title.png") repeat-x scroll 50% 50% #CCCCCC;
   height: 36px;
   border-top:0px solid #FFF;
   border-right:0px solid #AAAAAA;
   border-bottom:0px solid #B3B3B3;
   border-left:0px solid #AAAAAA;
   color:#222222;
   font-weight:bold;
   }
   
   .ldb-dialog .ui-dialog .ui-dialog-title {
   float:left;
   margin:1.0em 16px 0.2em 0;
   }
   
   .ldb-dialog .ui-dialog .ui-dialog-titlebar {
   padding:0 1em 0;
   position:relative;
   }
   
   #dialog-form {
   border-top:1px solid #FFF;
   border-bottom:1px solid #B3B3B3;
   }
   
   #dialog-form input.text {
   background:none repeat scroll 0 0 #FFFFFF;
   border:1px solid #CCCCCC;
   margin-bottom:12px;
   padding:0.4em;
   width:95%;
   }
   
   .ldb-dialog .ui-dialog .ui-dialog-buttonpane {
   background-image:none;
   border-width:1px 0 0;
   border-color: #FFF;
   margin: 0;
   padding:0.3em 1em 0.5em 0.4em;
   text-align:left;
   }
   
   
   .ldb-dialog .ui-state-default, .ui-widget-content .ui-state-default {
   background:url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
   border:0px solid #D3D3D3;
   color:#555555;
   font-weight:normal;
   }
   
   .ldb-dialog .ui-state-active, .ui-widget-content .ui-state-active {
   /*background:url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF;*/
   background: #E0E0E0;
   border:0px solid #AAAAAA;
   color:#212121;
   font-weight:normal;
   }
   
   .ldb-dialog .ui-corner-top {
   -moz-border-radius-topleft:0px;
   -moz-border-radius-topright:0px;
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

1. /* Tabs
   ----------------------------------*/
   .ldb-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
   .ldb-tabs .ldb-tabs-nav { margin: 0; padding: .2em .2em 0; }
   .ldb-tabs .ldb-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
   .ldb-tabs .ldb-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
   .ldb-tabs .ldb-tabs-nav li.ldb-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
   .ldb-tabs .ldb-tabs-nav li.ldb-tabs-selected a, .ldb-tabs .ldb-tabs-nav li.ui-state-disabled a, .ldb-tabs .ldb-tabs-nav li.ui-state-processing a { cursor: text; }
   .ldb-tabs .ldb-tabs-nav li a, .ldb-tabs.ldb-tabs-collapsible .ldb-tabs-nav li.ldb-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
   .ldb-tabs .ldb-tabs-panel { display: block; border: 0; padding: 1em 1.4em; background: none; }
   .ldb-tabs .ldb-tabs-hide { display: none !important; }
   
   body {
   background-color: #FFF;
   }
   
   div.demo {
   padding:0px;
   
   }
   
   .ldb-tabs-widget {
   background-color: #E0E0E0;
   width: 218px;
   }
   
   .ui-corner-all  {
   -moz-border-radius:0px 0px 0px 0px;
   }
   
   .ui-widget-content {
   /*background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;*/
   background: #E0E0E0;
   border:1px solid #AAAAAA;
   color:#222222;
   margin: 0;
   padding: 0;
   }
   
   .ui-tabs .ui-tabs-panel {
   background:none repeat scroll 0 0 transparent;
   border:0 none;
   display:block;
   padding:1px;
   }
   
   .ui-widget-header {
   /*background:url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC;*/
   background: #E0E0E0;
   border-top:0px solid #AAAAAA;
   border-right:0px solid #AAAAAA;
   border-bottom:0px solid #AAAAAA;
   border-left:0px solid #AAAAAA;
   color:#222222;
   font-weight:bold;
   }
   
   .ui-tabs .ui-tabs-nav li {
   border-bottom:0 none !important;
   float:left;
   list-style:none outside none;
   margin:0 1px 1px 0;
   padding:0;
   position:relative;
   top:1px;
   white-space:nowrap;
   }
   
   .ui-state-default, .ui-widget-content .ui-state-default {
   /*background:url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;*/
   background: #666;
   border:0px solid #D3D3D3;
   color:#555555;
   font-weight:normal;
   }
   
   .ui-state-active, .ui-widget-content .ui-state-active {
   /*background:url("images/ui-bg_glass_65_ffffff_1x400.png") repeat-x scroll 50% 50% #FFFFFF;*/
   background: #E0E0E0;
   border:0px solid #AAAAAA;
   color:#212121;
   font-weight:normal;
   }
   
   .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
   color:#FFF;
   width: 86px;
   text-decoration:none;
   }
   .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
   color:#000;
   text-decoration:none;
   }
   
   .ui-corner-top {
   -moz-border-radius-topleft:0px;
   -moz-border-radius-topright:0px;
   }
   
   .ui-tabs .ui-tabs-nav {
   margin:0;
   padding:0;
   }