Spiffing up Calibre content server with Bootstrap

I really dig Calibre. It is great for managing my growing Kindle ebook collection. One thing I do not like about it is the chosen style of the content server. To each his own, I guess…

I thought it would be pretty cool to style it with Bootstrap. It would look pleasing to me, and since the source is available I thought I’d be able to figure it out pretty easily. The app is written in Python, but it turns out the content server uses templates (mostly anyway, there is quite a bit of generated HTML in there – ewww!)

I started poking around with the templates, and then I wondered if someone else already had the same thought. I googled and sure enough someone had. I found this post that included a gzipped tarball ready to go. I downloaded it, unzipped, copy/pasted the folders and checked it out.

I liked what I saw, but I thought it could be just a little bit better. I changed up some of the markup and got a better flow (I never liked the overflow). To limit the initial book comments I used a great plugin called readmore (with a really slick looking site too). Finally, I set up the templates to use the responsive style sheet. I did not make any edits for the mobile sizes, so things look a bit wonky, but it beats the heck out the the built-in mobile option:

Original version

Original version


With my updates

With my updates


My "Mobile" layout

“Mobile” layout

If you are a Calibre user and you’d like to use this (or the original which can be downloaded from the link) you can download the 7zip here: content_server.

To “install”, just unzip and replace the folder. On a windows PC the path is [install_path]\resources\. The folder is content_server.

UPDATE: Craig finished his initial pass at using Bootstrap 3 on put it up on GitHub. It looks great!

Bootstrap Add-Ons

There is a great, big list of badass for Bootstrap over at bootstraphero.

Some of my favories:

I’ll also be checking out those WordPress themes…

Twitter Bootstrap and Font Awesome

http://www.flickr.com/photos/blentley/5387467938/in/photostream/

http://www.flickr.com/photos/blentley/5387467938/in/photostream/

I started my little “todo” list in backbone (it is a rule that you have to create a todo list for your initial foray into backbone, apparently) and I decided to use Twitter Bootstrap. I like that it has a nice, clean look, but I also don’t like that I see it used in every example. Pretty soon every site on the net will look the same, and I don’t necessarily think that is a good thing…

I wanted to add a “delete” icon, and it was really simple. however, I think that a delete icon should be red. Unfortunately bootstrap doesn’t work this way. I did a quick google and found a post on StackOverflow about using bootstrap and colored icons. The marked answer mentions Font Awesome.

Font Awesome is… well, awesome! It uses @font-face so you can use CSS to style the icons. Ima ’bout to get on that right now…

SVG CSS Injection

Through some random occurence I stumbled upon PJ Onori’s blog. I noticed a post titled “SVG CSS Injection” – that seemed pretty interesting, so I clicked. I was pleasantly surprised.
🙂

I have always thought vector graphics were really cool. I like the concept of SVG, but I haven’t gotten much into it. I still don’t know what tool to use to make the SVG graphics, but once made, PJ’s technique seems like a pretty cool concept. Basically, he “injects” the SVG graphics in the page where he can then manipulate them with javascript. He can change the color on-the-fly, etc. There is a nice demo page to show off his work.

The code is available on Github, so you can fork it if you think it is awesome. I hope to have a chance to play with it. I may not get to use it at work, but maybe I can sprinkle some SVG goodness on this blog. We’ll see…

Silly little CSS banner demo

A co-worker that has some light HTML/CSS experience asked about using some banners where she could rotate text. I cam up with this:

HTML

<div class="banner">
	<a id="banner-link" href="#">I am a cool banner!</a>
</div>
<br />
<div class="banner">
	<a id="banner-link-2" href="#"><span>I am also cool!</span></a>
</div>

CSS

.banner {
	background: url("/wp-content/uploads/2012/10/banner.png") 
	    left top no-repeat;
	width: 300px;
	height: 75px;
	overflow: hidden;
}
#banner-link {
	font-size: 2em;
	display: block;
	padding: 5px 0 0 150px;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
}
#banner-link-2 {
	font-size: 2em;
	display: block;
	line-height: 1.1em;
	height: 75px;
	text-decoration: none;
	color: #FFF;
	position: relative;
}
#banner-link-2 span {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 135px;
}

