When I’m searching the web or following other peoples blogs, I’m always looking for clever tricks to make my blog more interesting. One that I saw this week was a blog that had portions highlighted.
Its easy to highlight your blog. Simply switch to text mode and add some div tags that set the background color. This group of paragraphs for example is wrapped in:
<div style=”background-color: #ffffc0; padding: 20px;”>
. . . [paragraph text here ] . . .
<div>
The color tags set the background color and the padding pushes the text in a bit with the colored section.
While you can add this kind of formatting for any section of a blog, the color will be fixed for that particular post and can’t be changed easily when you update your site. So consider adding a few highlighting styles that you can either edit into your theme’s CSS file, or, depending on your theme, there may be a place where you can globally add items within the head.
Then, add some style code like the following (the style tags won’t be necessary if you edit it into your theme’s CSS file):
<style>
imhq-highlight-one { background-color: #ffffc0; padding: 20px;}
</style>
Later you can color sections of your post by adding div tags choosing one of the highlights you have added into your CSS by wrapping your text with the following tags.
<div class=”imhq-highlight-one”> . . . [paragraph text here ] . . . <div>
Adding colored boxes around certain portions of your text will make your blog easier to read and more attractive. If you later change your theme or theme colors, you can also globally change the highlighting colors by changing these few bits of CSS.
When using this technique, it’s most valuable to highlight something that needs to be called out. For example, if you wanted to put a series of definitions that didn’t belong in the main text, using a highlighted box would separate them from the text.
Leave a Reply