Recently I was working on a site where the design for table rows called for the row to be highlighted on hover with a border.
Seemed simple enough, but the first attempt didn’t work:
tr:hover {
border: 1px solid #000;
}The trouble with this is that it increases the height of the table. As always, someone else had already faced the same problem, so the answer was on StackOverflow.
All good, but still something wasn’t quite right in the Drupal site. I isolated the styles, and everything was fine, so there must have been something going on with Drupal’s core styles. These are all very well, but it’s quite likely that you’re overriding a lot of them, especially if you’re using a normalize stylesheet like the one included in the Zen theme.
A bunch of different solutions have been suggested for removing core styles, but my preference would be to actually remove them:
/**
* Implements hook_css_alter().
*
* Remove unwanted module CSS.
*/
function mytheme_css_alter(&$css) {
$removal_list = array(
'google_cse' => array(
'/google_cse.css',
),
'system' => array(
'/system.theme.css',
'/system.menus.css',
),
);
foreach ($removal_list as $module => $stylesheets) {
$module_path = drupal_get_path('module', $module) ;
foreach ($stylesheets as $stylesheet) {
$css_path = $module_path . $stylesheet;
if (isset($css[$css_path])) {
unset($css[$css_path]);
}
}
}
}The same technique can also be applied to JavaScript files:
/**
* Implements hook_js_alter().
*
* Remove unwanted module JS.
*/
function mytheme_js_alter(&$javascript) {
$removal_list = array(
'google_cse' => array(
'/google_cse.js',
),
'menu_attach_block' => array(
'/menu_attach_block.js',
),
);
foreach ($removal_list as $module => $scripts) {
$module_path = drupal_get_path('module', $module) ;
foreach ($scripts as $script) {
$script_path = $module_path . $script;
if (isset($javascript[$script_path])) {
unset($javascript[$script_path]);
}
}
}
}