• Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Coolest Guides on the Planet

coolest guides on the planet

Come for the software, stay for the community

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Change the Drupal Administration Appearance and Menu

July 19, 2011 Leave a Comment

drupal-customise-menu

drupal-customise-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’.

overlay-turn-off-drupal

turn off overlay feature in drupal

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.

enable-rubik-theme

enable-rubik-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.

rubik-admin-theme-drupal

rubik-admin-theme-drupal

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

install-admin-menu-module

install-admin-menu-module

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

admin-menu-fly-out-drupal

admin-menu-fly-out-drupal

 

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')";
}
admin-menu-fly-out-drupal2

admin-menu-fly-out-drupal2

 

Cats: Drupal, Tech Tags: admin, administration, backend, css, drupal, menu, overlay, theme

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in