اینها رو ببینید، میخوام یه توضیح مختصر بدم درباره اینا :

اصولا، نمایش مناسب اطلاعات میتونه خیلی کمک کنه به کاربر برای درک بهتر. بارها شده که یه جایی یه فرمی رو پر کردم، بعد اصلا نفهمیدم چی شد!! چون پیغامی که نمایش داده شده تو صفحه گم شده. یا اینقدر کوچیک بودن که نتونستم ببینم، یا همرنگ کل محیط بودن و از این حرفا. اینبار من با کمک یه آیکون ست که از اینجا دانلود کردم، یه سری قالب پیغام رو طراحی کردم که بالا میبینید.
هدفم از این طراحی، فقط الگو دادنه. وگرنه اینا اونقدرا هم جالب نیستن. البته کامل هم نیستن، مثلا برای پرسیدن سوال یا چیزهای مثل خطای دسترسی هم شاید بد نباشه که اونها هم اضافه بشن.
البته قسمت دیگه این قضیه هم اینه که ما فارسی زبانها هم نیازمند یه سری تغییرات هستیم که این پیغامها برای زبان ما هم درست بشن. من هر دوتا رو طراحی کردم، تغییر آنچنانی نیاز نیست. کلش هم اینه (البته نیازمند آیکونهایی هستید که از لینک بالایی میتونید بگیرید و بعد در پوشه images کنار فایل CSS بذارید ) :

.message {
	background-color : #bde5f8;
	border : 1px solid #00529b;
	color : #00529b;
	width : 95%; /*Change this to fit to your need*/
	text-align : left;
	direction : ltr;
	padding: 12px 20px 12px 35px;
	background: #bde5f8 url(images/information_32.png) left center no-repeat;
	margin : 4px;
}

.message-fa {
	background-color : #bde5f8;
	border : 1px solid #00529b;
	color : #00529b;
	width : 95%; /*Change this to fit to your need*/
	text-align : right;
	direction : rtl;
	padding: 12px 35px 12px 20px;
	background: #bde5f8 url(images/information_32.png) right center no-repeat;
	margin : 4px;
}

.error {
	background-color : #ffbaba;
	border : 1px solid #d8000c;
	color : #d8000c;
	width : 95%; /*Change this to fit to your need*/
	text-align : left;
	direction : ltr;
	padding: 12px 20px 12px 35px;
	background: #ffbaba url(images/error_32.png) left center no-repeat;
	margin : 4px;
}

.error-fa {
	background-color : #ffbaba;
	border : 1px solid #d8000c;
	color : #d8000c;
	width : 95%; /*Change this to fit to your need*/
	text-align : right;
	direction : rtl;
	padding: 12px 35px 12px 20px;
	background: #ffbaba url(images/error_32.png) right center no-repeat;
	margin : 4px;
}

.success {
	background-color : #dff2bf;
	border : 1px solid #4f8a10;
	color : #4f8a10;
	width : 95%; /*Change this to fit to your need*/
	text-align : left;
	direction : ltr;
	padding: 12px 20px 12px 35px;
	background: #dff2bf url(images/checkmark_32.png) left center no-repeat;
	margin : 4px;
}

.success-fa {
	background-color : #dff2bf;
	border : 1px solid #4f8a10;
	color : #4f8a10;
	width : 95%; /*Change this to fit to your need*/
	text-align : right;
	direction : rtl;
	padding: 12px 35px 12px 20px;
	background: #dff2bf url(images/checkmark_32.png) right center no-repeat;
	margin : 4px;
}

.warning {
	background-color : #feefb3;
	border : 1px solid #9f6000;
	color : #9f6000;
	width : 95%; /*Change this to fit to your need*/
	text-align : left;
	direction : ltr;
	padding: 12px 20px 12px 35px;
	background: #feefb3 url(images/warning_32.png) left center no-repeat;
	margin : 4px;
}

.warning-fa {
	background-color : #feefb3;
	border : 1px solid #9f6000;
	color : #9f6000;
	width : 95%; /*Change this to fit to your need*/
	text-align : right;
	direction : rtl;
	padding: 12px 35px 12px 20px;
	background: #feefb3 url(images/warning_32.png) right center no-repeat;
	margin : 4px;
}

برای پیش نمایش این قالبهای پیام، یه کم تو استیل قالب دست بردم و بعد متوجه شدم متن بالای کامنت هم تغییر کرده، خوب زیاد مهم نیست،‌بد هم که نیست! دیگه تو این پوسته جدید نیستن :)