Error and success CSS message boxes 003

Another simple message boxes for using in web developing for error, success, info and warning, by using simple div elements and css I will build a message box with a title and a small icon.

Source code:

 you can download the full project source code with icons, message_box_003.rar. I use this site to get icons for my work, veryicon.com you can get more icons there.

CSS code:

a simple style for the message box, I just fixed the width of the message to 500px, you can change it, the general shape is the same for all message types, only background and border color title color and icon change depend on the chosen class for the message type.

/***********************************************************************
http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html
My code is free to use, but not free to republish
************************************************************************/
.error_msg_003, .success_msg_003, .info_msg_003, .warning_msg_003{
 width: 500px;
 height: auto;
 margin: 0px;
 padding: 2px 4px;
 font: bold 13px Arial,sans-serif;
 padding: 7px 0px 5px 5px;
 -moz-border-radius: 6px 6px 6px 6px;
 }

.error_msg_003{
 border:solid 1px #FBD3C6;
 background:#FDE4E1;
 color: #B10009;
 }

.success_msg_003{
 border: solid 1px #ADDE5C;
 background: #DFF2BF;
 color: #008000;
 }

.info_msg_003{
 border:solid 1px #46B6EC;
 background:#BDE5F8;
 color: #00529B;
 }

.warning_msg_003{
 border:solid 1px #FDDD5B;
 background:#FEEFB3;
 color: #9F6000;
 }

.msg_003_image{
 width: 16px;
 height: 16px;
 float: left;
 margin: 0px 7px;
 }
/**********************************************************************/
.error_msg_003 #image{ background: url("icon/error_icon_16.png") no-repeat;}
.success_msg_003 #image{ background: url("icon/success_icon_16.png") no-repeat;}
.info_msg_003 #image{ background: url("icon/info_icon_16.png") no-repeat;}
.warning_msg_003 #image{background: url("icon/warning_icon_16.png") no-repeat;}

HTML code:

put this html code in the part you want to show the message, just set class to any one the following types
error_msg_003
success_msg_003
info_msg_003
warning_msg_003

 

 message body message body message body.

PHP function code:

I make a php function to present the message in my pages, three parameters are required : message type, title and message text.
message type is flexible you can use a string that is insensitive case or you can use a number.
1 or "error"
2 or "success"
3 or "info"
4 or "warning"

function message_box_003($msg_type, $msg_body){
 $msg_type = strtoupper($msg_type);
 switch ($msg_type)
 {
 case "ERROR": case "1":
   $class_name = "error_msg_003";
   break;
 case "SUCCESS": case "2":
   $class_name = "success_msg_003";
   break;
 case "INFO": case "3":
   $class_name = "info_msg_003";
   break;
 case "WARNING": case "4":
  $class_name = "warning_msg_003";
   break;
}
echo'

 

 '.$msg_body.'

';
}

ex:

message_box_003('error', "Access denied, you don't have permission.");
message_box_003(1,"Access denied, you don't have permission.");

If this post was good and helpful for you, Please give it Like.

.