jQuery UI theming

Question

I want to use in my module custom jQuery UI theme from the themeroller. What is the best way to do it?

Answer 1

Assuming you are using the jquery_ui module, all you have to do is:

• Build a custom download for jQuery UI including your custom theme from ThemeRoller and copy it under the jquery_ui folder, following the instructions in the module's README.txt
• Alternatively, you could just build your custom theme, download it, and copy it to jQuery UI's theme directory

EDIT:

However, since Drupal 7 already ships with the latest jQuery UI, all you gotta do is download your custom jQuery UI theme and include it using one of the following methods:

• Copy the directory to your theme's folder and include the css file in your theme's .info

• Create a custom module, and implement hook_init() and use drupal_add_css() to add your custom stylesheet:

  function mymodule_init() { $options = array( 'group' => CSS_THEME, 'every_page' => TRUE, 'weight' => 9999 ); drupal_add_css(drupal_get_path('module', 'mymodule'), 'mymodule.css', $options); }

Answer 2

If you are adding the UI via drupal_add_library(), you can change the style using hook_library_alter(). For example:

/**
 * Implements hook_library_alter().
 */
function YOURMODULENAME_library_alter(&$libraries, $module) {
  unset($libraries['ui']['css']['misc/ui/jquery.ui.theme.css']);
  $libraries['ui']['css']['path/to/your/custom/theme/jquery.ui.theme.css'] = array();
}

Answer 3

For Drupal 7, the stock Seven theme does this (repository link) (abridged):

function seven_css_alter(&$css) {
  if (isset($css['misc/ui/jquery.ui.theme.css'])) {
    $css['misc/ui/jquery.ui.theme.css']['data'] = drupal_get_path('theme', 'seven') . '/jquery.ui.theme.css';
  }
}

Modify accordingly—i.e. replace "seven" with the name of your theme, and point the path to your jQuery UI theme's CSS file.