How can i change jquery ui theme for all my site?
I installed jquery_update module. In "admin/config/development/performance" set "jQuery and jQuery UI CDN" to "None", so i supose *.js and *.css files will takes from my local folder ("\sites\all\modules\jquery_update\replace\*")

Theme loades from \sites\all\modules\jquery_update\replace\ui\themes\base\* am i right?
I generated theme on and get an archive with my theme and extracted this one into \sites\all\modules\jquery_update\replace\ui\themes\custom-theme\*

So how can i change my theme? There is no select option in performance page. Should i replace *.css files in \sites\all\modules\jquery_update\replace\ui\themes\base\* folder?

#3 original.jpg6.98 KBcalefilm
#3 final.jpg8.51 KBcalefilm


Gints Ērglis’s picture

Quick solution is to rename a 'base' folder to 'base_' and your custom theme folder to 'base'. There is no way to choose a theme through the interface. It is hardcoded in jquery_update.module, line 176.

calefilm’s picture

I attempted the simple instructions provided by #1 but cannot change the theme. I, too, am looking for some standard style documentation 'for drupal' that even I can follow.

calefilm’s picture

new8.51 KB
new6.98 KB

I don't know if this will help anyone as I don't think I'm doing this accurately but it works in my case. I am using jquery theme to style tabs in my right pane in panels. Before I installed jquery update module i was simply styling jquery.ui.theme.css at MYSITE/misc/ui/ .... You can see the image below. Here is how I updated the colors in my pane using jquery_update module and grabbing the "START style" from :

Obvious Note: jquery_update module goes into: MYSITE/modules/

INSTRUCTIONS on where to place themeroller stylesheet:

I downloaded new theme from (click Gallery tab) and download "Start" version: 1.8.21

Unzip and open development-bundle, open themes, copy 'start' folder.

paste 'start' folder into MYSITE/modules/jquery_update/replace/ui/themes/

now you have 'base' and 'start'

rename 'base' to 'base_'
rename 'start' to 'base'

so now you have 2 folders, "base_" and "base"

next go into 'base_' and copy 'minified'

Paste 'minified' folder inside 'base' folder

Staying inside 'base' folder, you'll see the stylesheet: jquery.ui.theme.css

copy this stylesheet and open up 'minified' folder inside 'base' folder

delete: jquery.ui.theme.min.css

paste: jquery.ui.theme.css

rename: jquery.ui.theme.css to jquery.ui.theme.min.css

godling’s picture

what if the UI package I download doesn't have a 'development' folder?
the pacakage is here:
I tried several ways but doesn't work.

Gints Ērglis’s picture

The way to do this is using hook_css_alter().
Example of this you can find in the jquery_update module.

function mytheme_css_alter(&$css) {
  $names = array(
    'ui.core', 'ui.theme', 'ui.accordion', 'ui.autocomplete', 'ui.button', 'ui.datepicker',
    'ui.dialog', 'ui.progressbar', 'ui.resizable', 'ui.selectable',
    'ui.slider', 'ui.tabs',
 $csspath = drupal_get_path('theme', 'mytheme') . '/css/my_ui/';
 foreach ($names as $file) {
    $css["misc/ui/jquery.$file.css"]['data'] = $csspath . 'jquery.' . $file . '.css';
waako’s picture

gabrielZ’s picture

This worked for me. Thank you!

gabrielZ’s picture

Issue summary:View changes

Calefilm's solution worked for me. Thank you!