Add useful styling for status, warning, and error messages
JohnAlbin - September 14, 2008 - 11:05
| Project: | Zen |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | JohnAlbin |
| Status: | closed |
Description
Since most theme developers neglect the tabs in Drupal, I added beautiful tab styling to Zen.
The same is also true of status, warning, and error messages. Most theme developers just leave drupal's standard styling. Which, actually, isn't very eye-catching for a message that Drupal wants the user to see.
I've got some styles whipped up with little icons. They are eye-catching and yet shouldn't clash with most site's styles. And if they do conflict with a site's colors, I'll include the PSD so you can tweak it. :-)
#1
PNG-32 versions have been committed.
Still need IE6 versions of the files.
#2
The new icons for messages are really great, but placing them in the middle of the left edge of the message box looks bad for large message boxes (see message-icon.png). This patch makes it stay in the upper-left corner now matter how large the box is.
Also, when all the text is italicized, placeholder text in <em> tags no longer stands out. This patch makes that text bold. Yes, it's a bit of an oddity to embolden text in an <em> tag instead of italicize it, but it works.
#3
Oops, forgot to update status.
#4
@JohnAlbin: Hmm, are these the icons that were added to the 6.x-1.x-beta3 release? It is a nice idea but putting them in the background (and especially as clearly as now) lessens the readability of status/error/warning message and thus giving a worse user experience.
I vote for not having them there, but if you think they should there I propose making the icons blend in more with the background color.
#5
Jens, yes, these are the icons that went into Zen 6.x-1.0-beta3.
I’m afraid I don’t understand. How does it lessen readability?
@Garrett. Wow! That’s a lot of status messages! :-) I think your patch looks good. I’ll review soon.
#6
@Garrett, I think its easier to just remove the font-style: italic from the messages. :-) But I applied the other part of your patch: http://drupal.org/cvs?commit=158963
Now for the IE6-compatible icons.
#7
Fixed.
#8
Automatically closed -- issue fixed for two weeks with no activity.
#9
Thanks for this patch to Beta 3..
I am not sure from reading this thread is this patch is also to apply to zen_classic.. If YES then there are some CSS bugs a illustrated in the attached images.
These images were taken using a OSX, Firefox 3 and a default installation of Drupal..
I am not sure if this was intentional however simply copying the messages.css and associated image icons fixes the problem.
Hope this helps!
Russ
#10
The only change made to Zen after 6.x-1.0-beta3 was to simply fix the positioning of the messages icon and the italics. The entire change was described in #5 and #6 above and is shown here: http://cvs.drupal.org/viewvc.py/drupal/contributions/themes/zen/zen/mess...
I don't think what you are describing has anything to do with italics or whether the image is positioned at the top-left or the center-left.
Also, Zen Classic doesn't use the messages.css file from Zen. It purposefully removes that stylesheet (take a look at comments in zen_classic.info) because it has its own set of message icons. If you feel this is a legitimate bug, please open a new issue. Thanks!
@Jens, I never got a response about my question in #5 above. I value everyone’s opinion about readability and usability. :-)