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.
Related
I am new to Vaadin. I wanted to create s simple page which should not have
any theme. When I run the simple application, it default takes reeinder theme.
So is it possible to create a simple theme without having any themes?
So it looks white background, normal html button, normal html labels,etc.
If needed, I shall use my own themes which could be created out of CSS file.
Yes,
it is possible to use a empty theme.
You must just create a empty css or sass file and then specify to use that theme.
You can then add the styles you need to the file.
You will then of course have to use the standard html buttons and so on.
The vaadin default buttons (and most components) depend on a proper theme.
This link might help you see what you will have to do when you wish to start with a completely new theme: https://vaadin.com/de/wiki/-/wiki/Main/Vaadin+Theme+Tips+and+Tricks#section-Vaadin+Theme+Tips+and+Tricks-CreatingACompletelyNewLookNFeel
Perhaps starting with the base theme would be the middle way to go.
VAADIN/themes/base/styles.css
I only need a JQuery UI Tabs, so I access http://jqueryui.com/download and only select Core, Widget and Tabs 3 check boxs, then download the package jquery-ui-1.8.17.custom.zip
I find that there are many files I needn't in the package, but I don't know how can I delete these files.
And more css\ui-lightness\jquery-ui-1.8.17.custom.css inculde many content I don't need if I only use Tabs, it seems that I can delete the whole folder css\ui-lightness\images and don't cause error.
Go to http://jqueryui.com/download and select core, widget and tabs then download the package.
This is almost the minimum requirement. You only need files which in the js and css folder.
If you remove css\ui-lightness\images when you page using ui-lightness theme you will found that there is little difference between the brightness of the tab labels.
Of course. If you did not using ui-icon, you can remove ui-icons_*.png and rules ui-icon-* on jquery-ui-1.8.17.custom.css
I'm using jquery ui in my page for a dropdown menu. But this file has a large size (198KB) and increased my page load time.
Is there any alternative for this file? or is it possible to edit this file and remove some useless codes?
if you go to this page at jQuery UI:
http://jqueryui.com/download
you can pick what all you need to download. Also, make sure you get the minimized version.
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
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');