Highlighted Textpattern search

Happy Thanksgiving everyone! I'm sure that you've no doubt stuffed yourself silly with Turkey and pumpkin pie, assuming you're in the states and you celebrate this holiday. For those of you not in a Tryptophan enduced comatose state, I figured I would share with you a brief Textpattern CSS tutorial that could easily be applied to any other blogging system.

I was doing a Google search the other day, and as usual, the text I had typed in was highlighted for me, to make it easy to see where it appeared in the context of the search results. I thought to myself, "That would be a cool thing to do on my own site." If you're familiar with Textpattern, you know that by default, it puts strong tags around the search term, to make it stand out for the reader.

I decided to change this so that the search looked more like Google, with a yellow highlight and black text. It's really quite simple. For my navigation system, I already am placing a class inside the body, corresponding to the section of the site you're on. For instance, on this section, it looks like this: body class="journal" but in the Textpattern templating system, it looks like: body class="<txp:s />". So, I added a little snippet of CSS to change the way that the strong tag appears, only on the search section:

body.search #content strong {
background: #ff3;
color: #000;
font-weight: normal;

That essentially tells the browser: "If you're on the search section, style everything with a strong tag inside the #content area to look like this." To see an example of how this looks, check out the results for the word Textpattern:


There's really no reason this has to be Textpattern specific though. Khaled has done the same type of thing (in pink) on his WordPress site Broken Kode, using a span class named "hilite." So, it's really just a matter of preference how to style results, and the method is somewhat dependent on your CMS, but it's a nice gesture to show site visitors that you're thinking of them.