Tag Archives: Highlight Box

Four New Articles on Dressing Up Your Posts and Pages!

Let’s face it: The internet reader’s attention is hard to grab. They scan the page and if they don’t see something interesting they are gone, all in 10 to 15 seconds. How do you get the reader to look at your post or page and read past the first couple of sentences?

One key way is to make your article attractive to the eye — it pulls the reader in and keeps her reading.

Today I have put up 4 new posts on different aspects of dressing up your posts and pages. All are located under the “Tips” category “Posts & Pages:”

Dressing Up Your Posts and Pages” is the main article in the group and shows you how to really make your article pop on the page. It has sections on the following subjects essential to an attractive-looking post or page:

  • Drop caps
  • Images
  • Screenshot and code illustrations in your posts and pages
  • Adding section titles
  • Adding pullquotes
  • Using callout or highlight boxes
  • Software helpers

Make Your Pullquotes More Attractive” shows you in detail how, why and when to use pullquotes. It includes code to enhance the way your pullquotes look, how to put pullquotes into your text, and 7 tips on how to use pullquotes.

Many times you might want to use code in your post or page, or you might have a text snippet that you want users to copy. “Using the code and pre Tags for Code and to Highlight Text” gives you what you need to do this quickly and easily. It has code to put into your custom.css to make your use of the “code” and “pre” tags more legible and attractive, and shows you how to use these tags in the WordPress editor.

Finally, “Finding Legal Images for Your Posts” gives you a great deal of information on how to find free and legal images for your posts and pages. There is a list of great sites on the internet where you can find images, and it provides guidelines for understanding copyright, conditional use, Creative Commons, and fair use.

Armed with these 4 articles, you can your posts and pages more visually appealing, enhance your readers’ experience, and keep your readers coming back for more!

Dressing Up Your Posts and Pages

steve-jobs-dress-up-smDo your posts look bland and uninteresting? Do your readers look beyond the first paragraph? Can they scan your post and get the main ideas?

If not, you are losing readers. The experts say that if you don’t catch the reader’s eye with 10-15 seconds, you have lost them.

There are many things you can do to get readers interested enough in your post to read past the headline and the first couple of sentences. And let’s face it, readers on the internet scan as much as they read — unlike their reading habits in print publications. Think riffling through a magazine in a waiting room.

One of the most effective ways you can grab the reader’s attention is with an attractive post with images, drop caps, section titles, highlight or call-out boxes, and pullquotes.

Thesis provides several ways to make your posts more attractive, and this article shows you several more. The section headings are:

  • Drop caps
  • Images
  • Screenshot and code illustrations in your posts and pages
  • Adding section titles
  • Adding pullquotes
  • Using callout or highlight boxes
  • Software helpers

Note that most of these enhancements will use the HTML editor. If you need more information on how to use it, take a look at the “How and When to Use the WordPress HTML Editor” article.

Drop Caps

A drop cap is the big first letter of an article, like appears at the beginning of this one. It introduces the article in a big way and looks classy.

Drop caps are easy to do.

1. In the HTML editor find the first word of your post.

2. Put the following code around the first letter of the first word. Replace the words “FIRST-LETTER-HERE” with the letter:

	<span class="drop_cap">FIRST-LETTER-HERE</span>

Images

An image at the beginning of the post catches the reader’s eye and draws them into the post. Of course, the image should have something to do with the post.

The article “Finding Legal Images for Your Posts” has advice and many sources for getting just the right image for your post. Copyright is an important consideration in using images you find on the internet, and the article also explains the difference between copyright-restricted, copyright-limited and fair use of images.

Resizing the image

I like to resize the image prior to uploading it, even though WordPress will resize it for you. If you want the words to wrap around an image when placed to the right or left, it needs to be 220-250 pixels wide, depending on the width of your content column. If the image is to be centered, it needs to be no larger than the column width you set in Thesis Design Options.

If you do not have a graphics program that can resize images — and even the simplest ones can — there are lots of free programs available for download. GIMP is an excellent program availabe for several operating systems, but it’s a little like using a cannon to blast a flea!

Inserting the image into your post

This action may be done in either the visual or HTML editor:

1. Place your cursor where you want the image to be inserted.
2. Click on the leftmost icon in the “Upload/Insert” line above the editing window.
3. Find the image on your computer and upload it.
4. If you wish, write a caption to be displayed below the image.
5. If you have resized the image, click on “full-size.” If you have not resized it, click on the size that’s closest to 220-250 pixels wide if you want the text to wrap around the image, or a size smaller than your column width if not.
6. Click on right, left or center placement, then on the insert button.

Putting a frame around the image

If you have put a caption on the image, skip this step, since a frame will automatically be added.
1. In the HTML editor, find the code for the image.
2. Find the alignment word in the code — it will be “alignleft,” “aligncenter” or “alignright”
3. Right after the alignment word, type in the word “frame” with spaces before and after the word. It will look like this:

	alignleft frame 

Screenshot and code illustrations in your posts and pages

“A picture is worth a thousand words” — that old saying is nowhere more true than in your posts. If you are talking about a subject, especially a technical subject, it is very helpful to the reader to show them what you are writing about.

There are two main ways to use illustrations: screenshots and code excerpts.

For screenshots, most operating systems have a way to take pictures of the full screen. Mac OS X and Windows Vista can even take pictures of selected parts of the screen. If you prefer a software program with greater control, SnapNDrag for Mac and Screenshot Captor for Windows are both highly rated, free and offer many more controls than do the operating systems’ built-in abilities. Screenshots definitely need to be edited and resized before uploading them.

Code excerpts make use of the built-in capabilities of Thesis. The article “Using the code and pre Tags for Code and to Highlight Text” shows you how.

