Theming the (almost) hidden...

Most of developers I have seen working on Drupal projects mainly focus their design effort on the front end, what most of end users will see; there is often very few energy put into making the parts that the administrators will be using sexier, may this be node entry forms or the numerous admin pages. Among all those "details" that fail to catch the designer's attention, I have a few ones that I usually try to deal with right away when I start a project, one of them being the whole set of "notifications" you can see displayed through Drupal; system messages, status report, update report and logs.
So the idea is to get nice reports and messages out of Drupal, something that looks like this:


Guess what, you've got nothing to do, just follow these few steps:
- Download the notifications.css file and add it to your theme (in my case I'll consider it is stored in a css/ folder inside your theme folder),
- Declare the stylesheet into your .info file:
stylesheets[screen,projection][] = css/notifications.css - Add the required pictures; icon-ok.png, icon-error.png & icon-warning.png (the CSS file assumes that these pictures are stored into an images/ folder in your theme folder). I personally favored some icons from the Gnome Icon Theme, but there are alternate open-source options, like the Tango project....
- Add the following lines to your template.php file (this will ensure messages are always represented as lists, even if there is only 1 message of the same type):
/** * Ensure messages are always lists (even when there is only one single message). */ function phptemplate_status_messages($display = NULL) { $output = ''; foreach (drupal_get_messages($display) as $type => $messages) { $output .= "<div class=\"messages $type\">\n"; $output .= " <ul>\n"; foreach ($messages as $message) { $output .= ' <li>'. $message ."</li>\n"; } $output .= " </ul>\n"; $output .= "</div>\n"; } return $output; }
Et voilà!

- reply
Submitted by Alix (not verified) on Fri, 2009-04-17 04:22.love the colors :)
- reply
Submitted by Jim (not verified) on Fri, 2009-04-17 18:34.Added to DrupalSightings.com
- reply
Submitted by Anonymous (not verified) on Sat, 2009-04-18 01:25.Thanks for this! Didn't know about the free sources of icons; thanks for sharing!
- reply
Submitted by Brian Vuyk (not verified) on Sat, 2009-04-18 04:21.That looks really awesome - much better than the notifications themed by core.
Adding this to my toolkit for the next site I build.
- reply
Submitted by Dries (not verified) on Sat, 2009-04-18 14:45.Time to submit a core patch. Maybe propose this for inclusion in Drupal 7. See you in the issue queue?
- reply
Submitted by Anonymous (not verified) on Tue, 2009-05-05 00:02.Fantastic! It looks great. The code can be simplified with the use of implode():
function phptemplate_status_messages($display = NULL) {$output = '';
foreach (drupal_get_messages($display) as $type => $messages) {
$output .= "<div class=\"messages $type\">\n";
$output .= "<ul>\n<li>" . implode("</li>\n<li>", $messages) . "</li>\n</ul>\n";
$output .= "</div>\n";
}
return $output;
}
If the classes now on the div elements were moved to the ul elements, the div elements could be removed.
- reply
Submitted by srdha (not verified) on Sat, 2009-05-23 14:47.i gust want to say some thing "great job"
Update your Twitter randomly according to your intrest Or, from Rss Feed Or, from your own tweet message list Or, Any combination of the above three http://feedmytwitter.com
- reply
Submitted by suplementy (not verified) on Mon, 2009-10-12 17:36.Hi. I like your blog. well done!
- reply
Submitted by jesse (not verified) on Tue, 2009-10-20 11:02.Keep up the good work, and post more articles like the one you have posted above.
- reply
Submitted by Anonymous (not verified) on Tue, 2009-11-03 03:01.thanks too much for your info.