mg.to

If you use Drupal, you’ve probably had this happen: You edit a post, preview it and double check it to make sure it’s perfect, and then come back later to find all your work is gone. Then you remember: You didn’t actually save your post, you just previewed it.

I’ve done it more than a few times. But when my boss had it happen to him on our new in-house Drupal site, I figured I’d better do something about it.

There are two problems here, one architectural and one cosmetic. The architectural problem is that Drupal, like so many web-based systems, does not save your work on the server at all when you are editing and previewing. If you just preview and forget to save, your work is lost.

That would take some design effort to fix, but maybe we can fix the cosmetic problem: Drupal’s preview page looks too much like a normal page view.

Here’s a typical Drupal page:

If you edit the page and preview it, it looks like this:

This hardly looks any different from the regular page display. No wonder it’s easy to forget to save the page.

One would think we could use a little bit of CSS in a Drupal theme to style the preview differently. But in searching the Drupal 4.5.2 and 4.6.0RC code, I couldn’t find any way to do this. Drupal just doesn’t mark the preview in any way that I could find to make use of from CSS.

But if we add one line of code to a couple of Drupal core modules, we can then do a bit of work in the Drupal theme to get this preview page:

With the heavy dashed red border and shaded background, the preview won’t be mistaken for an ordinary display page.

Coding details and an updated version of the FriendsLight theme are on my Drupal test site.