Monthly Archive for February, 2006

As you may notice if you have visited this site before, my header looks alot different than it used to. Thanks to Kristin and here series of ‘Diving Into K2′ posts I was able to figure most of it out pretty easily. One thing I wanted to do was change around the Live Search results a bit, which I couldn’t find covered anywhere. I did some digging, some FUBARing, and eventually I figured it out. Here is what I learned for the masses. All of this is based off the assumption that you be using a K2 custom style. Explaining how these work is beyond the scope of this article and has been documented in other places.

The first thing I did was resize the #LSResult div so that it fit to my new search bar length. My search bar was 220 pixels wide. I found that I needed to set the #LSResult div to 2 pixels larger, you may have different results but this is the code I used in my custom style.

Next we need to change the styling of the rows to fit with the new size. The live search page uses a background image for the header row, each result row, and each hilighted row located in the /wp-content/themes/k2/images/ directory called livesearchbgdark.jpg, livesearchbg.jpg, and livesearchbghilight.jpg respectively. In order to get these to display right you will have to edit the images. I am no artist or Photo Shop efficianado by any means, so take these directions with a grain of salt. For each image you will want to …

1. Open the image in <insert favorite image manipulation program here> … I used Photo Shop, directions might vary if you use something else.
2. Use the ‘Rectangular Marquee Tool (M)’ to select the left half of the image
3. Copy that selection(Edit->Copy)
4. Create a new image(File->New) … it should automatically insert the height for you, and the width will be whatever the width of your new search bar is plus 2
5. Paste your selection into the new image
6. Use the ‘Move Tool (V)’ and move the selection so that the top left corner of the selection is flush with the top left corner of the image
7. Go back to the original image and use the ‘Rectangular Marquee Tool (M)’ to select the right half of the image
8. Copy that selection
9. Go back to your new image that you created and paste the selection into the new image
10. use the ‘Move Tool (V)’ to move that selection so that the top right corner of the selection is flush with the top right corner of the new image

*note – If your new search box is smaller than the original you should have an image that looks just like the original except smaller, if your image is larger, continue with these steps

11. Go back to the original image and copy a portion of the center of the image
12. Go to the new image and paste this selection in
13. Use the ‘Move Tool (V)’ to move this selection so that it covers the empty space. You can copy in as many time as you need to cover the empty space

You should now have an image that looks just like the original Live Search image except it is the size of your new search box. Save and upload the images in a directory within the ‘styles’ directory and add your CSS accordingly. Here is mine …

Again, I am no graphic artist, and really had no choice but to modify the originals to fit. Feel free to create your own background images if you have the skill.

The next thing I wanted to do was to change the number of comments to be more obvious. The following CSS code did that for me …

You may need to mess around with the font-size and the top settings to get it to look right for your site, but that is what looks best for mine.

Then there is this nifty little bug(feature?) that whenever you use the keyboard to select an entry and then mouse over the results div, the entry you hilighted looses it’s padding and expands it’s width. I didn’t like this so I fixed it …

The last thing I wanted to do was change the styling of the searchbox itself. I decided to remove the border on it entirely so it is part of the background instead of popping out or sinking in. I used this CSS code to modify the input box …

There is one pesky little problem I have found with this though … Safari doesn’t like your idea of how an text input should look, and decides to add some styling to it anyways. It kind of makes the results box not fit as well and just generally annoy’s me that Safari thinks it has a better idea of how my site should look than me. If anyone knows how to over ride this please leave a comment letting me know. There are a few other quirks with Safari but they don’t relate to Live Search so I will save them for another post. That is all I really felt the need to change, but I dug into it pretty well. If there is something you want to change and can’t figure out how, leave a comment and I will see if I can help you with that.

Wow, that was alot of writing to explain so little code. BTW, I know I suck at writing and I know it’s probably not the easiest instructions to follow and understand, but come on, i’m a technical person :-P