Tag Archives: Post

Important New Article! Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

How many times have you wanted to customize just the Home page, or just one page, or only posts? You’ve heard about Conditional Tags but don’t have a clue how to use them!

Well, you will after reading this new article!

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags” provides all you need to know to be a master of Conditional Tags in your custom_functions.php file. Fully illustrated with code examples, it walks you through using Conditional Tags for the Home and Front pages, posts, and pages. It even shows you how to use CSS on selected pages!

This article will surely become one that you come back to again and again to get ideas for your customizations!

It is filed under the “Tips” section in a new grouping called “Code You Can Use.”

New Series! Quickie: How to Find a Page or Post’s Number

A frequent question in the DIYthemes forums is how to find the number of a page or post. It’s really simple, but more or less hidden in the bowels of WordPress!

Quickie: How to Find a Page or Post’s Number” is an illustrated article showing you how to find the number in about 30 seconds! And it takes about 30 seconds to read!

This is the first of an ongoing series called “Quickies.” They will all be gathered in the “Tips” section under the grouping “Tips.”

Tutorial: Customizing Just Your Front Page, Pages or Posts Using Conditional Tags

There are many times when Thesis users want to apply customizations to just one page or post or to only pages or posts. For example:

  • You want a featured post plugin to appear only on the front or Home page.
  • Only posts should have a particular message following them, and only when the full post is displayed.
  • You need to execute some CSS code on a particular page to make the headlines green.

All these examples call for the use of what are called “Conditional Tags.” As the WordPress Codex says of them:

Conditional Tags can be used … to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog.

Conditional Tags are covered fully on a page in the WordPress Codex, which lists Tags for everything from the Home page to author pages.

This article shows you how to use the most common Tags in situations that many people want to use them in.

Basic use of Conditional Tags

Conditional Tags are always used in functions in the custom_functions.php file, and always within if statements.

All of the Conditional Tags covered in this article have the same syntax:

  • The Tag is followed by opening and closing parentheses.
  • If the Tag applies to all pages or posts there is nothing within the parentheses.
  • The condition to be tested is enclosed in quotes within the parentheses if a particular page or post is being called for. Note that the tags testing or the Home or front pages never have parameters.
  • All Conditional Tags evaluate to either “True” or “False.”

For example, the Conditional Tag testing for a page named “Some Page” would look like this: is_page('Some Page'). If it were simply testing that the document is a page rather than a post, it would be written: is_page()

The most commonly used Conditional Tags

The WordPress Codex article has Tags for everything you can imagine, but I find myself using the same ones over and over. They are:

  • is_home() tests whether the document being displayed is the Home page of a blog.
  • is_front_page() tests for the front page of either a blog or a static site, as set on the “Settings > Reading” admin panel. I tend to use this much more than the is_home() Tag since it covers both blogs and static sites.
  • is_page() determines whether the document on the screen is a page or a post. When used with a parameter, it can test for specific pages.
  • is_single() is used when you want to tell whether the document being displayed is a single post. A parameter within the parentheses enables it to test for a particular post.

Tags for the front or Home page

There are many instances when you only want something to appear on the front or Home page of your site. Using the is_front_page() Conditional Tag allows you to do this. As mentioned, I use this Tag in preference to the is_home() Tag, since is_home() tests only for the Home page of a blog, and is_front_page() tests for the front page of either a blog or a static site. I’m lazy!

Note that is_front_page() and is_home() do not take any parameters. Their opening and closing parentheses are always empty!

Say you are using a featured post plugin that you only want displayed on the front page. Following is how you would do it:

function test_for_front_page() {
if (is_front_page()) {
...code for the plugin...
}
}

You can also use this model for anything that you only want to appear on the front page, such as boxes placed above the sidebars, and even swapping headers (more on putting CSS into a function is found below).

The is_single() Tag for posts

The Tag is_single() is used for posts when they are displayed on a single page, as when you click on a blog post’s title on the front page of your blog and it goes to the post’s page.

Instances for the use of this Tag would be:

  • When you want a special message to be displayed at the end of all posts when displayed on their own page.
  • If you want a particular ad to be displayed only on post pages
  • A warning box should be displayed only on one post

