Fixing Drupal Commons admin menu

We are using Drupal commons-3.3 for a project. The commons project by Acquia provides a distribution of Drupal with many social features out of the box, as well as a responsive, mobile ready theme based on Adaptive Theme. This is the latest version of the commons project and includes many functionality such as groups, user profiles and events.

However, it is still in active development, and there are several issues we encountered while using it.

One that specifically hurt our flow of work was the admin menu bug.

Commons-3.3 has a configurable admin bar – you can change it’s position from top to right, and expand or hide it.
We needed to create a subtheme for the default Commons Origins theme, so we followed the regular procedure for creating a simple subtheme which inherits all of its parent theme’s styling and assets, as described here.┬áBut then we encountered a bug: the admin menu obscured part of the page. You can see an image of it:

Screenshot from 2013-09-18 09:51:51

On some pages, such as the 404 error page, the admin menu worked fine. We compared two pages’ layout and stylesheets, and found the difference was a missing padding on the body style of the page.

We wanted to add the padding back, if it was not found, when the user was an administrator only, but we also didn’t want to change the parent theme so that we could upgrade easily later.

What we ended up doing was add a simple javascript function on our module’s hook_init. This hook is called whenever a new page request arrives, so
it would catch all pages. The function would then set the margin as needed. We only add the js function if the user is an administrator (and thus has the administrator bar.

Here is the complete hook, with the javascript function embedded in a string:

function panda_init()
  global $user;
  if ($user->uid == 1)
      $bodyPaddingJs = "jQuery(document).ready(function() { jQuery('body').css('padding-top', '39px'); });";
      drupal_add_js($bodyPaddingJs, array('type' => 'inline'));

For Clarity, here is the embedded Javascript function by itself:

jQuery(document).ready(function() {
  jQuery('body').css('padding-top', '39px');

This solved the problem quickly, and enabled us not to change the original theme.