Add a Call Out Box to your Posts

This is a Call Out Box

I Don’t know what they are actually called.
I’m calling them a call out box.
You shape the size by where you
place the returns. If you want the
width fixed add a width
add: width: 250px; to the CSS
or however wide you want the box to be.

Ever wanted a box in which you could put text for emphasis?   You know like you see at the Real Estate Tomato.   Well this isn’t as fancy (though it could be) this will provide you a quick way to include a call out box in a post.

Add the CSS to your style sheet.

.calloutbox {
float: right;
font-size: 16px;
padding:   0 10px 10px 10px;
border: 4px solid #ccc;
margin: 1px 0 10px 10px;
}
.calloutbox h3 {
font-size: 18px;
text-align: center;
}

Add the call out box to a post

Once you have the CSS added and modified to be what you want it is pretty simple to add it to a post.

Type the text you want in the box.   Give it an h3 tag for the header if you want.

Switch to the HTML tab and place it inside a div id=”calloutbox”   with an /div tag at the end of the box.   Save as Draft

It won’t show up   as a call out box in the visual editor as a call out box.

If you haven’t complete writing your post, type below the text in the box to continue the post.   But I would suggest you do at least the first sentence from the HTML tab after you use the /div tag.   Otherwise the visual editor might put your added text inside the call out box.

If you want to see how it will look (I know you do) then Preview the post.   It will appear.

Call Out Box Background

Pretty Cool
No real color added
But still nice Effect
Add SEO Eye Candy
Use a Call Out Box
In Your Posts

Add a background color

background-color: #F5F4F3;

Make it stand out even more with a background color for the box.   By using a call out box you don’t have to put the text in a graphic and loose the SEO benefit.   The text inside the box can be read and the h3 tags get full weight inside the box.

There is no limit to the uses or options for call out boxes.   You can create as many different styles, color and sizes as you want.   And once you have created it you can call that box into any post any time you want.   Get creative and have some fun.

So think outside the box and use a call out box.

Comments

  1. I thought I heard someone calling so I came over. Did you call? 🙂

    Good tutorial on boxes.

    Thanks!
    .-= Kristal Kraft´s last blog ..IKEA Comes to Centennial, Colorado =-.

  2. Thanks for the detail. I will look into it.
    Aloha,
    Keahi
    .-= Keahi Pelayo´s last blog ..Digerati Bell Weather May Ring In A Good Future For Honolulu =-.

  3. pembroke pines locksmith says

    Yah… I wish I could afford another house right now, but it just isn’t in the card… maybe by next summer.

  4. I like the little box. We made one one my site that disappears and reapears with java script.

  5. Mike Harrison says

    I will have to play around with this. I haven’t done much with CSS in wordpress, but I have done some similar “Callout boxes” by creating my own jpeg and placing them in wordpress. This might be a lot easier.

  6. Mike,

    That is the typical way to add a call outbox. But as mentioned in the post. Google can’t read what is in a JPG file, but it can read what is in this style callout box, especially if you use an h2 title tag in the box.

  7. That’s a neat little thing too spice up a post. Thanks

  8. I recently had this same problem, and I decided to write a WordPress plug-in to help (not sure if you’re running WordPress here or not).

    If interested, see:
    http://componentoriented.com/content-management/wordpress/insert-callout/
    or
    http://blog.componentoriented.com/2009/10/callouts-i-need-a-wordpress-plugin/
    .-= D. Lambert´s last blog ..Is your Enterprise too big to fail? =-.

  9. D. Lambert

    Always glad to pass along useful information and tools to the Lab Rats that drop by. It looks interesting. Just might have to take that little plugin for a spin.

    Thanks

    Dave

  10. Thanks for the tip. Another option (although not SEO friendly) would be to create an image with the text. That’s something I have done in the past. I like that options as it allows me to link the button to another page.

  11. Ryan,

    That’s what is typically done using a jpg file with the information inside. That is why using a callout box with a link inside is a better option than an image.

  12. Thanks for the reply Dave. I definitely see the benefits of a “call our box”, but I do like to be able to style and design the box. I guess for me the pros outweigh the cons. I will have to give it a shot sometime though!