Note: Although there is an is_page() Tag for pages (described below), there is no is_post() Tag! Always use is_single() for posts.

Testing for all posts

If you want all posts (and not pages) to have a particular item, use the is_single() Tag without any parameters within the parentheses. The following example would execute its code for all posts:

function test_for_posts() {
if (is_single()) {
...code for all posts...
}
}

Testing for a single post

To test for a certain post, you must put parameters within the parentheses between single quotation marks. Most of the time, I use either the post name or the post’s number (there are other parameters — check the WordPress Codex article for more).

I usually use the post name in the parameter and only use the post number when some character or word in the title causes PHP to complain. (If you don’t know how to find the post number, check out the “Quickie: How to Find a Page or Post’s Number” article.) For example:

function test_for_post() {
if (is_single('Some Post')) {
...code only for this post...
}
}

or if using the post number…

function test_for_post() {
if (is_single('234')) {
...code only for this post...
}
}

Note that when using post names, the name must be exact, with all the capitals, punctuation, etc!

If you want to be absolutely sure that a post is found, you can test for both the name and number by using the PHP “and” logical operator &&. It returns “True” if both the name of the post is “Some Post” and the post number is “234:”

function test_for_post() {
if (is_single('Some Post') && is_single('234')) {
...code only for this post...
}
}

You can also use the array parameter to test for a single post. The following example returns “True” if either the post name is “Some Post” or the post number is “234.” Note that the array parameter has parentheses of its own, and the post number is not put within single quotation marks:

function test_for_post() {
if (is_single(array(234,'Some Post'))) {
...code only for this post...
}
}

When using the array parameter be careful about your parentheses. In the example above you have one pair of parentheses for the if statement, one for the is_single() Tag and another for the array parameter, which means you end up with three closing parentheses at the end of the statement.

Testing for multiple posts

You can also use these methods to test for multiple posts. Say you want to want to display an ad on either of two posts. You would use the PHP logical operator || which means “or.” The following is_single() Tag would evaluate “true” if the post is either named “First Post” or is number “789:”

function test_for_post() {
if (is_single('First Post') || is_single('789')) {
...code for either post...
}
}

Once again, you can use the array parameter, this time for multiple posts. In the following example, we are testing for posts named “First Post,” “Second Post,” and “Third Post.” If the post being tested has any of these names it returns “True.” Note that the post names are enclosed within single quotation marks, and have a comma but no spaces between them:

function test_for_post() {
if (is_single(array('First Post','Second Post','Third Post'))) {
...code for any of these posts...
}
}

The is_page() Tag for pages

The is_page() Tag is used for pages (not posts). Its parameter syntax and uses are the same as for posts, so they will only be mentioned here:

  • Use the is_page() Tag without anything within the parentheses to test for all pages.
  • To test for a single page, you can use the page name within the Tag’s parameters, for example: is_page('Some Page')
  • You can also use the page number to test for a single page: is_page('234')
  • The syntax is the same for testing for multiple posts as for pages, except you use the is_page() Tag instead of the is_single() tag.

This example tests that the document is a page and not something else:

function test_for_any_page() {
if (is_page()) {
...code for all pages...
}
}

The following example tests for a page named “Some Page” and with the page number “234:”

function test_for_page() {
if (is_page('Some Page') && is_single('234')) {
...code only for this page...
}
}

And this example will evaluate as true if any of the pages have one of the names listed:

function test_for_pages() {
if (is_page(array('First Page','Second Page','Third Page'))) {
...code for any of these pages...
}
}

Executing CSS on pages or posts

In the article “Quickie: Executing CSS in custom_functions.php” I show you how to execute CSS within the PHP of your custom_functions.php file. Here is how to do it for just one post using one of the examples above — I’m sure you can figure out how to use it in the other instances covered above:

function test_for_post() {
if (is_single('Some Post')) {
?>
<style type="text/css">
.custom #some_id { background: #000000; }
.custom .some_class { position: relative; }
</style>
<?php
}
}

Conclusion

