How can update my custom theme when I update jquery-ui? - jquery-ui

I updated jquery and jquery-ui from versions 1.7.2 and 1.8.23 to 1.9.1 and 1.10.3, respectively. Of course, with this my custom rolled theme no longer works.
Is there a way to update my theme to work with the new version without rolling a new one from scratch?

Open the css file that came with your custom theme.
In the top of the file you will find a comment that says:
To view and modify this theme, visit [followed by a really long link to the jqueryUI theme roller].
Here is an example for the start theme.
Navigating to that link will bring you back to the Theme Roller with all your settings preloaded to match your theme.
Simply Re-roll the theme as if you just started from scratch and replace the previous CSS (and image files if necessary) with the ones you just generated.

Related

jQuery Mobile Default Swatches

Let me start off by saying I'm new to jQuery mobile. I've been asked to change to theme of a website and from looking at the jQuery mobile website here there is 5 default swatches that come with it. The only problem is that when I look at the theme file it only has 2 swatches, labeled A and B, but which look more like A and C. Can someone tell me where I can find the additional default swatches?
Thanks for your help.
The guys from jQuery mobile also created the classic theme for 1.4 although they don't actually support it.
You can find it here: http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css
And view the demo here: http://demos.jquerymobile.com/1.4.0/theme-classic/
jQuery Mobile 1.4 has two themes "a" and "b", unlike previous versions.
To upgrade custom themes previously created by ThemeRoller, at the page's top, click on import to upload old themes and then choose 1.4.0 from drop-down Upgrade to version list.

Easy Way to Change jQuery UI Theme?

Is there an easy way to change the theme of the jQuery UI by replacing certain files? It seems like I have to keep downloading the entire jQuery UI every time I want to change the theme.
You can build your own theme at http://jqueryui.com/themeroller/.
once you build your theme you will have link both in address bar that you can bookmark and
in your css file jquery-ui-1.8.6.custom.css that you download:
http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-ser...
for each modification you can use these link instead of start from beginning.
EDIT
by using totalcommander compare tool or winmerge, you just do syncronize existing jquery ui files and the new jquery ui files, if you build new one
The only thing you need to change is the stylesheet and the images.
Referring to this answer, you can find ThemeRoller edit link in your css file. This url contains whole theme settings and this is the best way how migrate/upgrade it.

latest version jQuery Mobile broke my custom themes

When I use the latest version of jQuery Mobile (referencing http://code.jquery.com/mobile/latest/jquery.mobile.min.js in my index.html page), my custom jQuery Mobile theme no longer works. I created a custom theme named with a swatch named "g". When I load my site, my header changes from ui-bar-g to ui-bar-a. What could be causing my custom themes to be replaced with a different swatch? Thanks.

jqGrid without jQueryUI?

I can't find a clear answer on this. Is it possible to use JQGrid without using jQueryUI on my website?
According to the install.txt:
In order to use jqGrid 3.5, first a UI
theme css file should be loaded.
Download the desired theme (or build a
custom one) from jQueryUI site
(www.jqueryui.com) and point in your
link tag in head section the path to
the theme css
via http://www.trirand.com/blog/?page_id=6

How do I get JQuery UI themes to show up in CakePHP? [duplicate]

This question already has answers here:
jQuery-UI Datepicker CSS problem
(4 answers)
Closed 3 years ago.
I'm having problem showing JQuery UI themes for my CakePHP application. I placed the theme at app/webroot/lib/jquery.ui/ . Now on my layout I imported the theme using :
echo $html->css('/lib/jquery-ui/theme/ui.all');
I'm usingthe DatePicker widget. On my page, I can see that the my textbox was showing the date picker when focused, but the theme was not applied properly. I can't see the background images. I know that the theme (or css) has been imported since I can see some changes in the DatePicker (fonts, spacings, etc.). I just couldn't see the background images.
I don't know if this has something to do with my problem, but I'm also using YUI.
I take it your ui.all.css file lives in app/webroot/css/lib/jquery-ui/theme/ ?
Where are the images that it references?
URLs for background images in CSS files should be relative to the CSS file itself - so if the images live in app/webroot/img/lib/jquery-ui/theme/, the URLs in the CSS file should be ../../../../img/lib/jquery-ui/theme/ or alternatively, the URLs can be absolute from the DocRoot of the site, e.g. /img/lib/jquery-ui/theme/
Just to add a little bit more clarification:
I have been using the jquery ui datepicker for several projects and it always worked great. Then I baked a new cake project, dropped in datepicker, and found that the background images were not loading. I removed cake.generic.css from my application, and the datepicker images were able to load! Add it back in, and they vanish!
So long as you use your own form css for your apps, you should be fine.
you said you have the files at app/webroot/lib/jquery.ui/
so you should use the correct path:
echo $html->css('/lib/jquery.ui/theme/ui.all');

Resources