This is driving me NUTS! I've followed the post here which just doesn't seem to be working: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/
I have a base theme, for examples sake it's the Smoothness theme from the jQuery UI gallery. Then I have a 'red' theme which basically colours the buttons red. Here is the theme I created.
So I go to download my theme. Choose Advanced settings, set the scope to 'red' and my theme folder name to 'red' and download. First of all I'm not entirely 100% sure which folder I'm to copy over to my project is it the 'development-bundle\themes' folder (which contains my red folder) or the '\css\red' folder?
I've tried both. The post above seems to suggest if I copy my themes folder and link to my theme in the css it'll work when I add a class of 'red' to a wrapper div or element. So I've linked the themes like so in my file:
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />
The base theme loads and works all honkey doorey but the red theme doesn't. I've got a button styled like so:
<input type="submit" id="btn" value="A submit button" class="red" />
I've also tried:
<div class="red">
<input type="submit" id="btn" value="A submit button" />
</div>
Neither work. When I remove the 'themes/base/jquery.ui.all.css' css file link the button's aren't styled at all. Crazy! I'm pulling my hair out. Where am I going wrong? Surely they should just make it easy enough to download JUST the theme folder and reference the ui.all file.
I have added a new css class for red icons:
Icons
----------------------------------
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
And change here too:
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); }
.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }
I have a folder with the red and blue images. When I want take a red image I just reference the class iconRed, like this:
<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" />
//if want a blue just put the normal icon like this:
<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With