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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

pflame’s picture

Status: Active » Needs review
RobLoach’s picture

Version: 6.x-1.2 » 6.x-1.x-dev
Status: Needs review » Needs work

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 ;-) .

pflame’s picture

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.

pflame’s picture

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.

pflame’s picture

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

pflame’s picture

Status: Needs work » Needs review
psynaptic’s picture

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?

psynaptic’s picture

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_theme is 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.

psynaptic’s picture

Title: Automatic including of themes » Allow usage of jQuery UI themes from the themeroller
FileSize
2.14 KB

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

psynaptic’s picture

Whitespace cleanup only.

psynaptic’s picture

The download from http://code.google.com/p/jquery-ui/downloads/list?q=1.5 contains a theme with files arranged as such:

  • flora.accordion.css
  • flora.all.css
  • flora.css
  • flora.datepicker.css
  • flora.dialog.css
  • flora.resizable.css
  • flora.slider.css
  • flora.tabs.css

Whereas the Theme Roller has this structure:

  • images
  • ui.all.css

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.

psynaptic’s picture

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.

pflame’s picture

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

pflame’s picture

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.

psynaptic’s picture

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.

pflame’s picture

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.

psynaptic’s picture

Current instructions to get Theme Roller themes working with the latest patch in this issue are:

  1. Install jquery_update 6.x-2.x-dev
  2. Install jquery_ui 6.x-1.x-dev
  3. Apply the patch from #10
  4. Download jQuery UI 1.7 from http://jquery-ui.googlecode.com/files/jquery-ui-1.7.1.zip
  5. Extract the jquery-ui-1.7.1.zip archive and place the resulting folder in the jquery_ui module folder and rename it to jquery.ui
  6. Download a theme from the Theme Roller and extract the archive
  7. Copy the css/custom-theme folder to jquery_ui/jquery.ui/themes/ (you can rename the custom-theme folder to anything you like and the resulting path should be in the form jquery_ui/jquery.ui/themes/custom-theme)
  8. Rename the file custom-theme/jquery-ui-1.7.1.custom to custom-theme/ui.all.css

You then need to select custom-theme as the theme for jquery_ui on admin/settings/jquery_ui

pflame’s picture

Status: Needs work » Needs review
FileSize
2.92 KB

Install jquery ui module by following bellow steps.

  1. Install jquery_update 6.x-2.x-dev
  2. Install jquery_ui 6.x
  3. Apply the patch attached to #33 http://drupal.org/node/388384#comment-1851354
  4. Download jQuery UI 1.7 from http://jquery-ui.googlecode.com/files/jquery-ui-1.7.2.zip
  5. Extract the jquery-ui-1.7.2.zip archive and place the resulting folder in the jquery_ui module folder and rename it to jquery.ui
  6. Download a 1.7.2 version theme from the Theme Roller and extract the archive
  7. Copy the development-bundle/themes/[custom-theme-name] folder to jquery_ui/jquery.ui/themes/

You then need to select custom-theme as the theme for jquery_ui on admin/settings/jquery_ui

psynaptic’s picture

Thanks prajwala!

Any testers?

pflame’s picture

FileSize
5.68 KB

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.

adrinux’s picture

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 :)

golchi’s picture

Status: Needs review » Reviewed & tested by the community

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).

kardave’s picture

I can confirm the above comment. I did the steps in #18, and working correctly.

Thanks,
Dave

sun’s picture

Status: Reviewed & tested by the community » Needs review

This patch slightly overlaps with #266692: Settings for the theme used by jQuery UI - can anyone clarify the difference(s)?

apaderno’s picture

Status: Needs review » Needs work

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.

pflame’s picture

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.

apaderno’s picture

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.

ck9’s picture

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.

apaderno’s picture

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.

ck9’s picture

I suddenly get the impression I just walked in on an important meeting. I'll be leaving now. =)

