Jump to content
WebFlake

Advertisement

Some boxes warning in css

Luca Munich

By Luca Munich
in IC4 Guides

 Share

Recommended Posts

Luca Munich Enthusiast

Luca Munich

Posted
Posted

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.

 

 

  • Upvote 2

Luca Munich has been banned. Requesting for uploads are useless. 

Link to comment
Share on other sites
  • 2 months later...
  • 11 months later...
Draffi Rookie

Draffi

Posted
Posted (edited)

This works for IBP 3.4.X also...

Simple add to an IP.C-Page (Raw-HTML) this: 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" media="screen" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="screen" />

<style media="screen" type="text/css">
.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;
	}
</style>
<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>

The Result:

style_boxes.png.bdde6b4552c67666872a47077d73dcb3.png

Edited by Draffi
Link to comment
Share on other sites
  • 4 weeks later...
Comendator Contributor

Comendator

Posted
Posted
On 24/04/2017 at 3:40 AM, Comendator said:

dont works for me, dont see picture, help me please?

im solve this Problem. 

 

Change: 

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

To: 

	padding: 15px 15px 15px 45px;
	border-radius: 2px;
	position: relative;
	margin-bottom: 10px;
	color: #fff;

 

Link to comment
Share on other sites
Cookie Monster Proficient

Cookie Monster

Posted
Posted
22 hours ago, Comendator said:

im solve this Problem. 

To: 


	padding: 15px 15px 15px 45px;
	border-radius: 2px;
	position: relative;
	margin-bottom: 10px;
	color: #fff;

 

 

Just to say in your last code, your missing a few things for cross-browser comparability 

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #fff;
	margin-bottom: 10px;
	padding: 15px 15px 15px 45px;
	position: relative;

Note the -moz-border-radius and -webkit-border-radius More info about this can be found here

VAEfvMI.png

Liked what i posted remember to feed me a cookie ->
Or you can add a cookie to myCookieJar

Link to comment
Share on other sites
Comendator Contributor

Comendator

Posted
Posted
4 hours ago, Cookie Monster said:

 

Just to say in your last code, your missing a few things for cross-browser comparability 


	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #fff;
	margin-bottom: 10px;
	padding: 15px 15px 15px 45px;
	position: relative;

Note the -moz-border-radius and -webkit-border-radius More info about this can be found here

Not friend, the code of the author of the topic does not show the icon of the awesome, it is thus in the subject 00c, but the icon n shows, with that which postei it works normally

Link to comment
Share on other sites
Cookie Monster Proficient

Cookie Monster

Posted
Posted
3 minutes ago, Comendator said:

Not friend, the code of the author of the topic does not show the icon of the awesome, it is thus in the subject 00c, but the icon n shows, with that which postei it works normally

All i said was that you where missing -moz and -webkit for crossbrowser.

Notthing about the icons.

 

VAEfvMI.png

Liked what i posted remember to feed me a cookie ->
Or you can add a cookie to myCookieJar

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...