In-Post or -Page Highlight Boxes

In some posts or pages you may want to highlight certain text by placing it within a colored box. Thesis provides a way to do this with its Note and Alert boxes. But what if you want your own colors, font styling, and borders? This guide will show you how to create and use in-post or -page highlight boxes. They are easy to implement and a great enhancement to your content!

There is only one prerequisite for this tutorial: You must know how to get to the WordPress HTML editor. If you are uncertain, see the article “How and When to Use the WordPress HTML Editor.”

How to use the Thesis Note and Alert boxes

Thesis has two highlight boxes built in, the Note and the Alert boxes. The Note box has a very light beige background, and the Alert box has a light yellow background. They are intended for highlight only one paragraph, so if you have multiple paragraphs or line breaks in your text, these are not for you.

Implementing the Note and Alert boxes is easy. Go to the HTML editor and find the text to be highlighted by a box. For the Note box, surround the the text with paragraph tags and the “note” class, as in this example:

<p class="note">This is text surrounded by the Note box.</p>

And this is how the same text looks in the Note box:

This is text surrounded by the Note box.

Using the Alert box is similar: surround the text with paragraph tags and the “alert” class, thusly:

<p class="alert">This is text surrounded by the Alert box.</p>

The same text displayed in the Alert box:

This is text surrounded by the Alert box.

How to create your own highlight boxes

But what if you want some color besides beige or light yellow, or you need to have more than one paragraph highlighted? Well, create your own highlight box!

Put the following into your custom.css file. It will create a highlight box with a cream background and a thin brown border that harmonizes with the Thesis Theme Tools color scheme. Of course, you will want to change the colors to suit your own color scheme:

/* HIGHLIGHT BOX - CREAM */
.format_text .highlight_box_cream {
	/* distance from borders to content*/
	padding: 0 1em 0 1em;
	/* spacing outside of box*/
	margin: 0 0 0 0;
	/* background color */
	background: #FEFD80;
	/* border size style color */
	border: 1px solid #B28F00;
}

Now let’s put this box into action. Go to the HTML editor and find the text to be highlighted. Surround the text with a div and the class “highlight_box_cream” like this:

<div class="highlight_box_cream">This is an example of the highlight_box_cream class highlight box.

It can cover multiple paragraphs and line breaks.</div>

Now let’s see how it looks:

Expanding the capabilities of the highlight boxes

The highlight boxes are not just limited to a colored border and background, they can have their own font characteristics and other features, too. For now, let’s confine ourselves to changing the font attributes in the box.

Put the following into your custom.css file. Note that it is the same as the highlight_box_cream class definition above, but it adds fonts to the mix. The font will be Georgia, a bit smaller than normal type, and will be in small caps. I have left other properties set to normal to keep the appearance from being too bizarre:

/* HIGHLIGHT BOX - CREAM WITH FONTS */
.format_text .highlight_box_cream_fonts {
	/* font size */
	font-size: .9em;
	/* font family */
	font-family: Georgia,"Times New Roman",serif ;
	/* font style: normal, italic etc */
	font-style: normal;
	/* font variant: small caps etc */
	font-variant: small-caps;
	/* font weight: bold etc */
	font-weight: normal;
	/* distance from borders to content*/
	padding: 0 1em 0 1em;
	/* spacing outside of box*/
	margin: 0 0 0 0;
	/* background color */
	background: #FEFD80;
	/* border size style color */
	border: 1px solid #B28F00;
}

Once again, we’ll enter the HTML editor, find the text, and surround it with a div. But this time the class will be “highlight_box_cream_fonts.”

<div class"highlight_box_cream_fonts">This is an example of the highlight_box_cream_fonts class highlight box.

Note that it is in Georgia font that is slightly smaller than normal, and uses the font variant small caps.</div>

And here is how it looks:

The bottom line

There are several other things you can do to the highlight boxes. You can add an image for a background. You can even eliminate the borders and background and use it to alter text in your post or page. The principles of usage are the same, whatever you do with it.

I hope this tutorial has been useful to you. Remember that your comments are always welcome, and that you can email me directly using the “Contact” button in the button bar.

©2009 Michael L Nichols. All rights reserved.

• New Articles About In-Page or -Post Highlight Boxes and the WordPress HTML Editor (1)
• Four New Articles on Dressing Up Your Posts and Pages! (0)
• Dressing Up Your Posts and Pages (1)
• Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags (1)
• Quickie: How to Find a Page or Post’s Number (1)

Tagged as: Highlight Box, Page, Post