owntheweb’s picture

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:

  1. Downloaded jQuery UI 6.x-1.3 from http://drupal.org/project/jquery_ui
  2. Ran into some issues once I installed Accordion Blocks from http://drupal.org/project/accordion_blocks, and was directed to this page to patch the CSS issue.
  3. Downloaded patch from http://drupal.org/files/issues/jquery_ui_388384_v4.patch
  4. Copied everything over to my Mac, moved patch to jquery_ui/jquery_ui_388384_v4.patch
  5. Ran: patch < jquery_ui_388384_v4.patch
  6. Finished with the results below.

command line output:

patching file jquery_ui.module
Hunk #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. :)

pflame’s picture

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

pflame’s picture

FileSize
2.89 KB

Created new patch which support latest version of jquery_ui module. Please use the patch attached to this comment.

dirk negen’s picture

Status: Needs review » Needs work

Hi there, I was wondering where exactly to apply the patch?

pflame’s picture

The above patch add some more code to jquery_ui.module file. check http://drupal.org/patch/apply to how to apply patch.

bluestarstudios’s picture

will this become part of the next jQuery UI module release?

pflame’s picture

Looking for becoming part of jquery ui release.

adrinux’s picture

@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.

adrinux’s picture

Oh, and using jQueryUI 1.7.2 with, jquery_update 6.x-2.x-dev (2009-Apr-24) and jQuery 1.3.2.

Tim Saltzman’s picture

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.

apaderno’s picture

@#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.

johnny_up’s picture

Category: feature » support
FileSize
3.94 KB

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!

pflame’s picture

Hi johnny,

You should install jquery update 6.x-2.x-dev version because jquery ui 1.7 need jquery 1.3.2.

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.

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.

johnny_up’s picture

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.

GiorgosK’s picture

Category: support » feature

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

colin_young’s picture

So this patch applied fine and appears to be creating the correct css links, but none of the styles are actually appearing.

The css files can all be loaded using the paths found in the header include, so I'm not sure what's going on. I'm going to keep investigating and I'll report back here if I find anything useful.

colin_young’s picture

There's something funky going on with the themes. I'm getting all the right JQuery js files included, but the theme is applied inconsistently. On one page I get all the right CSS loading, but on another, none are loaded.

I'm calling jquery_ui_add in template.php ({theme}_preprocess_page hook), but I've found that in order to get the themes to show up at all, I need to call it in e.g. my php for my panels 3 layout file. CSS links are only generated by calling jquery_ui_add in the panels layout file.

I've tried to call jquery_ui_add from page.tpl.php, but it doesn't appear to work from there at all. I think some of my issues may not be related to this patch, but some are.

pflame’s picture

Hi colin_young,

jquery_ui_add function is similar to drupal_add_js. Normally I use jquery_ui_add in my init hook or in my menu callback.

colin_young’s picture

Okay. I've modified my theme's template.php:

function boston_northshore_preprocess(&$vars, $hook) {
  jquery_ui_add(array('ui.draggable', 'ui.resizable', 'ui.dialog', 'ui.theme'));
}