I hope this article is useful to you and that it will enable you to do things in custom_functions.php that you weren’t able to do before. As always, your comments are welcome. If you want to contact me directly by email, you may click on the “Contact” tab in the menu.

©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!

Quickie: How to Find a Page or Post’s Number

It is often necessary to know the number of a page or post you have saved. How do you find it?

Finding the page or post number
Finding the page or post number

Here’s how to do it:

  • Go to the “Edit” screen for pages or posts
  • Find the page or post in the list
  • Hover your cursor over the name
  • Look in the status bar at the bottom of your browser screen
  • The page or post number will be displayed there

That’s it!

I hope this quickie is of help to you. As always, you are welcome to leave a comment below. If you want to contact me directly by email, just click on the “Contact” menu tab.

©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!

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.

Make Your Pullquotes More Attractive

What’s a pullquote? You’ve seen it often in magazines and newspapers. It’s a few words set apart from the rest of the text that summarizes or comments on the paragraph. It’s usually in larger or distinct letters. The following paragraph has a pullquote:

Greeking is a printer’s term used since the 1500’s

Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonnumy nibh euismod tempor incidunt ut labore et dolore magna ali quarn erat volupat. Ut wisi enim ad minim venian, quis nostrud exerci tation ullamcorper suscipit laboris nisl ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolore in henderit in vulputate velit esse consequat.

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.

This article contains these sections:

  • A short piece of code that will make your pullquotes more attractive
  • How to put pullquotes into your post
  • Seven tips on how to use pullquotes effectively

Thesis has built-in pullquotes

Thesis has pullquotes built in, but they are plain and need dressing up a bit. Following is a simple bit of code that will make your pullquotes more distinctive, with a double bar above and below. The pullquote above shows you how it looks.

All you have to do is to put the following code into your custom.css file. You may change the properties if you wish, but I’ve found this combination to be attractive:

/* pullquotes with double bar above and below */
.custom blockquote.left, .custom blockquote.right {
   width: 200px;
   margin: 5px 15px 5px 0;
   padding: 5px 0;
   border: 3px double #AAAAAA;
   border-width: 3px 0;
   font-size: 1.4em;
   text-align: center;
}
.custom blockquote.left { float: left; }
.custom blockquote.right { float: right; }

How to use the pullquotes

When editing your post in WordPress’ editor:

1. Go over to the HTML editor by clicking on the HTML tab at the top of the editor screen.

2. Find the pullquote text.

3. If you want to have the pullquote on the right of the paragraph, wrap it in the the following code:

<blockquote class="right">PULLQUOTE-TEXT</blockquote>

4. If you want to have the pullquote on the left of the paragraph, wrap it in the the following code:

<blockquote class="left">PULLQUOTE-TEXT</blockquote>

That’s it!

Tips on using pullquotes

1. Don’t use too many pullquotes. They should call attention to the main idea in a section of text, not every paragraph. If you use too many, your page will look cluttered.

2. Alternate left and right pullquotes. This is not absolutely necessary, but looks nicer.

3. Choose the appropriate snippets for pullquotes. One role of pullquotes is to not only quote the text but to use text that pulls the reader into the text. Select dramatic, thought-provoking, or enticing excerpts to use as pullquotes.

4. Keep pullquotes brief and to the point. Make the pullquote a quick bite of information, a teaser. Don’t give away too much of the story in the pullquote. Include only single thought or theme in each pullquote.

5. Keep pullquotes short. Keep the length of pull-quotes to 2 or 3 lines. Make sure the paragraph you’re pullquoting is long enough so that the pullquote doesn’t hang over into the next paragraph.

6. Add the pullquote text after you have finished writing the post. Identify the sections in your posts, and use a pullquote to call attention to the section.

7. Write the pullquote right at the beginning of the paragraph, letting it run into the beginning of the paragraph text. It looks a mess, but the WordPress editor won’t place it right unless you do. It should look like this:

Greeking is a printer's term used since the 1500'sLorem ipsum dolor sit amet, con sectetuer...

I hope this article has been of use to you. Please feel free to write a comment, or to email me using the “Contact” tab at the top of the page.

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!