jQuery-UI is not working in my userscript without CSS, or with customization?

The problem with userscripts and jQuery-UI is that jQUI uses CSS with lots of background images, all loaded with relative paths. EG:

... url("images/ui-bg_dots-small_35_35414f_2x2.png") ...

For security reasons, that relative path will seldom work out for a userscript.

This means that to use jQUI in a userscript you can either:

• Load the required CSS off a server. (Dynamically, not using @resource)
  or
• Use dynamic CSS rewriting as shown in this old answer.

I now recommend just using one of the standard themes (See the Gallery tab in the left-hand column), and using Google Hosted Libraries. Google hosts all of the default jQUI themes such as UI lightness, etc.

No one hosts partial jQUI builds for public consumption as far as I’ve ever found. But, since you are using @require, the JS loads from your local machine anyway (very fast), so you might as well save maintenance headaches and use the standard jquery-ui.min.js file.

If you really want a custom jQUI build, or a heavily customized CSS theme, you will need to have your own server and host the files from there.

Here’s a complete Greasemonkey/Tampermonkey script that shows how to use jQUI the easy way. The trick is to inject the CSS with a <link> node so that all the hosted background images will load correctly:

// ==UserScript==
// @name        _Add stuff to a web page using jQuery UI.
// @include     https://stackoverflow.com/questions/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @require     http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js
// @grant       GM_addStyle
// ==/UserScript==

/*--- For this to work well, we must also add-in the jQuery-UI CSS.
    We add the CSS this way so that the embedded, relatively linked images load correctly.
    (Use //ajax... so that https or http is selected as appropriate to avoid "mixed content".)
*/
$("head").append (
    '<link '
  + 'href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/le-frog/jquery-ui.min.css" '
  + 'rel="stylesheet" type="text/css">'
);

//--- Add our custom dialog using jQuery.
$("body").append ('<div id="gmOverlayDialog"><h1>Sample Dialog added using jQuery-UI</h1></div>');

//--- Activate the dialog.
$("#gmOverlayDialog").dialog ( {
    modal:      false,
    title:      "Draggable, sizeable dialog",
    position:   {
           my: "top",
           at: "top",
           of: document
           , collision: "none"
    },
    width:      "auto",
    minWidth:   400,
    minHeight:  200,
    zIndex:     3666
} )
.dialog ("widget").draggable ("option", "containment", "none");

//-- Fix crazy bug in FF! ...
$("#gmOverlayDialog").parent ().css ( {
    position:   "fixed",
    top:        0,
    left:       "4em",
    width:      "75ex"
} );

---

For minor theme adjustments, you can use GM_addStyle() to set !important styles.