That seems to have taken care of things. Theming is working for me (I tested out the DatePicker also, and that's getting themed).

Nice work on this patch. Thanks!

Now I can get back to perverting the Drupal UI in ways that I'm probably going to regret when it comes to upgrading to D7 :)

bluestarstudios’s picture

So since this is working, when can we see this being finally released in an official release?
Thanks!

pflame’s picture

Status: Needs work » Reviewed & tested by the community

I am also looking for this patch to be added to release.

mrfelton’s picture

please lets get this committed.

mrfelton’s picture

When I downloaded the 'smoothness' theme from jqueryroller, these are the files that were included:

|-- images
|   |-- ui-bg_flat_0_aaaaaa_40x100.png
|   |-- ui-bg_flat_75_ffffff_40x100.png
|   |-- ui-bg_glass_55_fbf9ee_1x400.png
|   |-- ui-bg_glass_65_ffffff_1x400.png
|   |-- ui-bg_glass_75_dadada_1x400.png
|   |-- ui-bg_glass_75_e6e6e6_1x400.png
|   |-- ui-bg_glass_95_fef1ec_1x400.png
|   |-- ui-bg_highlight-soft_75_cccccc_1x100.png
|   |-- ui-icons_222222_256x240.png
|   |-- ui-icons_2e83ff_256x240.png
|   |-- ui-icons_454545_256x240.png
|   |-- ui-icons_888888_256x240.png
|   `-- ui-icons_cd0a0a_256x240.png
`-- jquery-ui-1.7.2.custom.css

Note the name of the .css file - this is not what the module was expecting, and so the css was not loaded correctly. I renamed the css file to ui.theme.css and then it worked. Either this needs to be added to the installation instructions, or the code needs to be more flexible with the name of the css file it looks for.

pflame’s picture

mrfelton,

What you specified is correct. Jquery UI changed the directory structure of the theme roller download now. When you download any theme from theme roller now u get this directory structure

smoothness
|
  -- css
|
  -- development-bundle
|   | 
|    -- themes
|   |   |
|   |    -- base
|   |   |
|   |    -- smoothness
  -- js

You can use the directory from sommothness/development-bundle/themes/smoothness.

srobert72’s picture

Subscribing.
Could it be possible to include this patch in DEV version ?

emptyvoid’s picture

Subscribing

This is exactly what I was planning to contribute to this module :)

http://drupal.org/node/672970#comment-2432960

Mac Clemmens’s picture

Subscribing

hgltao’s picture

Title: Allow usage of jQuery UI themes from the themeroller » Jquery UI Accordion doesn't work
Version: 6.x-1.x-dev » 6.x-1.3

I installed modules Blocks in Accordion, Jquery_UI 6.x-1.3(with Jquery-ui-1.72). I used the accordion effect. The menus can be openned, when I clicked the menu. But it can not be closed, when I clicked another menu. After I clicked all the menus, all menus will be openned. It seems that the accordion effect doesn't work on my Drupal.

Any ideas? Why does it not work?

pflame’s picture

Title: Jquery UI Accordion doesn't work » Allow usage of jQuery UI themes from the themeroller

Hi hgltao,

You should have posted in the Blocks in accordion module issue queue. This project is about providing jquery UI. To use jquery-ui-1.72, you should have jquery 1.3.2 and above. Check which version of jquery is available in your instance. If required install jquery-update6.x-2.x version, this version of jquery-update module will provide jquery 1.3.2.

MacMannn’s picture

FileSize
13.86 KB

@azriprajwala:

On december 5th you said you wanted this patch committed. As far as I can see, that hasn't happened yet. Are there still issues that need to be solved?

Anyways, I appreciate the work that has been done on developping this module / patch. At the moment I'm just wondering if it would be wise to enter into a major tweaking session with this change being committed any time now...

I'd much rather use the default module — maintaining Drupal is hard enough as it is ;-)

Attached, you'll find the datepicker as it is showing up when using the default installation with the currently available production module for D6. Not verry attractive, especially not when compared to what can be created using the themeroller...

I'd love a simple, straightforward way to choose a fitting theme for the datepicker on my sites.

pflame’s picture

Hi MacMannn,

There are no issues regarding this patch. My be I am unable to communicate properly what exactly this patch is about.

When I place this patch the default module did not provide loading of default css. That means when we install the module and enable date picker we could not see the out put as it is appearing now, It used to be datepicker without any css and it used to look like this module is not working. So I have created this patch by adding support to load default css and support for the themeroller. I think it would be better I create new ticket by providing the patch about themeroller.

Thanks for making a note and making me think about this patch.

bluestarstudios’s picture

ok. now I'm really confused. If I'd like to benefit from the theme roller and use a theme that I generated with it, what do i have to do? Can anybody give a step by step?

pflame’s picture

I have tested the lated patch file http://drupal.org/files/issues/jquery_ui_388384_v5_clean.patch with the latest development version of this module and it is working good.

