Earlier today I was playing a game of Band of Bugs on Xbox Live Arcade. It’s a fun and addicting game, but there is no shortage of dialogue that you have to “hit A” through before, after, and even during a level. Yet it is possible to scan through the dialogue and still learn what they’re trying to teach you or what you’re supposed to do, because of the way the designers emphasized important words in the speech bubbles. They change the color of the text, and I thought that a slight modification would make an excellent idea for the web. Instead of changing text color, I propose slightly changing the background to emphasize the words more.

Because so many people scan web pages instead of reading them, wouldn’t it be great if all the most important terms or points in an article were highlighted? Yes, I know some websites/blogs already do this. I just wish the idea to get around and see where people go with it. Hit read the rest of this entry if you’d like to see some example markup to make this possible, as well as how to modify the Wordpress Visual Editor to display a background color button.

First we’ll go over the code solution. Add this in your CSS (Cascading Style Sheets) Stylesheet:


.highlightyellow{
    background:#FFFFB7;
}
.highlightblue{
    background:#98B9FF;
}
.highlightgreen{
    background:#A0FFA2;
}
.highlightpink{
    background:#FAAAFF;
}

Customize the colors to your liking (you can also add some padding if you’d like), and then upload your stylesheet to where it was. This is how a paragraph with the phrase “scan me quick” highlighted blue would look like:


<p>You do not ever read this because you scan because there is not enough time so <span class="highlightblue"> scan me quick</span>.</p>

Now for the Wordpress WYSIWYG TinyMCE mod.. If you want a button that controls the background color of selected text, FTP to your server and download the tiny_mce_confg.php file from the yoursite.com/wp-includes/js/tinymce directory. Open it in a text editor and find the line that starts with/looks like this:


$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator',

To add the button after the strikethrough button, simply replace:


'strikethrough',

with:


'strikethrough', 'backcolor',

There you go! You should now have a button in the Visual Editor right after the strikethrough button, for example.

Happy highlighting, and don’t go too crazy with it!