Change the Drupal Administration Appearance and Menu

Drupal 7 administration menu is quite a change from previous versions, in comes the administrative overlay which is like a partial transparent layer over the existing site.

This is a subjective thing however I prefer to turn this off  and have the backend looking opaque and to have a sense that it is a separate side to the front end of the system. What is on offer are Administrative themes purely for the backend, I believe this helps site admins do what they need to do without getting distracted from the sites design.

Finally there is a  custom admin menu module which has a hierarchal admin fly out menu which can quickly get to all parts of the backend.

First up to turn off the Administrative Overlay, to to Home » Administration » Modules and uncheck ‘Overlay’.

You can add in an ‘Administrative’ theme which then makes the back end quite distinct from the general theme of the site, one of the more popular back end admin themes is ‘Rubik‘, this requires the ‘Tao‘ base theme. Get both of these themes from Drupal themes extensions and install into Drupal.

Change the administration theme to Rubik by  going to Home » Administration » Appearance, scroll to the bottom and check the Administration Theme dropdown and enable “when editing or creating content” to keep all the backend work in the Admin Theme.

The Rubik Admin Theme is quite leap forward in how a back end admin theme should look like and is better designed in terms of UI and UX then you get with the default Drupal install.

Next thing to do is add in a very cool hierarchal fly out admin menu called believe it or not ‘Administration menu’, that sits at the top of the page, which is intended to replace the default Drupal Admin menu. Get this from the Drupal modules admin page.

 

Install it via Home » Administration » Modules » Install New Module

Once installed enabled the module in ‘Modules’ and also disable the default admin menu in the core modules by disabling ‘ToolBar‘.

 

You can change the menu font size and appearance to match the default menu that ships with Drupal 7. I find that the custom admin menu uses fonts a little on the large size. This can be changed in the CSS for the admin menu, the font size of the original menu  is  .846em.

So in ‘sites/all/modules/defaults/admin menu/admin menu toolbar/admin_menu_toolbar.css’ make any CSS changes you want to change the appearance.

#admin-menu {
  font: normal 0.846em "Lucida Grande", Verdana, sans-serif;
  box-shadow: 0 3px 20px #000;
  -moz-box-shadow: 0 3px 20px #000;
  -webkit-box-shadow: 0 3px 20px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,
direction='180', strength='10');
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(
color=#000000, direction='180', strength='10')";
}