@bludstarstudios,
I understand why do you get confused. while writing http://drupal.org/node/388384#comment-2745992 comment I did not test the current development version of the jquery ui module with the patch I provided here, and I thought the module itself was loading the basic css required for jquery ui widgets to appear. But the development module does not loading any css.

Follow bellow steps to use jquey ui theme roller support.

  1. Install jquery_update 6.x-2.x-dev module
  2. Install jquery_ui 6.x
  3. Apply the patch attached to #33 http://drupal.org/node/388384#comment-1851354
  4. Download jQuery UI 1.7 from http://jqueryui.com/download by building user custom theme or use the default download
  5. Extract the jquery-ui archive and place the resulting folder in the jquery_ui module folder and rename it to jquery.ui
  6. Enjoy your jquery ui theme roller
yettyn’s picture

Anyone tested this with latest jquery.ui-1.8 released stable just a few days ago?

EDIT: Ahhh, I see now it uses jquery-1.4.2 so will probably not work unless also jquery_update module is upgraded.

dapperry’s picture

Dear azriprajwala,

I have followed your instructions in #63 exactly. While I can now pick one of the themes in the JQuery UI, the stylesheet of the selected theme does not show up in my module page, and obviously the css is not working. There seems to be a real problem with the directory structure being different from earlier. I have tried to work around this, but maybe thats the problem. Is there anyway you can provide a download of the entire jquery_ui module (with patched module, jquery and all the standard themes)? I have spent hours trying to get this to work, and I just need a working copy.

Thanks,

David

dapperry’s picture

BTW,

If I manually add:

<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/sunny/ui-dialog.css" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/sunny/jquery-ui.css" />

to my mymodule-form.tpl.php file it does indeed work.

:) David

pflame’s picture

FileSize
519.01 KB

Hi dapperry,

I have attached working jquery_ui module. install jquery_update-6-x-2.x-dev module.

dapperry’s picture

Thanks azriprajwala,

This works great!

:) David

bluestarstudios’s picture

thanks so much for your help. :) Will try to see how it works and will let you know. :)

Quick question about jQuery Update. The last time I was using it the update would break a lot of the default drupal actions like opening and closing fieldsets on forms. Do you know if that is still the case?

pflame’s picture

Hi bluestarstudios,

I used jQuery Update 6.x-2.x version in almost all projects that I developed. I don't see any breakage of drupal action.
I am sure lightbox2 module does not work, because the js code in the lightbox2 used some deprecated selectors of jquery1.2.6 like @. Those deprecated things are removed in jquery1.3.
If you are using lightbox2 module and jquery_update6.x-2.x then lightbox does not work properly and it causes lot of problems like always opening lightbox for all links.

srobert72’s picture

As I know Lightbox works very well with JQuery 1.3.
I use Lighbox with JQueryUpdate 6.x-2.x (JQuery 1.3.2)
I have also tried with JQueryUpdate upgraded manually with JQuery 1.4.2.
And Lightbox still works.

hewdaily’s picture

This worked for me but I only tested it against the accordian_blocks module and I can't collapse the admin block but...whatever, that's a different issue - my custom styles are showing.

*NOTE*
Double-check your themeroller download before you leave the themeroller site because the downloader is buggy. So download your custom theme, unzip, go into the unzipped directory and goto development-bundle->themes->your_theme_name and make sure you have more than just ui.base.css sitting in there. You should have ui.datepicker.css, ui.dialog.css, and all the others that you left the check marks on at the themeroller download page. If you don't make sure all those files are there then you may end up following all the instructions above and see only partially styled objects, or no styling at all. It will seem like this Drupal jQuery UI thing isn't working when in fact it can't work because there are no files in your custom theme directory to work with.

iparsin’s picture

To hgltao #58,

I have got exactly same issue earlier. However, after I uninstalled and reinstalled all modules again(strictly following the instruction with right versions on each module), it is working perfectly.

