Allow usage of jQuery UI themes from the themeroller
| Project: | jQuery UI |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Hi,
The main purpose of jquery UI is its ability of using different themes for the widgets. At present the jquery ui module is not including any css. When I add any widget the respective theme has to be included automatically. If no theme is specified the base theme should be included. At present we need to include respective theme css files explicitly.
I changed drupal_add_js function to include the respective themes.
Please check the attached patch
Note: You need to apply http://drupal.org/files/issues/jquery_ui_external_compress_type_bug.patch patch for http://drupal.org/node/388356 bug.
After applying the patch you can download any customized theme that you created using the jqueryUI Theme Roller interface and use here. The theme will automatically load when you add the widget.
To use new themes use the following procedure
Download any theme from from the http://jqueryui.com/download link and extracted it. Copy theme directory to jquery_ui/jquery.ui/theme folder with the name of the theme. I downloaded Vader theme
>> unzip jquery-ui-personalized-1.6rc6.zip
>> cp -r theme /jquery.ui/themes/Vader
In my module I included that theme using the following function call
jquery_ui_add('ui.accordian','Vader')
That's it. The corresponding theme is enabled for that widget.
| Attachment | Size |
|---|---|
| jquery_ui_including_css_feature.patch | 2.09 KB |
#1
#2
Nicely done, but I think it would be nice to have that $theme variable pulled in through a setting in the administration somewhere. Would be nice to add it only for widgets that need the CSS too ;-) .
#3
Having administration setting page to specify theme is a good idea but this theme will apply to whole site. Now you can have different theme on different pages. All jquery ui widgets come with basic css. On single page keeping different css for different widgets is something which I need to check, because I am not sure if it is possible.
#4
Having administration setting page to specify theme for specific page is good idea. I will work on this feature. Thanks Rob Loach for giving me feedback.
#5
I implemented admin interface to set the default theme. Attach the patch and go to /admin/settings/jquery_ui page.
Here it will display the themes that are there in jquery_ui/jquery.ui/themes/ directory.
If you want to use default theme just add widgets with
jquery_ui_add('ui.accordian');
If you want to override default theme and want to use different theme then use
jquery_ui_add('ui.accordian','Vader');
Note: Please attach first patch before attaching this patch
#6
#7
Where does base in
variable_get('jquery_ui_default_theme', 'base');come from? I can't seem to locate it in any jQuery UI theme download package.Edit: I downloaded jQuery UI 1.7.1: for jQuery 1.3+ and base was indeed included. This doesn't seem to be included in the jQuery UI 1.6: for jQuery 1.2.6 packages. As far as I can see jquery_ui currently works with jQuery UI 1.6: for jQuery 1.2.6 so there is no base theme.
Am I missing something or do we need to make this work without the base theme?
#8
I've improved the patch and feel it is now ready to be committed.
I have removed the necessity to apply this patch in the original post:
http://drupal.org/files/issues/jquery_ui_external_compress_type_bug.patch
I kept the $theme variable passed into the function so the theme of each widget can be changed in the call to jquery_ui_add(). I also kept the admin page with settings form but cleaned up the way theme folders are discovered. The variable
jquery_ui_themeis still used to set the theme on a site basis.I have followed coding standards apart from the concatenation operator which follows the 7.x behaviour (this was already used in the file so I thought it would be best to conform to this).
There is still the problem that the 'base' theme is not present in the jQuery UI 1.6 theme packages downloaded from http://jqueryui.com/themeroller/ so I'd like to know if anyone has an idea of how we can deal with this. Maybe we should discover the themes and just enable the first found until another is set in the admin?
There is also extraneous whitespace on lines 17 and 57 but I didn't want to include that with my patch.
#9
In keeping with the new release system and this post:
http://drupal.org/node/362509
I have changed the "base" theme in
variable_get('jquery_ui_theme', 'base');to "flora".This is the default theme name when downloading the package from:
http://code.google.com/p/jquery-ui/downloads/list?q=1.5
#10
Whitespace cleanup only.
#11
The download from http://code.google.com/p/jquery-ui/downloads/list?q=1.5 contains a theme with files arranged as such:
Whereas the Theme Roller has this structure:
How do think we should get around this? It seems the Theme Roller is only distributing packages with ui.all.css rather than individual files.
#12
My lord, just had a good look at the CSS output from the Theme Roller and it SUCKS!
I think all development must have moved to 1.7 and 1.6 will be all but abandoned. I'm going to make my own CSS for this as what is output from the Theme Roller is no good for this project.
This issue has just been pushed right to the back of my queue unless someone comes up with something I may have missed.
#13
Thanks for improving my patch. When I am posting this feature. the http://jqueryui.com/themeroller/ is different. They changed the directory structure. It looks like my patch does not work with 1.6 version. I downloaded 1.6 version of jquery_ui custom theme. After extracting, in the css folder there is a custom-theme directory. We can keep this in jquery_ui/jquery.ui/themes directory but it is not having ui.core.css, ui.theme.css.
jquery 1.7 version directory structure is good. I think it is better to use jquery ui 1.7 version. To use jquery-1.3.2 version , we can suggest the users to use jquery_update development code.
Prajwala
#14
I did not check http://code.google.com/p/jquery-ui/downloads/list?q=1.5 link.
Now also when I download jquery_ui development bundle from the jquery_ui home page http://jqueryui.com/home , I am getting the theme as base. You can download from http://jquery-ui.googlecode.com/files/jquery-ui-1.7.1.zip location.
#15
So are you saying that jquery_update dev version now supports jQuery 1.3.2?
I agree jQuery UI 1.7 is much better than 1.5.3.
Edit: Ok, jquery_update 6.x-2.x-dev works with jQuery 1.3.2 so I think we should rebuild this patch to work with only jQuery 1.7 rather than the IMO very poor 1.5.3.
#16
yes I used jQuery 1.3.2 and jQuery UI 1.7 in one of my project. It is better to support new version than struggling to support older version. If we use use jQuery UI 1.7 , I hope my original patch is good, there might be small changes required.
#17
Current instructions to get Theme Roller themes working with the latest patch in this issue are:
You then need to select custom-theme as the theme for jquery_ui on admin/settings/jquery_ui
#18
Install jquery ui module by following bellow steps.
You then need to select custom-theme as the theme for jquery_ui on admin/settings/jquery_ui
#19
Thanks prajwala!
Any testers?
#20
To make testers life easy. I attached a jQuery UI Test page module.
Just install and enable the module. Then you will see a jQuery UI Example link in the navigation. Click on the line then you should able to see Accordian, Tabs, Slider, DatePicker, Progressbar, Dialog, overlay and shadow, framework icons on the page.
This page is having all widgets supported by jQuery UI.
Try checking all widgets.
Try changing the JQuery UI theme from admin > settings > jquery ui page. The theme should effect on the example page.
#21
Patch from http://drupal.org/node/388384#comment-1530114 applies, works as described. I successfully modified a theme using the theme builder, downloaded and installed it.
Nice work :)
#22
I check and used this patch. It works as described. Good job (for a newbie you may need the http://drupal.org/files/issues/jqui_test.zip file to see how to use both the module and patch).
#23
I can confirm the above comment. I did the steps in #18, and working correctly.
Thanks,
Dave
#24
This patch slightly overlaps with #266692: Settings for the theme used by jQuery UI - can anyone clarify the difference(s)?
#25
The patch should also add the code to change the module priority in the installation file; differently, the module would include the CSS files before other modules have the chance to set a different theme.
As reported by sun in #266692: Settings for the theme used by jQuery UI, the value for the new priority should be the maximum value between 10, and the higher priority used by any enabled module.
#26
With this patch we no need to define any .inc files and get_info functions.
This patch search for the different themes in the /jquery_ui/jquery.ui/themes folder. In the admin>settings>jquery_ui configuration page, It will display the different theme directories in the /jquery_ui/jquery.ui/themes folder. By default it will have 'base' theme.
This patch does not depend on the drupal theme that used. If the user want new theme for the jquery ui widgets, he can download theme from jQuery UI themeroller or can create new jquery UI theme and place in the jquery_ui/jquery.ui/themes folder.
I do not see any need to provide module priority. I used this patch in Accordion Blocks and Facebook Stream module. It works fine.
#27
I thought the module implemented
hook_init()to load the CSS files, but I was wrong. In that case, to change the module priority is not necessary at all.#28
Can someone please post idiot proof instructions on installing a new theme for a datepicker. I see a themes/default directory in my jquery.ui folder for v1.6. I'm assuming all this php / hook stuff is for module developers.
#29
The topic of this report is how to change the code to make it possible to change the widget theme basing on the theme used from Drupal. It's not a report for the end user, but for the maintaners of the project.
If you think the instructions are not clear, you should open a new report; attaching a comment to the first report you find is the right way to not get any answer.
#30
I suddenly get the impression I just walked in on an important meeting. I'll be leaving now. =)
#31
Hello,
I'm totally new to using patches, but I gave it a shot. I think I'm going in the right direction, but some errors occurred. Here's what I did:
command line output:
patching file jquery_ui.moduleHunk #1 succeeded at 34 (offset 9 lines).
Hunk #2 succeeded at 52 (offset 9 lines).
Hunk #3 succeeded at 62 with fuzz 2 (offset 9 lines).
Hunk #4 FAILED at 81.
Hunk #5 FAILED at 100.
2 out of 5 hunks FAILED -- saving rejects to file jquery_ui.module.rej
jquery_ui.module.rej:
***************
*** 75,80 ****
}
$js_path = $jquery_ui_path . '/' . $file_path;
drupal_add_js($js_path);
$loaded_files[$file] = $js_path; // or TRUE...
}
}
--- 81,88 ----
}
$js_path = $jquery_ui_path . '/' . $file_path;
drupal_add_js($js_path);
+ $css_path = $theme_path . '/' . $file . '.css';
+ drupal_add_css($css_path);
$loaded_files[$file] = $js_path; // or TRUE...
}
}
***************
*** 92,94 ****
return $version;
}
--- 100,135 ----
return $version;
}
+
+ /**
+ * Implementation of hook_menu()
+ */
+ function jquery_ui_menu() {
+ $items['admin/settings/jquery_ui'] = array(
+ 'title' => 'jQuery UI',
+ 'description' => 'Configure settings for jQuery UI module.',
+ 'page callback' => 'drupal_get_form',
+ 'page arguments' => array('jquery_ui_settings'),
+ 'access arguments' => array('administer site configuration'),
+ );
+ return $items;
+ }
+
+ function jquery_ui_settings() {
+ $theme_path = JQUERY_UI_PATH . '/themes';
+ $files = file_scan_directory($theme_path, '.*', array('.', '..', 'CVS', '.DS_Store'), 0, FALSE, 'basename');
+
+ $options = array();
+ foreach ($files as $name => $file) {
+ $options[$name] = $name;
+ }
+
+ $form['jquery_ui_theme'] = array(
+ '#type' => 'radios',
+ '#title' => t('Choose jQuery UI theme'),
+ '#default_value' => variable_get('jquery_ui_theme', 'base'),
+ '#options' => $options,
+ );
+
+ return system_settings_form($form);
+ }
Any thoughts on how to fix this? Is there a patched file or files I can download and replace? That would make my life wonderful for this 'quick' project I'm working on. I appreciate the assistance as I build on my tiny but growing Drupal muscles. :)
#32
Hello ultrus,
Thanks for mentioning patch error for the new version of jquery ui.
I created this patch using jquery_ui 6.x-1.2 version. Try downloading jquery_ui 6.x-1.2 from http://drupal.org/node/274037 and apply this patch for now.
I will create new patch file for the latest version of jquery_ui and upload here.
Regards,
Prajwala
#33
Created new patch which support latest version of jquery_ui module. Please use the patch attached to this comment.
#34
Hi there, I was wondering where exactly to apply the patch?
#35
The above patch add some more code to jquery_ui.module file. check http://drupal.org/patch/apply to how to apply patch.
#36
will this become part of the next jQuery UI module release?
#37
Looking for becoming part of jquery ui release.
#38
@azriprajwala please learn how to create patches against a cvs checkout :) You really shouldn't need to specify the file when applying a patch.
Attached is a different version of the latest patch, which should apply as usual:
"patch -p0 < jquery_ui_388384_v5_clean.patch"
Confirmed as working when applied to jquery_ui.module 6.x-1.3.
#39
Oh, and using jQueryUI 1.7.2 with, jquery_update 6.x-2.x-dev (2009-Apr-24) and jQuery 1.3.2.
#40
Hi I have my drupal site hosted on godaddy. Can someone tell me where and how to install this patch please? I can't see where I am supposed to enter the commands for this patch. I need to install this patch to be able to use the Accordion Blocks Module.
#41
@#40: The patch should simply applied to a local copy of the module files, which are then copied to the server through FTP (I think you don't have SSH access to the server where your site is hosted).
See Applying patches for more details.
#42
Hi,
I've tried to implement this, and I've had no luck at all. I downloaded/installed jquery update (jquery_update-6.x-1.1) , then jquery_ui (jquery_ui-6.x-1.3), and enabled them ok without any errors. I downloaded the new jquery_ui (jquery-ui-1.7.2), and added it, as well as the new theme from themeroller (jquery-ui-1.7.2.custom). Then came the patch...The patch - jquery_ui_388384_v5.patch - successfully ran (or so it seemed, I used CygWin), but the I now get the error:
Fatal error: Call to undefined function jquery_ui_add() in the accordian blocks module on line 13. Any ideas? I'll attach the resulting new module file after the patch as a txt in case it'll help.
My goal is to use the accordian blocks module...
Thanks in advance!
#43
Hi johnny,
You should install jquery update 6.x-2.x-dev version because jquery ui 1.7 need jquery 1.3.2.
This error will come because if you do not enable jquery_ui module.
Please follow the instructions specified at http://drupal.org/node/388384#comment-1530114
You have to enable jquery_update, jquery_ui then accordion_blocks module.
#44
Thanks for that, azriprajwala - I seriously appreciate it. The problem was that I didn't install the right version of jQuery_update. It works like a charm now.
#45
This is not a support request
please don't change category - unless you know what you are doing
tried latest patch v5, with jquery update 2.x installed and jquery ui 1.3
the css are inserted correctly
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/ui-lightness/ui.core.css?A" /><link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/ui-lightness/ui.theme.css?A" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/ui-lightness/ui.datepicker.css?A" />
but I can't get datepicker to style at all when using ui-lightness
any ideas