HTML Tip: How to Create a Custom Style for Text Boxes

In this post, I will show you two options for controlling the size and colors of a text box on your post.

• Example 1: Specify Blockquote Style
• Example 2: Add a Class to a DIV

If you are ready to read how to style your text boxes and step through both examples with me, check out my post on Working on Working Mom!

EDIT Since it looks like Working On Working Mom is currently down, I have shared the full tutorial below. Enjoy!
Hi everyone! I’m Julie. Thanks Angela for inviting me to guest post on Working on Working Mom! Today I’m going to share how to edit the style of your text boxes.
I will show you two options for controlling the size and colors of a text box on your post.–>

Table of Contents

Toggle

Example 1: Specify Blockquote Style

I like to use the blockquote feature to highlight special text or a writing prompt, and I have styled my blockquote accordingly. The reason I choose to use the blockquote to emphasize specific text, is it already indents and differentiates the text, allowing me to only need to add customization in the colors used. In the screenshot below, the area with the darker background and italics text is my styled blockquote.

You can make this styling a couple of ways. The most consistent way is to edit your theme’s stylesheet so that all blockquotes will have the same look. In WordPress you can do so through your dashboard by going to Appearance then Editor then editing your style.css file. Below is the code I entered into my stylesheet to create the text box you see in the screenshot.

 

blockquote{
background: #891e42;
font-style: italic !important;
color: #fff;
}

 

The specific items I chose to style in my blockquotes are the background color of the blockquote text box, the font style to be italic, and the font color. I had to use “!important” to make sure that another font-style command in the stylesheet doesn’t override the command I’m trying to customize.

So with this, I just simply use the blockquote button in my WordPress Visual Editor or enter the code myself if typing in the Text Editor. My text box code in the post itself will just look like this:

<blockquote>10 Lessons I Learned In Life</p></blockquote>However, if you are uncomfortable changing your theme’s stylesheet, you may also use styling directly in the blockquote tag. This requires typing more into the Text Editor, and you will need to remember to be consistent each time you use the tag if you wish to have the same look across all your quoted/text areas. I will show how to do this second option in the next example.

Example 2: Add a Class to a DIV

You also don’t have to use the blockquote feature specifically to create the text box look. If you want a special text box outside your normal way of quoting text, you can just style a div in any way you want. In this example I will show two ways to style a div. One way will be to update the stylesheet with a special class of your making, and another will be to edit the style manually in the div itself.

Example 2, Option 1: Create New Style Class

In my stylesheet, I created a new class called “SpecialTextBox”, and the code looks like this:
 

.specialtextbox {
background: #BC8F8F;
color: #800000;
height: 200px;
width: 350px;
overflow: auto;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #800000;
} /*Julie-made*/

 

You can see that I even made a comment to remind myself that I added that piece of code to my pre-made theme. You can call this class whatever you want, just be sure to include the “.” at the beginning. Then, when you are ready to use it, you will add class=”specialtextbox” (or whatever you named it) to the div you want to follow that style command. The first two commands are for the background color followed by the text color. If you are not familiar with HEX codes for colors, the HTML Goodies site has a great table with examples you can use. The next group is for the height and width of the text box. Overflow:auto is to add a scrollbar if the text exceeds that size. Then the last pieces are to align the text and control the border. Obviously these are all optional and can be tweaked to your preference, and other CSS styling commands can be added as well. Then you call the class as follows when you create the div for your text box in the Text Editor.

<div class=”specialtextbox”>10 Lessons I Learned In Life</div>

Example 2, Option 2: Stylize the individual DIV

Option two is to skip the stylesheet altogether and just add the style commands in the div tag. You will see the same commands as above inside the “style” area within the div, below.

<center><div style=”background:#BC8F8F; color:#800000; height:200px; width:350px; overflow:auto; text-align:left;”>The text you wish to emphasize in a lovely text box will go here.</div></center>That code translates to the following:

 

The text you wish to emphasize in a lovely text box will go here. You can include a quote, a joke, a writing prompt, or anything else that you would like to draw attention to in a special way.

 

 

As you can see, there are quite a few options to stylize a text box (as well as just about everything else). Try it out and let us know which option you prefer.