Thank you azriprajwala, you are awesome!

attheshow’s picture

subscribing

victor.gurung’s picture

Hi

I need to use this patch but I am confused where exactly i need to keep the code provided in the pacth. can any body help me out

pflame’s picture

Hi victor,

Use the patch from http://drupal.org/node/388384#comment-1851354. And you can check http://drupal.org/patch/apply link for how to apply patch.

smk-ka’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
2.78 KB

Re-rolled with some changes:
- Since the files of the 'base' theme that is included with this module differs from custom themeroller styles, we need to differentiate between the two.
- The biggest difference is that themeroller styles come glued together into one ui.all.css file (based on the selection made before downloading), while the included 'base' theme allows adding modular stylesheets based on feature (i.e., datepicker, tabs, etc.).
- The previous patch didn't differentiate and added a lot of files that don't exist when using themeroller.

juroon’s picture

I just followed the steps in http://drupal.org/node/388384#comment-2747704, but used the new patch in http://drupal.org/node/388384#comment-3221462

I'm probably not testing everything there is to test, but it looks good so far. I downloaded the themed version of jQuery UI 1.7.3 (Legacy release, for jQuery 1.3.2) from http://jqueryui.com/download

This resulted in a download file named jquery-ui-1.7.3.custom.zip rather than one named *.personalized.* as mentioned above. The extracted directory contained the development bundle, which I renamed to jquery.ui and uploaded to my jquery_ui module.

I was then able to select my them in the jQuery settings at .../admin/settings/jquery_ui

Will post back if I discover any subsequent problems.

mansspams’s picture

tested #77. works. some css ugliness visible, but will try fix described here #672970: Theming Modal Frames

mansspams’s picture

Yes. Works.

smk-ka’s picture

It would be cool if we could add the themeroller instructions either to the README or directly on the ui theme selection page. Somebody up for this task?

pflame’s picture

smk-ka,

Yes, it is good to have the themeroller instructions in README. I will do that and submit the new patch with every thing.

Josh Benner’s picture

subscribing

drewish’s picture

I'm not quite sure this logic is correct at least as far as the "smoothness" theme for 1.7.3. It has:
jquery-ui-1.7.3.custom.css
ui.accordion.css
ui.all.css
ui.base.css
ui.core.css
ui.datepicker.css
ui.dialog.css
ui.progressbar.css
ui.resizable.css
ui.slider.css
ui.tabs.css
ui.theme.css

and ui.all.css is:

@import "ui.base.css";
@import "ui.theme.css";

while ui.base.css is:

@import url("ui.core.css");
@import url("ui.resizable.css");
@import url("ui.selectable.css");
@import url("ui.accordion.css");
@import url("ui.dialog.css");
@import url("ui.slider.css");
@import url("ui.tabs.css");
@import url("ui.datepicker.css");
@import url("ui.progressbar.css");

The jquery-ui*.css files looks like a concatenation of all the other CSS files.

I don't really have any recommendations at this point because the @imports would bypass the CSS aggregation but I'm not clear on the logic of the theme layouts in other versions.

jbomb’s picture

Works nicely. I added a couple CSS rules to my theme to get the theme roller to play nice with the date_popup module. That's more of an issue for the date module assuming the patch from #77 or something similar is committed here, but I've included them for others that might be testing.

/* Date picker adjustments */	
.ui-datepicker-header select { 
  position: relative; 
  top: 0px;
  }	
  
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
  padding-top: 0em;
  width: 17em; 
}  
/* End date picker adjustments */
vlad.k’s picture

Subscribing...

aaron’s picture

subscribe

kendouglass’s picture

Version: 6.x-1.x-dev » 6.x-1.3

+

drewish’s picture

Marking #834726: Allow to select jQuery UI theme as a duplicate, since it's functionality should be merged in here.

drewish’s picture

Version: 6.x-1.3 » 6.x-1.x-dev

