Creating Info Boxes With CSS

A great feedback for online forms is the info box. There can be several kinds. The green success box lets you know the form was successfully submitted. There are other kinds of info boxes as well, that indicate, variously, warnings, information, or errors.

Create your own custom info boxes using CSS and Fontawesome. First, you’ll want to ink to the Fontawesome stylesheet in your theme’s header:

<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />

.

Here’s the CSS:

div.info, div.success, div.warning, div.error {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px;
}

div.info {
	color: #00529b;
	background-color: #bde5f8;
}

div.success {
	color: #4f8a10;
	background-color: #dff2bf;
}

div.warning {
	color: #9f6000;
	background-color: #FEEFB3;
}

div.error {
	color: #D8000C;
	background-color: #FFBABA;
}

Here is the HTML:

<div class="info">Here is an info box.</div>

<div class="success">Here is a success box.</div>

<div class="warning">Here is a warning box.</div>

<div class="error">Here is an error box.</div>

And here is the live demo:

You can get creative designing your boxes but keep in mind that generally, green implies success, yellow a warning, and red an error. Other than that, have fun with it!

Joni

Joni Mueller has been designing web sites for hire since 2003, when she first blew up her web host’s server by insisting on running Greymatter. Since then, Joni has designed for Blogger and Movable Type, TextPattern, WordPress and CMS Made Simple. She lives with her cat and shoe collection in a bucolic old section of Houston called Idylwood. For some strange reason, Joni likes to refer to herself in the third person. When she’s not working on web design, she’s ordering lawyers around. And blogging about it. Or both.

www.jonimueller.com