Tag Archives: Code

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>


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:

.custom pre {
	font-size: 1.5 em; 
	font-family: Courier, "Courier New", mono;
 	color: #000000; 
	margin: 10px; 
	border: solid 1px #FFCF81;
	background: #F8FFC0;

.custom code {
 	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:

.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; }

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.