FriendsLight theme with styled preview
If you’re like me, you’ve lost your work in Drupal a few times when you’ve previewed an edit and then forgotten to save it. Drupal’s preview page hardly looks any different from a normal display page.
When my boss lost his work because of this preview page confusion, I figured I’d better do something about it, so I updated the FriendsLight theme to highlight preview pages visually. I posted some screen shots on my blog. Or, you can try the new theme out by entering a comment to this post and previewing it.
Unfortunately, Drupal does not provide any information to its themes to tell them they are rendering a preview and not a fully saved message. Fixing this requires changing the Drupal core modules node.module
and comment.module
, but it’s a straightforward one-line change in each. The code simply adds $node->preview
and $comment->preview
flags which can be tested in a theme or theme engine.
For Drupal 4.5.2, here is the patch to node.module
:
And here’s the patch to comment.module
:
This code has not changed at all in the CVS Drupal 4.6.0, only the line numbers are different for the patches.
It was simple to update FriendsLight to use the new flags. Just inside the outermost <div>
in both node.tpl.php
and comment.tpl.php
, I added this at the beginning:
and this at the end:
And I added these new styles to style.css
:
Other themes would need to do this in their own way.
Also new in this version of FriendsLight: For message excerpts, I moved the read more links up above the other links so that they are more prominent. I also fixed a bug in the way categories are displayed.
The new version of FriendsLight is attached to this message. Enjoy!
Attachment | Size |
---|---|
friendslight-2005-03-13.tgz | 28.84 KB |
Are you aware of theme_node_preview()? It wraps the previewed nodes with a class “preview”.
theme_node_preview() is new in Drupal 4.6, and I originally wrote this code for 4.5.2.
I don’t like the way theme_node_preview() works, though. It wraps the entire preview area, both the excerpt and the full post, inside a single div with the preview class. If we apply my theme style to Drupal 4.6 using theme_node_preview(), this is the result:
Preview using theme_node_preview()
By comparsion, the same preview using my code looks like this:
Preview using $node->preview
I think the latter looks better and is more clear.
Also, theme_node_preview() doesn’t help with comment previews, while my code with $comment->preview does.
There’s some more discussion of the two preview approaches here.