I feel like trying to move all these individual patches in the issue queue isn't very productive so I've applied this and several others to a github repo:
http://github.com/drewish/jquery_ui

The theme roller support is kind of broken right now but themes should work. I'd love feedback if anyone has time to test it. It's compatible with jQuery 1.8.

drewish’s picture

crea’s picture

subscribing

giorgio79’s picture

After installing the latest version of this module, my old themeroller theme css has been overridden with the base theme included in jquery ui module's jquery folder.

Could this patch restrain the scope of the default themeroller base theme?

http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_si...

Here is what was added to my pages:

<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquery_ui/jquery.ui/themes/base/ui.all.css?r" />

I am using Skinr which requires this module, perhaps that is why this line was added.

[Edited by kiamlaluno to make the hidden HTML tag visible.]

pflame’s picture

giorgio79,

This patch does not allow to add multiple themes. It allow to add same theme for all the widgets used in the site. There is a admin interface to select the theme you want to use.

emptyvoid’s picture

This may or may not help, I already have a working version of this that I use on projects

<?php
// $Id: jquery_ui.module,v 1.6.2.2 2009/06/21 03:43:03 sun Exp $

/**
 * @file
 * Provides the jQuery UI plug-in to other Drupal modules.
 *
 * This module doesn't do too much, but it is a central location for any other
 * modules that implement the JQuery UI library. It ensures that multiple
 * modules will all include the same library script just once on any given page.
 */

/**
 * Path to jQuery UI library.
 *
 * During site installation, JQUERY_UI_PATH is the absolute path to the
 * jQuery UI library.  At all other times JQUERY_UI_PATH is relative, and
 * safe for use in URLs.
 */
if (defined('MAINTENANCE_MODE') && MAINTENANCE_MODE == 'install') {
  define('JQUERY_UI_PATH', dirname(__FILE__) . '/jquery.ui');
}
else {
  define('JQUERY_UI_PATH', drupal_get_path('module', 'jquery_ui') . '/jquery.ui');
}

/**
 * Add the specified jQuery UI library files to this page.
 *
 * The ui.core file is always included automatically, as well as the
 * effects.core file if any of the effects libraries are used.
 *
 * @param $files
 *   An array of what additional files (other than UI core) should be loaded
 *   on the page, or a string with a single file name.
 */
function jquery_ui_add($files = array(), $theme = NULL) {
  static $loaded_files, $ui_core, $effects_core;
  $jquery_ui_path = JQUERY_UI_PATH . '/ui';
  $compression = variable_get('jquery_update_compression_type', 'mini');
  
  if ($theme == NULL) {
      $theme = variable_get('jquery_ui_theme', 'base');
  }
  $theme_path = JQUERY_UI_PATH . '/themes/'.$theme;
  
  if ($theme == 'base') {
    $css_path = $theme_path . '/jquery-ui.css';
    drupal_add_css($css_path);
  } else {
    $css_path = $theme_path . '/jquery-ui-'.jquery_ui_get_version().'.custom.css';
    drupal_add_css($css_path);
  }
    
  
  // Convert file to an array if it's not one already, to compensate for
  // lazy developers. ;)
  if (!is_array($files)) {
    $files = array($files);
  }

  // If core hasn't been added yet, add it.
  if (!isset($ui_core)) {
    $ui_core = TRUE;
    jquery_ui_add(array('ui.core'), $theme);
  }

  // Loop through list of files to include and add them to the page.
  foreach ($files as $file) {
    // Any effects files require the effects core file.
    if (!isset($effects_core) && strpos($file, 'effects.') === 0) {
      $effects_core = TRUE;
      jquery_ui_add(array('effects.core'), $theme);
    }
    
    // Load other files.
    if (!isset($loaded_files[$file])) {
      switch ($compression) {
        case 'none':
          $file_path = "$file.js";
          break;

        case 'pack':
          $file_path = "packed/$file.packed.js";
          break;

        case 'mini':
        default:
          $file_path = "minified/$file.min.js";
          break;
      }
      $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;
    }
  }
}

