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.
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
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!
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!
This module is awaiting approval on drupal.org, but you can still find the project on github:
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 here, read 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!