IPS4-Tutorial Some boxes warning in css

[ADMIN 322]

Hello,
For those who want to leave the warnings of his forum most beautiful and attractive, here have some css boxes:

HTML

<div class="mbh-success mbh-notification-box">This is the success box</div>
<div class="mbh-failure mbh-notification-box">This is the failure box</div>
<div class="mbh-warning mbh-notification-box">This is the warning box</div>
<div class="mbh-information mbh-notification-box">This is the information box</div>
<div class="mbh-question mbh-notification-box">This is the question box</div>
<div class="mbh-tip mbh-notification-box">This is the tip box</div>
<div class="mbh-notice mbh-notification-box">This is the notice box</div>

 

 

 

CSS

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url('http://fonts.googleapis.com/css?family=Open+Sans');

.mbh-notification-box {
  -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
  margin-bottom: 25px;
	padding: 10px 14px 10px 44px;
	position: relative;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
}
	.mbh-notification-box:before {
		font-family: FontAwesome;
		font-size: 21px;
		left: 14px;
		position: absolute;
	}
.mbh-success {
	background-color: #2ecc71;
}
	.mbh-success:before {
		content: "\f00c";
		margin-left: -2px;
	}
.mbh-failure {
	background-color: #e74c3c;
}
	.mbh-failure:before {
		content: "\f00d";
	}
.mbh-warning {
	background-color: #e67e22;
}
	.mbh-warning:before {
		content: "\f12a";
		margin-left: 5px;
	}
.mbh-information {
	background-color: #3498db;
}
	.mbh-information:before {
		content: "\f129";
		margin-left: 4px;
	}
.mbh-question {
	background-color: #f1c40f;
}
	.mbh-question:before {
		content: "\f128";
		margin-left: 2px;
	}
.mbh-tip {
	background-color: #16a085;
}
	.mbh-tip:before {
		content: "\f0eb";
		margin-left: 2px;
	}
.mbh-notice {
	background-color: #bea474;
}
	.mbh-notice:before {
		content: "\f0a1";
		margin-left: -1px;
	}

 

 

How to use:

You just need to enter the text editor and go to his source code and insert one of the <div> tags mentioned above.

 

To insert CSS:

Put your css code in a <style> tag.