The Bitchin’ Search Box

Add Comment
Source
Articles
Bookmark/Search this post with:
Delicious Delicious
Digg Digg
StumbleUpon StumbleUpon
Facebook Facebook
Google Google
Yahoo Yahoo
Technorati Technorati
9
Saturday, June 9, 2007
By admin
We got an email today saying:

your search tab is bitchen’. how did you do it? Is there a mod?

I thought it might make a good quick article to explain how we’re doing the (bitchin’) search box on the new Lullabot site.

First off, the basis of this site is the Zengine theme engine, which basically just adds a bunch of default templates and variables to the PHPTemplate theme engine. The page.zen.php that we’re using in the Lullabot theme is only a slightly modified version of the original page.zen.php included with Zengine (which you can see here).

I’ve moved the <?php print $search_box; ?> before the <div id=”logo-title”> and used some CSS to position it absolutely flush against the top of the page. The simplified version of the CSS looks a bit like this:

search {
  padding: 0;         /* make sure there’s no space around it /
  position: absolute; / position it absolutely with its positioned parent (#page) /
  right: 0;           / align its right edge with the right side of its enclosing div /
  top: 0;             / align its top edge with the top of the page */
}

read more