Working with the overlay

Last updated August 22, 2010. Created by arianek on December 10, 2009.
Edited by zzolo, LeeHunter, ksenzee, Dave Reid. Log in to edit this page.

The administrative overlay makes it easier to administer a Drupal site by displaying administrative pages as a layer over the current page (using JavaScript), rather than replacing the page in your browser window. Once an overlay is active, you can use the close link on the overlay to return to the page you were viewing before you clicked the link. In a "Standard" install, the Overlay module is enabled by default.

Uses

Example

Administrative interface without the overlay:

Administrative interface with the overlay:

Accessing the overlay

When enabled, the overlay will appear when you click on administrative links. If you manually enter a URL in your browser, overlay will not be used. To reset so that overlay is used again, leave the admin section of your site, then return to the page on which you want to use overlay.

Roles and permissions

Users must have "access overlay" permission in order to see administrative pages in the overlay.

Disabling

On the admin toolbar, click Modules.
In the Core section, disable the Overlay module.
Click Save Configuration.

Comments

I loved it at first....

Posted by tomcatuk on March 9, 2011 at 6:21pm

but quickly got tired of the overlay. I'm a cheapskate using virtual hosting and the extra candy seems to come at a performance cost. Switch off toolbar in core as well to get rid of the extra admin menu.

Using Overlay Only For Adding Content

Posted by denverdataman on May 6, 2011 at 9:01pm

For a user to have access to Overlays they must also have the "View the administration theme" permission.

Steve Kessler skessler[at]denverdataman.com
Denver DataMan - http://www.denverdataman.com

Accessibility Issue: Don't use it

Posted by norman.b.robinson on October 25, 2011 at 8:47pm

This doesn't seem to be working for accessibility: has anyone else had any success in solving the browser focus and content updates using overlay? I don't understand why this was considered a useful design.

Overlay

Posted by cbh on March 20, 2012 at 5:36pm

I don't like it, or the new admin layout either. I preferred having everything on one screen rather than to have to hunt for things. The overlay, as others have said, seems to be nothing more than eye candy and a resource waster.

Overlay provides no advantage

Posted by galundin on April 11, 2012 at 4:20am

I agree. We go in to admin and change something, then we want to see the result after the change, not go back to what we were looking at before. I guess the assumption is that the administrative changes will pertain to whatever page we happen to be viewing at the moment, but that is seldom the case, in my experience. Even when that assumption is correct, we still have to wait for the old page to refresh when the overlay is closed. So I don't understand how it can save any time or improve the user experience in any way. At best, it's an unnecessary visual distraction. More often, it forces an extra page load to refresh the old page before we can navigate to the page we actually wanted to see, unless we simply navigate directly there without closing the overlay, which defeats the purpose of even having it. (That's what I've always done until just now, when I searched for a way to get rid of it.)

I would be very interested to hear from someone who can describe the advantage of the overlay in specific, technical terms. Where is the discussion behind the decision to include this feature in core, and enable it by default?

Purpose of the overlay explained:

Posted by galundin on April 11, 2012 at 5:21am

I found some of the discussion here:
http://drupal.org/node/659488
http://drupal.org/node/685046

Having read this discussion, I am disappointed that overlay was accepted into core without adequate usability testing. But I realize that this documentation page is not an appropriate place to raise UX issues like these, so I apologize.

However, several of us have questioned the purpose of the overlay, and I think it's a legitimate question that isn't currently being addressed in the documentation, so I'll attempt to summarize my understanding of it now:

Drupal newbies sometimes have difficulty navigating a Drupal site. Overlay attempts to address this by maintaining non-admin context separately, so the user can easily return to the content they were viewing before they entered the admin interface.
Newbies also sometimes don't understand which parts of their site will be publicly visible. Overlay shows admin pages in a visually distinct interface, to make it clear which pages are only visible to admins.
Experienced site builders and developers can easily disable the overlay, but newbies wouldn't even know it exists or how to enable it unless it is already enabled by default.

Of course, these usability issues could have been addressed through much simpler (and less failure prone) design patterns, but at least now I understand the reasoning behind the decision.

I found an issue where I put

Posted by halo_smyth on May 18, 2012 at 7:21pm

I found an issue where I put a link in the help text for a field and the javascript in overlay-parent.js was overwriting my target="_blank" to target="_parent". So when users would click on the link in the help text they would lose all of their work on the form because it would navigate away from the page they were on. I fixed it by changing the javascript but really I don't understand what the purpose of the javascript overwriting the target of a link is. Really it should be default unless I specify otherwise. And if you have a reason to overwrite it the default should be to open a new window during the process of filling out a form like that.