Put it all together…

Uses padding

Uses positioning

CSS3 Gradient Buttons

I was doing some style updates for our CCNET server after switching to the liquidBlue theme (why is that not the default theme?) and I wanted some nicer buttons. I did a quick search and found this great article. It provides a bunch of color templates, though none of them seemed to quite match the color palette so I just opted to forgo the gradient in the button. Maybe when I have some more time I’ll take a crack at figuring out the colors for the gradients.

CSS Demo

Someone asked me to show them how to do something via CSS, and this is the example I came up with. Thought I’d post it on here for posterity:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        /* Layout */
        body { margin: 0; padding: 0; }
        #container { position: relative; top: 0; left: 0; width: 100%; height: 100%; }
        /* The header and search windows are just normal divs */
        #header { height: 40px; margin: 0; padding: 10px; }
        #search-box { height: 20px; padding: 5px 10px; }
        /* Content "top" is total height of header and search-box heights (including padding) */
        #content { position: fixed; left: 0; right: 0; top: 90px; bottom: 60px; }
        /* These elements are contained within the content div, so we can "absolutely" position them within the container
        If an element is within a positioned element, "absolute" postion is actually relative to the container!?! */
        #nav { position: absolute; top: 0; left: 0; bottom: 0; width: 200px; }
        /* Here we position the nav menus relative to the container */
        #nav-1, #nav-2 { position: relative; left: 0; height: 50%; overflow: auto; width: 180px; padding: 0 10px; z-index: 9999; }
        /* The content div is also absolutely position inside. The overflow allows us to have the nice scrollbar effect */
        #main { position: absolute; top: 0; left: 200px; right: 0; bottom: 0;  overflow: auto; padding: 10px; }
        /* The footer is absolutely position on the page at the bottom of the window */
        #footer { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; margin: 0; padding: 10px; }
        /* Design */
        #header, #nav, #footer { background: #666; color: #FFF;  }
        #search-box { background: #CCC; }
        #search, #search-results { display: none; }
        #header h1 { margin: 0; padding: 0; }
        #search-box p { margin: 0 0 5px; }
        #main h2 { margin-top: 0; }
        #footer p { text-align: center; }
        /* BlockUI */
        div.blockMsg { background: #FFF; border: 3px solid #CCC; padding: 10px; }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Hello World!</h1>
        </div>
        <div id="search-box">
            <p><a href="#">Search</a></p>
            <p id="search"><input type="text" id="search-val" name="search-val" value="Search" />
                <input type="submit" id="search-submit" name="search-submit" value="Submit" /></p>
        </div>
        <div id="content">
            <div id="nav">
                <div id="nav-1">
                    <h3>Top Nav</h3>
                    <ul>
                        <li><a href="#">Nav Item</a></li>
                        <li><a href="#">Nav Item</a></li>
                        <li><a href="#">Nav Item</a></li>
                    </ul>
                </div>
                <div id="nav-2">
                    <h3>Bottom Nav</h3>
                    <ul>
                        <li><a href="#">Nav Item</a></li>
                        <li><a href="#">Nav Item</a></li>
                        <li><a href="#">Nav Item</a></li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <h2>Welcome!</h2>
                <p>Quisque lobortis arcu ut augue molestie dignissim. Sed ipsum leo, tristique ut placerat ut, gravida sagittis est. Ut pharetra adipiscing sem, ac viverra arcu tristique at. Aliquam sed massa eu sem porta consectetur. Donec convallis, sem vitae laoreet faucibus, sapien nulla lacinia mi, ac tincidunt lectus quam nec purus. Sed tristique sapien non leo adipiscing eu porta justo tincidunt. Quisque quis vestibulum quam. Etiam ligula sapien, pharetra quis mollis in, faucibus non elit. Etiam fermentum tempor nunc et auctor. Morbi id leo tempor justo placerat accumsan at sit amet odio. Nunc tincidunt molestie aliquam. Phasellus ligula libero, auctor id tempus id, mollis a mauris. Sed eget sodales leo. Sed eget sem id nibh tincidunt semper non a arcu. Proin vel purus in diam congue tincidunt. Nam vitae augue lorem. Nam nec massa id turpis egestas tempor nec in neque. Nam pulvinar odio sagittis lectus feugiat hendrerit. In a erat lectus. Nulla ut purus sapien.</p>
                <p>Curabitur sollicitudin, dolor non sodales tempus, justo erat volutpat tortor, ac mollis dui urna id massa. Aliquam lorem metus, commodo sit amet sodales sit amet, accumsan ut felis. Sed felis nisi, pellentesque a adipiscing sit amet, sagittis a justo. Proin rutrum nunc sit amet eros bibendum sed rhoncus ligula sagittis. Maecenas consectetur, sapien a varius dictum, elit dui molestie erat, eu aliquam felis massa nec orci. Maecenas nec dui arcu, in elementum elit. Suspendisse in enim id tellus feugiat porttitor at et tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id ipsum lorem, vel ullamcorper mi. Curabitur id odio eu quam faucibus commodo sed ac eros. Cras vel nulla in tellus cursus pellentesque. Donec magna purus, viverra non tempor ac, convallis et erat. Mauris ultricies nisl vel elit pretium et eleifend ligula commodo. Integer quam nulla, aliquam id malesuada eu, semper in mauris.</p>
                <p>Quisque sollicitudin suscipit sapien, in rhoncus sapien gravida eget. Duis at fermentum metus. Donec dui lacus, fringilla ut bibendum eu, laoreet vitae nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a quam mi, eget faucibus nulla. Mauris viverra consectetur ante nec mattis. Nunc porta mi et purus convallis dignissim luctus urna ultricies. Vivamus metus neque, malesuada laoreet imperdiet non, tincidunt lacinia massa. Ut at lorem et dolor accumsan lobortis quis eu mi. Aliquam pulvinar gravida hendrerit. Duis ac ipsum neque. Phasellus vel mi sed justo feugiat auctor. Phasellus porta, turpis ornare rutrum porta, orci tortor tincidunt dolor, id volutpat justo erat non est. Phasellus dapibus tristique feugiat. Curabitur fermentum vehicula mauris ac accumsan. Sed hendrerit est vel turpis blandit sed sollicitudin quam accumsan.</p>
                <p>Fusce pharetra, eros id pharetra dapibus, lorem nunc facilisis libero, in tristique est ante et lacus. Donec eu nisi in augue blandit euismod. Maecenas tristique dapibus dolor, ut placerat nisi vestibulum id. Nulla feugiat, purus vitae auctor cursus, tellus lorem accumsan risus, id accumsan ante nulla id nisl. Proin ut lectus mollis tortor dictum venenatis. Vestibulum quis enim in purus condimentum viverra. Sed consectetur ullamcorper leo, vitae hendrerit sem varius et. Etiam consectetur metus vel dolor posuere eget porttitor metus facilisis. In bibendum, ipsum nec fermentum hendrerit, mi sem consectetur ligula, et luctus purus velit in sapien. Proin eget nibh id magna porttitor accumsan. Morbi scelerisque elementum massa et malesuada. Sed consequat tempor urna blandit egestas. Maecenas bibendum dui ac enim rutrum iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor mattis tellus, ac luctus dui mattis non. Pellentesque imperdiet facilisis orci, consectetur dictum velit eleifend in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pellentesque ullamcorper est. Curabitur vel ipsum sit amet mi porta gravida. Sed ut libero neque, rhoncus eleifend diam.</p>
                <p>Donec rutrum, sapien sed laoreet volutpat, quam nisi scelerisque odio, a posuere sem nisl ac justo. Etiam a venenatis elit. Ut mattis, odio aliquam pellentesque fermentum, dui metus interdum dui, a ultricies dolor dui id sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in arcu a velit volutpat sollicitudin. Nulla pharetra diam at nisi varius rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere dignissim velit vel scelerisque. Ut vel nibh nulla. Maecenas eleifend, orci sed cursus tincidunt, diam lectus vestibulum libero, id tincidunt enim mauris quis metus. Praesent ullamcorper accumsan felis, et molestie ligula egestas eget. Morbi auctor placerat sodales.</p>
                <p>Aenean euismod commodo sem in ultricies. Sed sed eros sem. Nunc a blandit ipsum. Vestibulum ante urna, vulputate sed pretium eu, posuere a massa. Nunc pellentesque venenatis odio, ac rhoncus odio sollicitudin sit amet. Praesent dui felis, euismod eget tempor vel, mattis et ligula. Vivamus adipiscing pellentesque luctus. Curabitur vitae iaculis nulla. Cras laoreet, urna tincidunt ornare fringilla, odio ante varius mi, ut imperdiet lectus quam vitae magna. Nam sagittis diam sit amet velit tristique lobortis. In hac habitasse platea dictumst.</p>
                <p>Duis dapibus molestie neque sed sollicitudin. Duis lorem lectus, gravida ut accumsan sit amet, aliquet sed libero. Aliquam at nisi dolor. Cras vulputate ipsum ut mauris ullamcorper sed elementum neque tristique. Nam enim leo, gravida id sodales id, euismod in lacus. Quisque justo lacus, facilisis dapibus mollis in, rutrum in est. Nullam sit amet nulla ante, non congue sem. Duis id suscipit purus. Nunc pulvinar, mauris sed aliquet aliquet, dolor ipsum suscipit massa, vel sodales mi mi eget ante. Nunc convallis hendrerit luctus. Aliquam accumsan lorem et velit gravida mattis. Donec sed sapien ac magna molestie condimentum. Suspendisse sed orci ac erat dictum laoreet sed vitae sem. Pellentesque quis mi leo. Curabitur pulvinar faucibus dapibus. Praesent id turpis id odio laoreet sollicitudin id non nisi.</p>
                <p>Suspendisse malesuada aliquam mattis. Vestibulum iaculis venenatis lectus, nec aliquam nunc ultrices id. Nullam quis nulla in ante rhoncus rhoncus vitae eget odio. Nunc molestie, nunc eu lobortis consectetur, odio mi cursus turpis, sit amet pulvinar arcu leo at diam. Mauris sit amet nibh elementum purus semper venenatis ac et neque. Etiam porta massa felis. Aliquam a urna vel massa facilisis dapibus. Nunc elit velit, ultricies non faucibus vel, cursus dapibus dui. Suspendisse potenti. Duis pretium est elementum leo eleifend tincidunt. Ut facilisis tincidunt orci, vel placerat massa porttitor id. Proin sit amet risus sed eros gravida varius non non elit.</p>
                <p>Quisque mattis lobortis auctor. Ut at accumsan libero. Sed tincidunt, erat sed iaculis mollis, libero nulla cursus nunc, quis pellentesque ipsum nibh ac nisi. Nulla facilisi. Vestibulum eget urna et nulla lobortis pulvinar in non ipsum. Praesent interdum lectus quis ligula consectetur vel placerat neque rhoncus. Suspendisse ac erat sed leo eleifend tempus. Donec mi enim, venenatis vitae sodales id, malesuada eget lacus. Nullam tincidunt pulvinar lectus, vitae vehicula purus sollicitudin semper. Etiam et erat mi, egestas egestas dolor. Morbi nisl ligula, dapibus et tristique ut, faucibus vel mauris. Curabitur vel ante dolor.</p>
                <p>In a est orci, sit amet suscipit lectus. Ut luctus interdum enim, eu sodales libero malesuada non. Donec sollicitudin risus sit amet mauris pharetra a ultricies neque blandit. Praesent vehicula lobortis vulputate. Etiam at lectus et est viverra facilisis ut id odio. Nulla augue nulla, vehicula vitae sollicitudin at, consectetur ut magna. Integer ac nibh et metus facilisis fringilla. Proin rutrum purus eget risus hendrerit auctor. Nullam mi felis, ullamcorper sed pellentesque a, suscipit quis elit. Morbi laoreet aliquam nisi, sollicitudin molestie ante sollicitudin quis. Nullam et venenatis neque. Donec non hendrerit tortor. Donec commodo magna at arcu luctus nec cursus nulla interdum. Aenean placerat scelerisque ligula, feugiat vestibulum mauris fermentum nec. Phasellus libero dolor, rutrum vitae lacinia quis, pretium non ipsum. Ut eget dolor libero, sed vehicula nisi. Nunc porta nisl non urna congue sit amet malesuada mauris tempor. Sed condimentum lacinia purus at porttitor. Maecenas accumsan lobortis ante at ullamcorper. Mauris augue nisl, tristique eu consequat a, dignissim ac augue.</p>
                <p>Duis adipiscing metus velit, quis dapibus diam. Morbi sollicitudin placerat vulputate. Ut ut felis nibh, quis tincidunt massa. Donec eros nisl, scelerisque nec ultricies sed, vulputate a turpis. Integer leo massa, condimentum sed luctus nec, tempor in tellus. Praesent nec leo quam. Sed dignissim imperdiet mollis. In vulputate lorem at magna molestie posuere. Sed ut eros at urna scelerisque tempor. Praesent vel urna purus. Vivamus sed tortor sit amet neque adipiscing porta. Praesent ac egestas tellus. Mauris leo erat, tincidunt eu tincidunt vitae, dictum in purus. Aenean semper, erat quis dapibus ornare, massa dolor ornare diam, a ultricies nunc augue in ligula.</p>
                <p>Nulla aliquam velit nec arcu commodo egestas sed in diam. Quisque tincidunt tincidunt odio, vitae pellentesque massa placerat eget. Donec at neque nulla. Ut eget erat quam. Mauris eu pellentesque dolor. Nam facilisis justo a risus elementum interdum. Pellentesque ligula eros, posuere sed hendrerit vitae, lacinia a eros. Sed nec purus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non sapien ut erat volutpat viverra vitae at est. Morbi vel pellentesque nibh.</p>
                <p>Pellentesque vel magna at augue ullamcorper pretium. Sed lacinia hendrerit vestibulum. Vestibulum rutrum porta placerat. Fusce vitae felis sit amet justo aliquam iaculis in nec dolor. Donec ac ligula neque, sed tristique lorem. In viverra feugiat magna, at hendrerit quam lacinia in. Fusce id dui ligula, ac convallis diam. Fusce tempus, arcu id varius rutrum, metus velit ullamcorper massa, nec posuere nisl eros dictum nulla. Donec eget tincidunt nisi. Nam quam nunc, dapibus quis luctus nec, semper ut nulla. In metus sapien, dictum rhoncus tincidunt eu, lobortis non massa. Maecenas a metus eu dolor dapibus convallis eget pretium tortor. Donec lobortis semper bibendum.</p>
                <p>Suspendisse euismod mi non enim posuere venenatis. Quisque sed felis nunc. In sem elit, vestibulum ac euismod vel, condimentum id lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dignissim faucibus varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar dignissim nulla, vitae rutrum dui cursus dapibus. Maecenas sem arcu, fringilla quis iaculis eget, consequat ac nunc. Vivamus id ligula orci, in interdum lectus. Vestibulum tincidunt lacinia mauris, eget venenatis erat hendrerit sed. Pellentesque non dolor risus. In hac habitasse platea dictumst. Etiam at mi justo. Aenean quis odio sed erat mattis rhoncus.</p>
                <p>Aliquam erat volutpat. Aliquam lacinia nisl vel orci egestas id pellentesque purus lacinia. Sed ultricies condimentum mi, sed laoreet purus iaculis nec. Donec et ipsum velit. Etiam tincidunt aliquam tellus sed ornare. Mauris cursus varius odio luctus blandit. Sed vel risus leo. Vivamus fringilla interdum varius. Suspendisse et tortor mi. Fusce ut metus nibh, et fermentum massa. Quisque a enim ac urna interdum rhoncus vel vel nulla. Quisque dictum mauris sit amet mi euismod a semper leo auctor. Etiam faucibus convallis quam, id bibendum dolor ornare vitae. Praesent sed purus non ligula adipiscing condimentum ut non leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            </div>
        </div>
        <div id="footer">
            <p><em>© Footer!</em></p>
        </div>
    </div>
    <div id="search-results">
        <h2>Search Results</h2>
        <p>You searched for <em id="search-term"></em></p>
        <p>In a est orci, sit amet suscipit lectus. Ut luctus interdum enim, eu sodales libero malesuada non. Donec sollicitudin risus sit amet mauris pharetra a ultricies neque blandit. Praesent vehicula lobortis vulputate. Etiam at lectus et est viverra facilisis ut id odio. Nulla augue nulla, vehicula vitae sollicitudin at, consectetur ut magna. Integer ac nibh et metus facilisis fringilla. Proin rutrum purus eget risus hendrerit auctor. Nullam mi felis, ullamcorper sed pellentesque a, suscipit quis elit. Morbi laoreet aliquam nisi, sollicitudin molestie ante sollicitudin quis. Nullam et venenatis neque. Donec non hendrerit tortor. Donec commodo magna at arcu luctus nec cursus nulla interdum. Aenean placerat scelerisque ligula, feugiat vestibulum mauris fermentum nec. Phasellus libero dolor, rutrum vitae lacinia quis, pretium non ipsum. Ut eget dolor libero, sed vehicula nisi. Nunc porta nisl non urna congue sit amet malesuada mauris tempor. Sed condimentum lacinia purus at porttitor. Maecenas accumsan lobortis ante at ullamcorper. Mauris augue nisl, tristique eu consequat a, dignissim ac augue.</p>
        <p>Duis adipiscing metus velit, quis dapibus diam. Morbi sollicitudin placerat vulputate. Ut ut felis nibh, quis tincidunt massa. Donec eros nisl, scelerisque nec ultricies sed, vulputate a turpis. Integer leo massa, condimentum sed luctus nec, tempor in tellus. Praesent nec leo quam. Sed dignissim imperdiet mollis. In vulputate lorem at magna molestie posuere. Sed ut eros at urna scelerisque tempor. Praesent vel urna purus. Vivamus sed tortor sit amet neque adipiscing porta. Praesent ac egestas tellus. Mauris leo erat, tincidunt eu tincidunt vitae, dictum in purus. Aenean semper, erat quis dapibus ornare, massa dolor ornare diam, a ultricies nunc augue in ligula.</p>
        <p>Nulla aliquam velit nec arcu commodo egestas sed in diam. Quisque tincidunt tincidunt odio, vitae pellentesque massa placerat eget. Donec at neque nulla. Ut eget erat quam. Mauris eu pellentesque dolor. Nam facilisis justo a risus elementum interdum. Pellentesque ligula eros, posuere sed hendrerit vitae, lacinia a eros. Sed nec purus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus non sapien ut erat volutpat viverra vitae at est. Morbi vel pellentesque nibh.</p>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#search-box a").toggle(function (e) {
                e.preventDefault();
                $("#search-box").css({ "height": "50px" });
                $("#content").css({ "top": "120px" });
                $("#search").css({ "display": "block" });
            },
            function (e) {
                e.preventDefault();
                $("#search-box").css({ "height": "20px" });
                $("#content").css({ "top": "90px" });
                $("#search").css({ "display": "none" });
            });
            $("#search-val").focus(function () {
                $(this).select();
            });
            $("#search-submit").click(function () {
                var searchval = $("#search-val").val();
                $.blockUI({ message: "<h3>Searching for '<em>" + searchval + "</em>'...</h3>" });
                setTimeout("searcher('" + searchval + "')", 2000);
            });
        });
        function searcher(searchval) {
            $.unblockUI();
            $("#search-term").html(searchval);
            $("#main").html($("#search-results").html());
        }
    </script>
</body>
</html>

Demo here