Adding section titles

This can also be done in either the visual or the HTML editor.

In the HTML editor

1. Write a section title on a new line above the paragraph it titles.
2. Surround the section title with <h3> tags, like so:

	<h3>Processed foods and your digestive system</h3>

In the visual editor

1. Write a section title on a new line above the paragraph it titles.
2. Highlight the section title.
3. From the “paragraph” pulldown at the top left of the editor screen, select “Heading 3”

Adding pullquotes

Pullquotes draw your reader into the text

The purpose of a pullquote (also known as a “lift-out quote” or “call-out”) is to lead readers into the post and to highlight a key topic. They also dress up your post and make it more visually appealing. The article “Make Your Pullquotes More Attractive” contains a thorough discussion of how to use pullquotes effectively.

Using callout or highlight boxes

You can emphasize text within your post or page with highlight or callout boxes. These are colored boxes that surround the text. The article “In-Post or -Page Highlight Boxes” gives you the code needed and shows you how to use them.

Software helpers

I use a Mac for most of my work, and I have found a program that has saved me more time and frustration than I can adequately describe. It is called BlogAssist from Dejal. It is a configurable utility that resides in the menu bar that will take whatever is in your clipboard and wrap it in anything that you want. I use it for HTML code and Forum code mostly. For example, for dropcaps all I have to do is copy the first letter of the word, find “Drop Caps” in BlogAssist, then paste it in my text. Bingo! The letter is wrapped in the proper HTML code for dropcaps.

My search for a comparable Windows program has not yielded any results yet. There are plenty of clipboard utilities, but none that do what BlogAssist does. If you know of such a program, please share it with us!

I hope you have found this article interesting and helpful. Remember that you are welcome to write a comment. You can also email me using the “Contact” button in the menu at the top of the page.

Using the code and pre Tags for Code and to Highlight Text

Thesis provides two ways to display code in your posts and articles. Each sets the code apart in a different way. The “pre” tag is used for longer pieces of code, and will scroll to the right if it is wider than your column width. The “code” tag is intended for shorter bits of code that are inserted inline into the text of your post. It will not scroll if your code is longer than the screen width.

But their use is not limited to code; you can use them to highlight any kind of text you want. For instance, if you have a text excerpt that might be copied by the user, you can use the “pre” tag for it.

This article gives you a simple enhancement of the “code” and “pre” tag styling for your custom.css file, and shows you how to use the tags in the editor.

Adding styling to “code” and “pre” in custom.css

The stylings in style.css for “pre” and “code” both are pretty stark, and do not make the code font a monospace, making it hard to read. Following is the styling I use for the examples in this article. Just insert them into your custom.css file. Feel free to modify them to suit you:

/* PRE TAG STYLING FOR CODE INSERTS INTO PAGES AND POSTS */
.custom pre {
	font-size: 1.5 em; 
	font-family: Courier, "Courier New", mono;
 	color: #000000; 
	margin: 10px; 
	padding:10px;
	border: solid 1px #FFCF81;
	background: #F8FFC0;
}

/* CODE TAG STYLING FOR CODE INSERTS INTO PAGES AND POSTS */
.custom code {
	font-size:1em; 
 	line-height: 1em; 
	font-family: Courier, "Courier New", mono;
 	color: #000000;
 	background: #EEEEEE;
}

How to use “code” and “pre” tags

You will use the HTML editor to insert the proper code for each.

Using the “code” tag

As mentioned, the “code” tag is intended for inserting code inline into a sentence. For example, this bit of code: font-size: 1em uses the “code” tag. Here’s how you do it:
1. Find the code to be highlighted in the sentence.
2. Wrap the code in "<code>" and "</code>" tags like this:

<code>font-size: 1em</code>

Using the “pre” tag

The “pre” tag is used for longer pieces of code and will scroll if it is longer than the width of the column. To use the “pre” tag:
1. Find the code to be highlighted.
2. Wrap the code in "<pre>" and "</pre>" tags like this. Note the very long line causes the scroll bar to appear:


<pre>
.custom blockquote.left {
   width: 200px;
   margin: 5px 15px 5px 0;
   padding: 5px 0;
   border: 3px double #aaa;
   border-width: 3px 0;
   font-size: 1.4em;
   text-align: center;
   float: left;
}
.custom blockquote.right { width: 200px; margin: 5px 0 5px 15px; padding: 5px 0; border: 3px double #aaa; border-width: 3px 0; font-size: 1.4em; text-align: center; float: right; }
</pre>

I hope this short article has been helpful to you. Remember that your comments are always welcome, and that you can contact me directly by clicking on the “Contact” button in the menu.

New Articles About In-Page or -Post Highlight Boxes and the WordPress HTML Editor

Often you want to highlight a block of text in your post or page. Thesis provides two highlight boxes, Note and Alert, that can surround a single paragraph. The article “In-Post or -Page Highlight Boxes” shows you how to make your own colored highlight boxes that can not only highlight any amount of text you want, but can change the attributes of the text within it. Oh yes, it does show you how to use the Thesis boxes, too. This article is filed under the Tips > Posts & pages section.

Most of us start off using the WordPress visual editor. It’s reasonably WYSIWYG, and you never have to remember those codes to make things bold and stuff. Then comes the day when we have to use the HTML editor! Panic! A new article, “How and When to Use the WordPress HTML Editor,” tells you when and how to use the HTML editor, just as the title promises. No more mysteries! This is the first article in the Newbies > General Information section.

I have so many ideas for new articles, and so many half-written ones, that I don’t know what I’ll be offering you next. Let it be a surprise!

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:

This is an example of the highlight_box_cream class highlight box.

It can cover multiple paragraphs and line breaks.

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:

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.

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.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!