/**
 * Return the version of jQuery UI installed.
 */
function jquery_ui_get_version() {
  $version = 0;

  if (file_exists(JQUERY_UI_PATH . '/version.txt')) {
    $version = file_get_contents(JQUERY_UI_PATH . '/version.txt');
  }

  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);
}

kendouglass’s picture

Status: Needs work » Needs review

+

j4’s picture

Hi,

I used both the current jquery_ui 6.1.4 version and the dev version also. Followed all the steps. The accordian blocks works, Theming all fine. But the alwaysOpen=false will not work and once clicked open the blocks will close only on reload of the page. Can you tell me where I am going wrong? Even tested the jquery test.zip module and the accordian in that works in the same manner and that in my site. Also tried changing themes to check if it was a css related problem, but works in the same manner in all themes..once opened blocks will not close. Please help!

Thanks
Jaya

lynnmart881’s picture

I installed the Jquery_ui according the steps in #18, using the v5 patch instead of the one listed on #18. Everything went as it should have. My only problem is that I do not have a jquery_ui settings page in my admin/settings area. Any ideas what went wrong?

lynnmart881’s picture

Nevermind. After I deleted the accordian block module that I was trying to use, the jquery_ui settings page appeared. My problem must be with that module.

davidwhthomas’s picture

@emptyvoid http://drupal.org/node/388384#comment-3667740

Thanks for the code, I'm using that in place of jquery_ui.module and working perfectly with the themeroller download 'theme' dir copied over.

Could do with a tweak to allow jquery_ui themes in one's theme dir, but otherwise good.

DT

marcoka’s picture

did not work here using jquery ui 1.6 and the newest jquery_update module version 1.3.2

edit: Updated jquery_ui to 1.7.3, now it works :)

mmilo’s picture

FileSize
9.29 KB

Rerolled #77 to include changes in #95, against 6.x-1.x-dev.
Using -dev verision of jquery_update, and jQuery UI 1.7.3.

So, a summary for anyone else new to the issue:

- There is a new menu option to select a global jquery theme
- there is a new parameter for jquery_ui_add that lets you specify a specific theme to add .css files for

I only did light testing, but this seems to work for both core/custom themes.

BWPanda’s picture

I've followed the instructions from #18, using the patch from #102 and the latest jQuery v1.7.3. I downloaded the pepper-grinder theme and installed it into the themes directory of jquery.ui in sites/all/libraries. I then selected that theme on the jQuery UI admin page.

I have some select lists and a datepicker calendar popup in a form on my frontpage, and after clearing all caches, I'm not seeing any difference to the look of the form...
What am I missing?

Manuel Garcia’s picture

We should so work for something like this for drupal 7, now that we have jquery UI in core.

jensimmons’s picture

So we've had a working patch to allow people to use custom jQuery UI themes for over a year without it ever getting committed? WHY??? This should really be part of this module. Otherwise, we all have to fork this module to use a custom jQuery UI theme. ;(

sun, what's up?

tim.plunkett’s picture

Patch still applies, will test later today.

jensimmons’s picture

Meanwhile, I did what I've done in the past:

  • Create a jQuery UI Theme.
  • Download it.
  • Go through the files you get until you find just the CSS file and the images directory that goes with it.
  • Move those files into your custom site theme.
  • In your theme's .info file, add the new jquery-ui css file to the list of stylesheets. Make sure the images are in the correct directory structure.
  • You don't have to patch this module (maintaining a patched module for over 2 years isn't going to work in most situations), and you can still use a custom jQuery UI theme by putting it in your theme.

    Why won't patching the module work in most situations? Because it's likely someone new will be taking care of maintenance of the site, and they won't know how to apply a patch. Or they wouldn't know that they should. Or they'll forget to. And the consequences are big — the look and feel of the site will break if the module is upgraded with a non-patched copy.

jstoller’s picture

