Error and success CSS message boxes 002

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_002.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 400px, you can change it, the general shape is fixed 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_002, .success_msg_002, .info_msg_002, .warning_msg_002{
 width:400px;
 height:auto;
 margin:0;
 -overflow: auto;
 padding: 7px 0px 5px 5px;
 border-radius: 6px;
 -moz-border-radius: 6px;
 }

.msg_002_image{
 width: 32px;
 height: 32px;
 }

.msg_002_title{
 margin: 0;
 width: 90%;
 -color: #B10009;
 font-size: 20px;
 font-weight: bold;
 -overflow: auto;
 -overflow:scroll;
 font-family: Tahoma,Arial,Verdana;
 }

.msg_002_body {
 font-family: Tahoma,Arial,Verdana;
 font-size: 12px;
 width:400px;
 overflow: auto;
 }

/**********************************************************************/
.error_msg_002{
 border: 1px solid #FFC1C1;
 background-color: #FFE8E8;
 }
.success_msg_002{
 border: 1px solid #ADDE5C;
 background: #DFF2BF;
 }
.info_msg_002{
 border: 1px solid #46B6EC;
 background:#BDE5F8;
 }
.warning_msg_002{
 border: 1px solid #FDDD5B;
 background:#FEEFB3;
 }

/**********************************************************************/
.error_msg_002  h1{color: #B10009;}
.success_msg_002 h1{color: #008000;}
.info_msg_002  h1{color: #00529B;}
.warning_msg_002 h1{color: #9F6000; }

.error_msg_002  #image{ background: url("icon/error_icon_32.png") no-repeat;}
.success_msg_002 #image{ background: url("icon/success_icon_32.png") no-repeat;}
.info_msg_002  #image{ background: url("icon/info_icon_32.png") no-repeat;}
.warning_msg_002 #image{ background: url("icon/warning_icon_32.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_002
success_msg_002
info_msg_002
warning_msg_002

 

  

 
 

  
Error message title
  
  message body message body 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_002($msg_type, $msg_title, $msg_body){
 $msg_type = strtoupper($msg_type);
 switch ($msg_type)
 {
 case "ERROR": case "1":
   $class_name = "error_msg_002";
   break;
 case "SUCCESS": case "2":
   $class_name = "success_msg_002";
   break;
 case "INFO": case "3":
   $class_name = "info_msg_002";
   break;
 case "WARNING": case "4":
  $class_name = "warning_msg_002";
   break;
}
echo'



 

  

 
 

  
'.$msg_title.'
  
  '.$msg_body.'
  
 


';
}

ex:

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

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

.