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!

CSS3 animation for Bootstrap icons

I found this great post on Elijah Manor’s blog where he animated the refresh icon. I don’t use Bootstrap on my site, but I did have the need for a refresh icon for an older post, and this would have been pretty cool. If only I had been smart enough to think of it. DOH!

If you want to skip all the specifics and just get to the payoff, here is the jsfiddle with the working animation:

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…

Select2 and Chosen

I was looking at my options for including an image in a select list – why is this not easier?

Anyway, I found some good Stackoverflow Q & A’s, and one mentions Select2. This is a pretty slicklooking jQuery extension, and it is based on another really cool plugin, Chosen.

The Select2 site uses Bootstrap, and the more I see examples in Bootstrap the more I <3 Bootstrap! I have discussed moving our company site over to Bootstrap to take advantage of the goodness that it offers (especially responsive UI) and the Select2 would be a great addition.

So much to do and so little time… 🙂

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…