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.
Related Posts :
Post Tags: call out box , css styles
TinyURL For This Post: http://tinyurl.com/y8pc7eh
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
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
Social comments and analytics for this post…
This post was mentioned on Twitter by BigMortgageMan: Add a Call Out Box to your Posts: I Don’t know what they are actually called.I’m calling them a call out box.Po.. http://bit.ly/4CisBN...
I like the little box. We made one one my site that disappears and reapears with java script.
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.
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.
That’s a neat little thing too spice up a post. Thanks
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?
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
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.
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.
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!