xdeb.org

The search field is an important part of almost any web site today and it deserve some attention. Especially if you have implemented some really good search like Apache Solr (see How to set up Apache Solr search for Drupal 6 on a Debian GNU/Linux server).

This is an update to an older post on the same subject but for Drupal 5. This new version is for Drupal 6 and adds jQuery 1.3+ compatibility plus some nice CSS for Firefox.

If you use Safari, or any other Webkit browser, the spiced up search field looks like a standard Mac OS X search field:

With the help of some CSS I made the spiced up Firefox search field look somewhat similar:

All this is done with JavaScript and CSS on the original Drupal search form ensuring graceful degradation. If you turn of JavaScript all that happens is that you get the standard search field and button.

Here follows the code I use to implement this here on xdeb.org.

I’m using Safari on my iPhone to browse the web more than I thought I would. Mobil Safari display pages very much like Safari on Mac OS X so it mostly works really well. A web design however rarely works well on both a big computer screen and a small handheld screen, even a high resolution one like on the iPhone.

I was not satisfied with the way xdeb.org looked on the iPhone. I wanted a simple way to improve it without the need for a separate theme or other more complicated solutions.

The Drupal Administration Menu module is really nice. It gives you quick and easy access to all administrative meny items and integrates with the devel module. I use it on all the sites I work on.

I’m not to fond of the default look so here follows what I have done to change it. The new css and background images are available for download.

The PNG format (Portable Network Graphics) was created to be a replacement for the GIF format. It is patent free open standard with a number of advantages over GIF.

One of the few problems with PNG images is that it’s difficult, not to say impossible, to match colors in CSS and GIF images with does in a PNG image. This is a major headache for web designers and according to information I have found on the web the reason is the PNG gamma correction function.

Read more about PNG and the gamma correction problem on The Sad Story of PNG Gamma “Correction”.

Now on to how to fix the gamma correction problem.