DIY InfoBoxes – Simple And Consistent

Sometimes you want a message or paragraph in your blog to stand out. Here’s a simple method how to do that easily and consistently throughout your blog.

All you need is a couple of simple CSS clauses in your style.css or my.css file:

.box {
	border: 1px solid #ccc;
	padding: 5px !important;
	-moz-border-radius: .75em; -webkit-border-radius: .75em;
}
div.box {
	margin-bottom: 1em;
}

.smoky {
	background-color: whitesmoke;
}
.pale {
	background-color: #fcfcfc;
}
.reddish {
	background-color: navajowhite;
}

Note that there are two types of definitions: the primary “box” clause, and a series of additional clauses that specify background colors. That way you can neatly combine them into “pale box”, “smoky box”, or “reddish box”.

Now you need to apply one or more of the above CSS classes to a paragraph, using the HTML attribute “class”. Here’s a demo:

Lorem ipsum vix ut porro nominati, ut cum natum dicta democritum. Impedit facilisi legendos ne qui, dicam menandri pri in. Nonumy assentior percipitur no mea, in nam vero cibo commodo. Ne aliquam insolens convenire mea, ad vocent consetetur honestatis mea, malorum percipitur comprehensam sit ea. Ne dicat erant mnesarchum his, ad iudicabit adipiscing ullamcorper cum.

Usually, you cannot modify HTML attributes in visual mode (unless you have installed a plugin such as TinyMCE Advanced), so you need to switch to HTML mode. But before, you need to make sure the paragraph tag is displayed in HTML mode at all. WordPress hides paragraph tags for paragraphs with standard paragraph formatting. Hence, you need to give the paragraph a non-default formatting, for example by making it explicitly left-aligned.

Step 1: Use the formatting toolbar in visual mode to left-align the paragraph.

Step 2: Switch to HTML mode, and locate the paragraph.

Step 3: Replace <p style="text-align:left"> with <p class="pale box"> or <p class="smoky box"> or <p class="reddish box">.

You may as well use other naming. Instead of “pale”, “smoky” and “reddish” you may prefer “info”, “warning” and “alert”, for example.

In some situations, you’ll use a DIV instead of a P tag (for example, in your sidebar). But the principle is the same.

1 Comment

• 
  Patrick (HKG) April 14, 2009 at 3:44 pm

  I applied the CSS codes by using myCSS plug-in, it works with my blog. I see it!

  Furthermore, I made some changes on the running CSS codes with different class name and parameters, to practise the CSS programming, and to get touch and feel of CSS.

  Thanks again!