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.teckApr 18, 2011 at 13:00
-
it can't be separated by spaces or else it understands they are 2 different tags :)– Alex WeberApr 18, 2011 at 13:39
-
This is the first question tagged with jQuery Ui. I don't have permission to create new tag :)– ya.teckApr 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.teckApr 20, 2011 at 13:00
4 Answers
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.teckApr 18, 2011 at 14:28
-
-
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.teckApr 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 Apr 18, 2011 at 16:11
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.
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();
}
-
1I think this is the better method because likely it will be module specific. Also, it worked for me. Aug 9, 2012 at 2:20
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.