Custom Drupal 7 Module: Toggle Overlay

  • Want a fresh pair of eyes?

    A lot of times we find an outside perspective can work wonders. If you'd like to send us your information, we have no problems listening and offering our thoughts.

Like Us On Facebook:  

New custom Drupal 7 module: Toggle Overlay

Toggle Overlay is a great new module for web developers and designers. It allows you to upload an image of how a specific page is supposed to look and overlay the image over that page. Included is an easy to use admin interface that allows you to add as many overlays as you want. We developed the module internally to build custom Drupal sites and are now making it available to the community.

Configuration

After installing the module in the usual fashion, Drupal will show a new link under the Administration menu: Configuration > Development > ‘Toggle Overlay’.
Custom Drupal Module Config Page

Once on that screen, simply type in the relative path, upload an image, and optionally enter a vertical offset. The vertical offset can be useful when you have extra toolbars. Add as many overlays as you would like or need. Click Save configuration when complete.

Using the Overlay

Navigate to one of the paths you setup in the previous step and there will be a Toggle Overlay button on the bottom right of the page.
Custom Drupal Module - How the toggle overlay button looks

Clicking this toggles the overlay on and off. The overlay is transparent enough to view the website behind it.
Custom Drupal Module - How the design visual looks when turned on

Now you can style the elements on the page directly in the browser’s inspector so they match the image and give you a pixel perfect design. As always, you’ll need to verify the styling in all required browsers, but with the overlay will make that much easier!

Mobile Designs

Currently, break-points aren’t supported in the module. You can still use this for mobile designs by simply replacing the overlay image for a specific path to be the mobile or tablet version. Refresh the page that will receive the overlay and Presto!

Downloading

This module is awaiting approval on drupal.org, but you can still find the project on github:
https://github.com/sharpgit/toggle_overlay

At Sharpdot we build a lot of custom Drupal websites, themes and modules. You can find out more of what we do with Drupal on our blog hereread about all of the services we offer here or view some of our featured projects here. If you need any help with your Drupal website feel free to get in touch!

About The Author

Barry Gilbert

Personal Website


Have your say!

Have your say!

Message

Name *

Email *

  • Want a fresh pair of eyes?

    A lot of times we find an outside perspective can work wonders. If you'd like to send us your information, we have no problems listening and offering our thoughts.

Recent Posts
Tags
Archives