McArthur GFX

Status messages are quite common in web applications. It can be very useful for the user to get feedback from his input. And it’s a good idea to style some status messages in a way that makes sense according to their message.

This is an Informational message.

The following are common messages used for during form submittal, or even simply navigating certain dynamic pages.

This is an Error message.

This is a Warning message.

This is a Success message.

It’s not to hard to style these as such. I felt that semantically, these messages could be blockquotes, as they stand out from the rest of the context. I’ve used the Silk icons, as is pretty common, but weFunction also has great icons for this use.

.success, .error, .warning, .info {
	border-top:1px dotted;
	border-bottom:1px dotted;
	color:#777;
	margin-bottom:3px;
	padding:5px 40px;
}
.success {
	background:#dfd url('images/success.gif') no-repeat 10px center;
	border-color:#9d8;
}
.error {
	background:#fdd url('images/error.gif') no-repeat 10px center;
	border-color:#d98;
}
.warning {
	background:#ffc url('images/warning.gif') no-repeat 10px center;
	border-color:#dd7;
}
.info {
	background:#ccf url('images/info.gif') no-repeat 10px center;
	border-color:#89d;
}

I’ve done them fairly straightforward. They all get the same spacing, with enough padding to allow the background icon to be on the left. They also get a dotted border on top and bottom. And information is blue, success is green, warning is yellow, and error is red.

That’s how I do it. How do you style your status messages?