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.

error,success,info and warning css message box 003

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, 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.
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;

 border:solid 1px #FBD3C6;
 color: #B10009;

 border: solid 1px #ADDE5C;
 background: #DFF2BF;
 color: #008000;

 border:solid 1px #46B6EC;
 color: #00529B;

 border:solid 1px #FDDD5B;
 color: #9F6000;

 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

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";
 case "SUCCESS": case "2":
   $class_name = "success_msg_003";
 case "INFO": case "3":
   $class_name = "info_msg_003";
 case "WARNING": case "4":
  $class_name = "warning_msg_003";
'; }
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.
    Blogger Comment
    Facebook Comment


Post a Comment