jQuery UI libraries are loading too much CSS that needs to be reverted / Allow jQuery UI themes to be swappable

Subscribing and notifying the jQuery UI Team.

There are two main parts to a jQuery UI theme that are significant to this issue:
- functional/layout css
- presentational/look-and-feel css

We keep a clean separation between these two. All css required for plugins to function are in individual files:
ui.dialog.css
ui.tabs.css
etc.

All css for colors, borders, font sizes, font faces, background colors, images, etc are in a single file:
ui.theme.css

It would seem this is the one that's causing the most pain for users as it has a default style they either don't want, or want to override completely. If all they've asked for is to include jQuery UI, and you want enough css for the plugins to be functional with the js, you'll want these files:

ui.core.css
ui.accordion.css
ui.datepicker.css
ui.dialog.css
ui.progressbar.css
ui.resizable.css
ui.slider.css
ui.tabs.css

but not
ui.theme.css

You can get that list of files programatically from:
http://jquery-ui.googlecode.com/svn/tags/1.7.2/themes/base/ui.base.css

Notice the contents of ui.all.css:
@import "ui.base.css";
@import "ui.theme.css";

So you only want the base of the base theme.

@sun insits on #517688: Initial D7UX admin overlay that we need to use drupal_add_library() to add the JS for the jQuery UI we use (we don't need *any* of the CSS). Obviously we can add any of the CSS and then add as much again to override / clean it up. He says this issue would solve that, but it does not seem so yet. I'm not at all convinced that when we need to cherry-pick from library files, we should use drupal_add_library() anyway. Files added with drupal_add_js() and drupal_add_css() are equally alterable, even if they do not inherit altering of the parent library (which is as far as I understand @sun's main concern).

.

I don't see any reason to remove the base "theme" (ui.theme.css). This stylesheet can be overridden by the (Drupal) theme if needed. What we need is a way to style differently a particular UI element (ie. the Overlay, which is not *every* dialog).

If I'm not mistaken, we simply have to use the "dialogClass" [1] option to add our own "drupal-overlay" class to the overlay dialog.

[1] http://docs.jquery.com/UI/Dialog#option-dialogClass

Damien is right. The Overlay's CSS has to build ontop of the existing ui.theme.css rather then implementing its own. If any jQuery UI element is added to the page (an element requiring ui.theme.css), this element will in turn break the Overlay's CSS. To my knowledge the overlay has a .overlay class which we should apply to all the overlay-specific dialog changes. #256 demonstrates building off of ui.theme.css instead of implementing its own that will break other jQuery elements.

So, due to this, I'm setting this issue to "by design". Thanks!

hook_library_alter() was made to support switching the theme, possibly with administration through the Color module. The problem is that jQuery UI elements require a theme. If we have any other jQuery UI element added to the page along with a ui.theme.css, it will break the Overlay. We need to work with ui.theme.css, not against it.

Of course, themes will register a ui.theme.css file, that will override the core provided ui.theme.css. I'm not sure I understand what is the problem.

jQuery UI's ui.theme.css is a CSS Framework with the basic styles to make jQuery UI elements usable. jQuery UI's Smoothness is the equivalent to Drupal's Stark. Stark has enough CSS make Drupal usable, the same goes for jQuery UI's ui.theme.css. Drupal requires a theme to make it usable, jQuery UI requires a ui.theme.css to make it usable.

With #591794: Allow themes to alter forms and page, you'll be able to implement [theme]_library_alter and swap out ui.theme.css with your own theme's ui.theme.css. As I've demonstrated in the latest overlay patch we can work with ui.theme.css and still make the overlay look right because we can add our own class names to the elements. This means that the overlay won't break when other jQuery UI elements are active that require ui.theme.css.

Yes jQuery UI elements work without a ui.theme.css, but they arn't usable. These elements expect those classes to be there.

After some discussion, we have a plan of action:

• Since jQuery UI elements require a ui.theme.css for them to be usable, we provide the stalk jQuery UI theme (misc/ui.theme.css). This can either be provided at modules/system/system.ui.css, or misc/ui.theme.css.
• Themes will override this ui.theme.css to allow the jQuery UI elements to look more like their theme.
• Special use cases that deviate from the jQuery UI's themed design will have to work with the provided jQuery UI's CSS. This means the Overlay will have to override the classes provided by ui.theme.css (the latest Overlay patch does this).
• We provide a themes/garland/ui.theme.css which tries to mimic the Garland look for the jQuery UI elements. Here's a beginning attempt: garland/ui.theme.css. Please help out with this.
• Bonus Points: We allow Color module to override some of the jQuery UI CSS elements.

An issue blocker for this #591794: Allow themes to alter forms and page.

This patch demonstrates swapping out ui.theme.css with a new ui.garland.css. Screenshot.

Steps Taken

1. Apply patch at #591794: Allow themes to alter forms and page
2. Apply patch at #87994: Quit clobbering people's work when they click the filter tips link
3. Apply jqueryuialter.patch
4. Extract images.zip to produce themes/garland/ui/images

The Key

function garland_library_alter(&$libraries, $module) {
  if ($module == 'system') {
    $js = drupal_get_path('theme', 'garland') . '/ui/ui.garland.css';
    $libraries['ui']['css'][$js] = $libraries['ui']['css']['misc/ui/ui.theme.css'];
    unset($libraries['ui']['css']['misc/ui/ui.theme.css']);
  }
}

Where To Now?

This shows that we are on the right track, and what we have had in mind is working. What we should focus on now are:

