How to Fix Drupal’s Sidebar Body Class Handling

Drupal is the #1 platform for web content management among global enterprises, governments, higher education institutions, and NGOs. Flexible and highly scalable, Drupal publishes a single web site or shares content in multiple languages across many devices. Technology and business leaders transform content management into powerful digital solutions with Drupal … backed by one of the world’s most innovative open source communities.

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

This is something I use now on every site that has sidebars. This code removes the related styles Drupal core erroneously includes when using a custom theme and then adds new classes based on the existence of content in the sidebar region.

/**
 * Implements hook_preprocess_html()
 *
 * @param $vars
 *   An array of variables to pass to the theme template.
 */
function THEME_preprocess_html(&$vars) {
  // Remove any existing sidebar-related classes.
  $vars['classes_array'] = array_diff($vars['classes_array'], array('no-sidebars', 'two-sidebars', 'sidebar-first', 'sidebar-second'));
  if (!empty($vars['page']['sidebar'])) {
    $vars['classes_array'][] = 'sidebar';
  }
  else {
    $vars['classes_array'][] = 'no-sidebar';
  }
}