8

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

  • I couldn't create jQuery UI tag. – ya.teck Apr 18 '11 at 13:00
  • it can't be separated by spaces or else it understands they are 2 different tags :) – Alex Weber Apr 18 '11 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 '11 at 14:25
  • To which Drupal version are you interested? – kiamlaluno Apr 19 '11 at 22:38
  • I am using Drupal 7. – ya.teck Apr 20 '11 at 13:00
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); }

  • 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 '11 at 14:28
  • My bad, agreed, I've edited my original post to fix this :) – Alex Weber Apr 18 '11 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 '11 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 '11 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
    I think this is the better method because likely it will be module specific. Also, it worked for me. – Brandon Bearden Aug 9 '12 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, privacy policy and cookie policy

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