How to Create an Eye-Catching Call Out For Your Blog

15 Oct

What’s a Call Out?

It’s this snazzy little box that calls attention to critical information in your post.

A Call Out is a special portion of information that you want to call a visitors attention to. A call out box, with a background image, is the version I prefer. It has the look of a well designed picture, but it’s all text inside a nicely formatted css box. After receiving my third “how did you do that?” request in less than 2 weeks, I decided to create a post for those who are interested.

There are different ways you could achieve this design but I use the h4 header tag as a starting point. This allows for a dual design purpose. If I call the callout class, it wraps the text in the above box and expands as needed to fit any amount of text. If I decide to not call the class and still use the h4 tag, I can give the call out this look:

Here’s an example of using the h4 tag without calling the class.

To call the class (the “picture-framed” look), I simply use this html code:

<div class="callout"><h4><b>Title Here</b><br /><br />Description Here.</h4></div>

And to use the h4 tag call out as a unique looking horizontal header, it’s as easy as this:

<h4><b>Your Text Here</b></h4>

Obviously, I could do the bolding in the css file, but since I tend to switch back and forth on using bold, I choose to do it on the fly.

Getting back to the css box, it is composed entirely of css elements and 1 background picture. You’ll need to create a transparent gif or png to use as your background image, so that the background color can properly fill the space around the image. Here’s the image I created and use. I take the opacity down to less than 50% for this css trick, but play with it and make it your own. I use the h4 on my blog since many of the default titles are in h3. I use h3 for the call out box on the main page of this website, as it’s not built with WordPress. One last little helpful hint.. If you don’t have PhotoShop on your computer, there’s a great online editor I use that’s completely free at pixlr.com.

Ok.. so here’s the css code. Simply copy and paste the following into your custom css file, upload your image and use the h4 tag (as described above) in your post.

h4 {
background-color:#f0dea5;
background-image:url("http://web-design101.com/createawebsite/images/apple101.png");
background-position:left top;
background-repeat:no-repeat;
border-bottom:1px solid #484E02;
border-top:1px solid #484E02;
color:#000000;
font-size:12px;
font-weight: bolder;
line-height:150%;
padding:15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.callout {
background-color:#f3f0dc;
border-color:#000000;
border-style:none solid solid none;
border-width:1px 1px 3px;
float:right;
font-size:9px;
font-weight:bolder;
line-height:140%;
margin:10px 15px 10px 10px;
padding:10px;
width:150px;
}

Please let me know if you decide to use this, as I would love to visit your site and take a look. The design options are almost limitless so I’m sure the looks will vary greatly.

I would be very interested in knowing what you think about the CSS Call Out Box?

Amy

Amy

Amy Kastner is a Web-Designer who is passionate about design and helping others.
You can usually find her on twitter.

Amy

@

Couldn't fetch latest tweet.

Amy

Amy

Latest posts by Amy (see all)

No related posts.

3 Masterfully Constructed Opinions - Add Yours to “How to Create an Eye-Catching Call Out For Your Blog”

Login below to comment or reply.
  1. RobertT October 21, 2010 at 4:48 pm #

    Amy,
    This was a wonderful article. Thank you very much! I implemented it in no time and I still don’t even understand css!! LOL. That’s on my list though. Very well written instructions and you have made my blog look much more appealing!

    I have subscribed and would love to see more css tricks in the future!

  2. Amy October 23, 2010 at 2:58 pm #

    Hi Robert. You are very welcome!

    Don’t hesistate to jump in and learn css. When you’re new, it seems daunting but it really is a simple language and it just provides you with no end to designing your site as you desire.

    By the way, I would love to see your site should you decide to leave the name sometime!

    Have a Blessed Day!

  3. Darlene Shelton September 11, 2012 at 5:23 pm #

    That’s awesome, Amy. Thanks for the code. Love the look now I’ll see if I can change the image and feel up for my own site.