CSS callouts for your blog

This is a level 2 callout heading

In case you were wondering, this block of text is a callout based on a class in a cascading style sheet.

  • This is an unordered (ul) callout list formatted by the CSS style sheet:
  • To use a numbered list instead, use ol in place of ul list tags.

The callout on the right is produced by the CSS shown below. The textbook definition of a callout is a quotation from the text body displayed in an extracted box, but I’m defying semantics and using it to highlight information peripheral to the main post.

If you’d like to use callouts in your blog (or any web page for that matter) here’s what you need to do.

Track down the location of the style.css or custom.css file in your WordPress theme. Edit the CSS script to change the fonts, colours, text sizes, padding and so on to whatever your heart desires.

The CSS script uses the “width” property to allow the callout to expand and contract proportionally with flexible width themes. It will occupy 33% of the width of the post or page regardless of the size of the browser window. Of course you can change that to 50% or whatever suits your requirement. Mistywindow’s modified Thesis theme has a flexible design with maximum and minimum limits, so if you change the size of your browser window you’ll see how the callout responds.

For the life of me I can’t remember why I found it necessary to put the transparent background tag in the list CSS. Probably an inheritance problem. I’ll have to experiment.

🙂

Place the callout text between tags like these:

<div class="callout">
<h3>heading here if you wish</h3>
<p>Some text here.</p>
</div>

Put the following CSS script, edited to suit your impeccable taste,  into your custom.css file:

/* For (mostly) text callouts. */
.callout {
	width:33%;
	float:right;
	background-color: #c0cfdb;
	margin: 10px 5px 0px 20px;
	border: 1px solid #006;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	font-size:0.85em;
	text-align: left;
}
.callout p {
	margin: 5px 10px;
	}
.callout h1{
	font-size:1.4em;
	}
.callout h2{
	font-size:1.2em;
	}
.callout h3{
	font-size:1.0em;
	}
.callout h1, .callout h2, .callout h3{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#FFF;
	background-color:#506473;
	padding:5px 5px 5px 10px;
	text-align:center;
	}
.callout ul li, .callout ol li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:transparent;
	color: #000;
	font-size:.95em;
	margin: 0px 20px 0px 8px;
	text-align: left;
	}