8

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

5
  • I couldn't create jQuery UI tag.
    – ya.teck
    Apr 18, 2011 at 13:00
  • it can't be separated by spaces or else it understands they are 2 different tags :)
    – Alex Weber
    Apr 18, 2011 at 13:39
  • This is the first question tagged with jQuery Ui. I don't have permission to create new tag :)
    – ya.teck
    Apr 18, 2011 at 14:25
  • To which Drupal version are you interested?
    – apaderno
    Apr 19, 2011 at 22:38
  • I am using Drupal 7.
    – ya.teck
    Apr 20, 2011 at 13:00

4 Answers 4

6

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

4
  • I haven't found drupal 7 version of jquery_ui and I don't think that coping my files into drupal core directory is the best way.
    – ya.teck
    Apr 18, 2011 at 14:28
  • My bad, agreed, I've edited my original post to fix this :)
    – Alex Weber
    Apr 18, 2011 at 14:33
  • Doesn't drupal_add_css just add new css files but not replace them? I'm going to use jQuery UI only on a single page.
    – ya.teck
    Apr 18, 2011 at 14:52
  • drupal_add_css replaces files with the same name, so if you name your css 'jquery.ui.theme.css' for example it will be used instead of the default version
    – Alex Weber
    Apr 18, 2011 at 16:11
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.

3

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();
}
1
  • 1
    I think this is the better method because likely it will be module specific. Also, it worked for me. Aug 9, 2012 at 2:20
2

I recommend to use the jQuery UI theme module which manages multi THEMEROLLER generated UIs and attached these UIs to Drupal themes. Then set the jquery UI CSS classes for elements in Drupal with the modules such as block class/ node class/ webform css, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.