I've been using this patch for several weeks without any problems. I'll second the call to get it committed as soon as possible.

thehong’s picture

Two years old issue :(

jstoller’s picture

Could one of the module maintainers provide a little insite here? Is this patch, or one like it, on the roadmap? Is there something preventing it from being committed?

pflame’s picture

I am also waiting for one of the module maintainers to comment about the issue. I am using this patch in the projects where I use jquery ui. Lets start voting for this issue. Please comment here the people who are using this patch.

mansspams’s picture

mmilo’s picture

FileSize
2.92 KB

Any update on this?? Here's a re-roll of my patch in #103 with 2011-Feb-25 6.x-1.x-dev. Didn't try out the module in #112.

ohnobinki’s picture

+

keichee’s picture

Project: jQuery UI » Drupal core
Version: 6.x-1.x-dev » 8.x-dev
Component: User interface » theme system
Assigned: Unassigned » keichee

lets make a simpletests

Status: Needs review » Needs work

The last submitted patch, jquery_themeroller.patch, failed testing.

Manuel Garcia’s picture

Project: Drupal core » jQuery UI
Version: 8.x-dev » 6.x-1.x-dev
Component: theme system » User interface
Assigned: keichee » Unassigned

0_o

Manuel Garcia’s picture

+++ jquery_ui.module	Wed May 11 01:44:53 2011
@@ -39,6 +45,17 @@
+      $css_path = $theme_path . '/jquery-ui-'.jquery_ui_get_version().'.custom.css';

Is there a reason why we'd have to force people to name their theme's css files with the version number?

We could just use a generic one like jquery-ui-THEMENAME.css like this:
$css_path = $theme_path . '/jquery-ui-'. $theme .'.css';

What do you think? Easier to maintain in my opinion.

SchwebDesign’s picture

subscribing - I would really LOVE to see this working as well

kongoji’s picture

#113 works for me. This patch should be committed in my opinion

pflame’s picture

Version: 6.x-1.3 » 6.x-1.x-dev
Status: Needs review » Reviewed & tested by the community
achton’s picture

I couldn't get the patch in #113 to apply cleanly against 6.x-1.5. Here is a git-compatible port of the patch.
Should work for current 6.x-dev too.

j0rd’s picture

Been having this problem which is marked dupe of this issue.
#814232: jquery_ui_add() does not add required CSS files

I've applied patch #122. Applied clean against 6.x-1.5 for me. My problem is though, with jquery.ui 1.6 is that the default theme folder is called "default" and not "base" in my install (pre-existing site I'm taking over).

With the admin interface, this was a quick fix, but it didn't work out of the box, which most users (including me, would expect)

Also I've downloaded a version of 1.6 from jquery ui website to see if perhaps someone changed it, before I started working on this site. The fresh download also does not have the "base" folder in themes, instead of folder called "smoothness" and no "default" folder, go figure :D

Here's that link:
http://jqueryui.com/download/jquery-ui-1.6.custom.zip

jQuery 1.7 & 1.8 appears to have both 'base' and 'smoothness' folders:
http://jqueryui.com/download/jquery-ui-1.7.3.custom.zip
http://jqueryui.com/download/jquery-ui-1.8.18.custom.zip

Since my site is not using jquery update, and Drupal 6 my version of jquery is 1.2.6 and I believe jquery ui 1.6 is the last version of jquery ui to support this version of jquery. Because of this, 1.6I think we should make it work "out of the box" with jquery ui 1.6.

http://jqueryui.com/docs/Changelog/1.6

UPDATE:
Just confirmed, as per install instructions, jquery_ui module tells you to download jquery ui 1.6 from here http://code.google.com/p/jquery-ui/downloads/list?q=1.6 . and this version only has a "default" theme folder, not base.

cangeceiro’s picture

applied the patch in #122 and this seems to have fixed my issue with ui-slider.

apaderno’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Closed (outdated)

I am closing this issue, which is for a not supported Drupal version.