CSS Text Box Tutorial

Text boxes are used to showcase different types of content like info messages, menus, social widgets, block quotes, etc. As far as we checked no theme by default offers customizable text boxes and you need to make your own to suit your needs. In this article we will create different types of text boxes for different purposes and you can copy paste the code on your site to add the widget.

Inline Text Box

When you want to create only one or two text boxes then the recommended way is to use inline CSS at element level instead adding CSS at site level. Below is an example code to convert a paragraph to a box with background.

<p align=justify style="background-color:#02f3e5;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;"><b>
This is a Sample Textbox</b>
</p>

You can just add paste the code anywhere on the body of your page and it will look like below on the published site:

This is a Sample Text box with background color added using inline CSS. This is the easiest way to add text boxes to your site.

You can customize the background color and font attributes to align the box on your site.

Text Boxes as Info Messages

Info messages are useful to show different styles of messages to your audience like warning, alert, announcement, danger, etc.We use font awesome icons to add icons in front of the text and the CSS for the info message box is given below:

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

.webnots-notification-box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #ffffff;
font-family: verdana, 'open sans', sans-serif;
margin-bottom: 25px;
padding: 10px 14px 10px 44px;
position: relative;
box-shadow: 0px 1px 5px #999;
}
.webnots-notification-box:before {
font-family: FontAwesome;
font-size: 21px;
left: 14px;
position: absolute;
}
.webnots-information {
background-color: #3498db;
}
.webnots-information:before {
content: "\f129";
margin-left: 4px;
}
.webnots-question {
background-color: #f1c40f;
}
.webnots-question:before {
content: "\f128";
margin-left: 2px;
}
.webnots-tip {
background-color: #16a085;
}
.webnots-tip:before {
content: "\f0eb";
margin-left: 2px;
}

The HTML code for the info message box is as below:

<div class="webnots-information webnots-notification-box">
This is the info box - You can input as much or as little information!
</div>
<div class="webnots-question webnots-notification-box">
This is the help box - You can input as much or as little information!
</div>
<div class="webnots-tip webnots-notification-box">
This is the tip box - You can input as much or as little information!
</div>

You can add different types of messages by adding the required icon and below is some of the examples for info message boxes:

Learn more on creating notification message boxes.

Block Quotes with Text Box

Block quotes on your site can be decorated with text boxes so that it looks attractive and beautiful on the site. Below is one example of customizing block quotes with CSS:

blockquote {
font-style:italic;
line-height:32px;
font-size:20px;
color:#fff;
background: #3F51B5;
margin:10px;
padding: 15px 20px 15px 20px;
border-radius: 5px;
}
blockquote:before,
blockquote:after {
position: relative;
vertical-align: middle;
font-family: 'Playfair Display', serif;
font-size: 56px;
font-weight: 700;
line-height: 0;
color: #FBC02D;
}
blockquote:before {
left: -5px;
content: '\201C';
}
blockquote:after {
content: '\201D';
}

The HTML should be like below:

<blockquote>
This is block quote element customized with CSS text box properties. You can customize more as you need...
</blockquote>

By adjusting the background and quotes color you can results like below:

This is block quote element customized with CSS text box properties. You can customize more as you need...

This is block quote element customized with CSS text box properties. You can customize more as you need...

This is block quote element customized with CSS text box properties. You can customize more as you need...

Learn more on creating custom bootstrap style block quotes for your site.

Menu Boxes

Text boxes can be used to show menus or a listed content to save lot of space on your site. Here we show two such boxes as basic, actually you can do much more.

CSS for Menu box 1:

.container-box {
width: 300px;
padding: 20px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
background-color: #5cb85c;
}
.item-list {
display: inline-block;
padding: 6px 12px;
margin-bottom: 5px;
font-size: 20px;
font-weight: 600;
line-height: 28px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
color: lightyellow;
}

HTML for Menu Box 1:

<div class="container-box">
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
<button class="item-list block"> Help </button>
</div>

The menu box 1 will be like below on the published site:

CSS for Menu Box 2:

.box-column {
width: 350px;
border: 1px groove;
padding: 5px;
}
.color-box {
padding: 0;
margin: 0;
list-style: none;
}
.color-box li {
color: #fff;
padding: 10px 10px 10px 15px;
background-color: brown;
margin-bottom: 3px;
font-size: 26px;
}

HTML for Menu Box 2:

<div class="box-column">
<h3>Opening Hours</h3>
<ul class="color-box">
<li>Breakfast: 8AM - 11AM</li>
<li>Grill Menu: 12AM - 12PM</li>
<li>Live Music: 8AM - 11AM</li>
</ul>
</div>

The menu box 2 will look like below: