Drupal 7でjQuery UIのCSSを変更する方法。

2013.05.02 / Notes

Drupal 7では標準でjQuery UIが搭載されていて、一部のモジュールやオリジナルのテーマに利用することができます。
ただjQuery UIのテーマが基本デザインのものなので、サイトのデザインとマッチしないこともあります。
そのような場合には、オリジナルテーマ内の「template.php」に次のように記述することで、自由に変更することができます。

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

function THEMENAME_css_alter(&$css) {

if (isset($css['misc/ui/jquery.ui.theme.css'])) {

$alter = drupal_get_path('theme', 'THEMENAME').'/ui/jquery.ui.theme.css';

$css['misc/ui/jquery.ui.theme.css']['data'] = $alter;

}

上記ではオリジナルテーマのディレクトリ内に、「ui」というディレクトリを作成して、ここにjQuery UIのテーマ一式を格納しています。
オリジナルのjQuery UIのテーマの作成には「ThemeRoller」の利用がベターです。