• #591794: Allow themes to alter forms and page
• #87994: Quit clobbering people's work when they click the filter tips link
• Work on ui.garland.css to make it match the Garland look more and decide on a more suitable name for it (garland/ui/garland.ui.css? garland/garland.ui.css? garland/ui.css?)
• Possibly clean up drupal_process_attached it so that we can do something like this instead:
  

  function garland_library_alter(&$libraries, $module) {
    if ($module == 'system') {
      $js = drupal_get_path('theme', 'garland') . '/ui/ui.garland.css';
      $libraries['ui']['css']['misc/ui/ui.theme.css']['data'] = drupal_get_path('theme', 'garland') . '/ui/ui.garland.css';
    }
  }
  

• Possibly move misc/ui/ui.theme.css to modules/system/ui.system.css (or something) with a different default jQuery UI theme
• Make a jQuery UI theme for Seven so that jQuery UI elements look nicer in the administrative theme and Overlay (Screenshot from #87994-111: Quit clobbering people's work when they click the filter tips link)

Changing the title a bit to match what we want to do :-) .

I created #606782: Give Garland a nice looking jQuery UI theme. We'll also need one for Seven so that the popup looks nice when embedded in the Overlay (screenshot).

.

Another actionable item: #614494: Give Seven a nice looking default jQuery UI theme.

Can someone tell me (or point me to information on) where Drupal 7 is using jQuery UI or any of the styles provided by ui.theme.css? I read #315035: Add jQuery UI elements to core so I am aware of where it "can" be used, but I don't think any of it has actually been done and would like to confirm that.

For the record, this totally goes against the whole "Stark" movement. Smoothness is a full-on theme. It's not at all like Stark in every way that counts. Stark doesn't mess with your fonts, borders, border-radius, background colors, images, etc. Having to essentially create a whole jQuery UI theme on top of a Drupal theme is a burden IMO, but since this looks like it's here to stay it should definitely be stripped down.

2 questions:

1. Is anything other that the overlay using this right now? If I remove this file in a theme, do I risk breaking anything in core?
2. What would a stripped own version of ui.theme.css contain in your opinion? Just icons and basic dialog background/borders?

I started to work on a stripped down version of ui.theme.css. I could submit a patch for it, but I'm not sure what you guys are looking to do, if anything. If you're not willing to do anything with it for Drupal 7, please let me know. It could end up being documentation for themers. :)

sub

Thanks a lot! This stuff is looking really great.

Once this is stable for D7, maybe it could be backported to jquery_ui module for D6.

subscribing

Sub.

Jacob found a great link on using multiple jQuery UI themes at once:
http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_si...

What this shows us is that it's possible to swap jQuery UI themes out, build ontop of existing ones, and use multiple themes at the same time.

Ideally there should be consistency between the classes that jQuery UI provides and the classes that Drupal provides for common widgets, like tabs, accordions, etc. To me, that means new theme functions for jQuery UI widgets and changes to existing theme functions where applicable.

It's too late for that, but ui.theme.css needs to be default with. Core CSS files are currently being littered with CSS that override overrides ui.theme.css instead of starting fresh with good code. See overlay-parent.css for an example:

.overlay.ui-widget-content, .overlay .ui-widget-header {
  background: none;
  border: none;
}

Why? Because this is what the person writing the CSS has to start with:

.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }

And this is before we even get to the theme layer.

I believe that after Drupal 7 is released, and modules start using it, and writing CSS in the same manner, we are going to see a lot more of this type of messy code, and I think that sucks. While it is easy to say the file should be removed, certain widgets like the slider/dialog/overlay need minimal styling to be functional. I also think the icons are useful. I propose we do a stripped down ui.system.css file: http://bit.ly/4VuCxc (see the ui. stripped.css tab)

Does anyone have any feedback on this?

Subscribing.

The CSS files don't look as scary in #679036: Upgrade to jQuery UI 1.8. It's easy to swap out the jQuery UI theme with one from the ThemeRoller using hook_css_alter(). jQuery UI needs a theme for it to be usable. I'd consider this issue fixed.

Let's continue on #606782: Give Garland a nice looking jQuery UI theme and #614494: Give Seven a nice looking default jQuery UI theme then. If one of those lands we can mark this one fixed.

So what needs to be done here?

Well, for one, we need to see if this upgrade changes anything, like Rob says in #34: #679036: Upgrade to jQuery UI 1.8.

If not, giving each theme defaults is not the answer here. It's nice to do, but it's just a band-aid for those themes, and the problems with modules and custom theme having bad default CSS to start with would remain.

#575298: Provide non-PHP way to reliably override CSS would help too :-) .

This is nice to have, not a critical bug.

I was looking at this queue (all open 7.x issues tagged with "release blocker").

Do we still want that tag on this issue?

This is already possible with hook_library_info_alter() and hook_library_alter(). Seven got a nice looking jQuery UI theme in #614494: Give Seven a nice looking default jQuery UI theme. Any reason why this issue is still open?

jQuery UI requires a theme (jquery.ui.theme.css), just like how Drupal requires a theme (Stark). It can be swapped with hook_library_info_alter(). jquery.ui.theme.css is the base theme that's shipped with jQuery UI. If we have issues with how jQuery UI's base theme looks, then we should work with them to fix it upstream... I'm not sure what the issue here is.

correcting the tag to the more common one.

Need input from the CSS folks to know how bad it is to theme jQuery UI stuff. Since we have dialog and autocomplete in core the answer should be easy to get.

Just stumbling upon this issue without any activity in the last years. Closing as outdated, see related issue.