Journal

Highlighted Textpattern Search

24 November 2005 › 11 comments

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:

• http://sonspring.com/search?q=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.

Discussion + Dissension

1. #1 Wesley Walser

   I have never had Google yellow highlight stuff for me?

2. #2 Yannick

   Wesley: It does (in a sense). ;) When you search for something on google it puts the words you searched for in bold.

   Nathan: Nice tip. The highlight is helpful as it shows up more than just making text bold, which sometimes is a bit hard to notice.

3. #3 Boyink

   Click the “cached” link under the main link to see the yellow/black styling.

4. #4 Yannick

   ahh yes, thanks for that as well Boyink. I completely forgot about that one.

5. #5 Nathan Smith

   Ah yes, I should have clarified. I’ve always been fond of their cached version highlighting. I just wish there was a way to do multiple colors for multiple search terms in Textpattern, the way Google does it.

6. #6 Yannick

   hehe time to put that thinking cap on Nathan.

7. #7 Wesley Walser

   I am sure there is a way to accomplish this, albeit it will probably take a bit of hacking.

8. #8 Nathan Smith

   Wesley: You’re probably right, but it’s not worth hacking up Textpattern just to get additional highlighting effects. :)

9. #9 Justin Perkins

   I’m missing something here, how is the section name of “search” being assigned? I’ve got , but it’s not getting populated with “search” after a search is performed.

10. #10 Justin Perkins

    Nevermind, looks like you just add that section then you create a custom search form where the action is that section. Sweet.

11. #11 Nathan Smith

    Justin: Yep, you’ve just gotta set that up so that the search results have a page in which they can be populated. For examples, see: Godbit TXP code.

Comments closed after 2 weeks.