How to 'bling' your Booktype
As you know, you can use Booktype to publish your books in different formats and you can also view them on the web.
In this blog post I will try to show how the web view can be customized with simple template modifications. By default, Booktype comes with predefined templates but they can all be easily customized to fit your needs (templates can also be multilingual).
Scenario: Awesome Sun Publishing House
Let us imagine we run a publishing shop called "Awesome Sun" who is interested in publishing books about solar power. Booktype has been installed in the /var/www/awesomesun/ directory on our web hosting server. But we are not so happy with the default look and feel so we decide to change it.
So where should our web designers look first?
In the case of "Awesome Sun", the template files should be placed in the /var/www/awesomesun/templates/ directory. While all static files (CSS files, JavaScript files, images, ...) should be placed in /var/www/awesomesun/static/ directory.
Fairly simple for now. Before doing any work it would be wise to check our documentation for information on how to work with Django templates. As you may guess, the examples in this blog post are oversimplified so if you want to go further with Booktype you can access these other resources.
Modifying the template files
By default, to present books on the web Booktype comes with the Django application called "Reader" and we will customize templates for that application. Original templates for this application are placed in the $BOOKTYPESOURCE/lib/booki/reader/templates/ directory and our customized templates will be placed in the /var/www/awesomesun/templates/reader/ directory. All you have to do is either copy the original template files into awesomesun project and modify them or write new templates from scratch.
What kind of modifications can we make?
As you can see on the screenshots bellow we want to have a very simple book view. We want our "Table of contents" to always be visible while we scroll the page and we want our header to be fixed on top with the name of the book and the chapter we are currently reading.
And on the back end
To make this happen I created a new base template called new_base.html and placed it in the /var/www/awesomesun/templates/ directory. This is a base template which other templates for the "Reader" application should include. This template just includes the jQuery library and creates place holders for future content.
Then you would create the /var/www/awesomesun/templates/reader/book_chapter.html template file. This is where I include the additional JavaScript library, CSS file, display "Table of contents" and content of chapter. Besides HTML and CSS there are just two important things to look at. The chapter content is inserted with {% booki_format content %} and "Table of contents" is inside of the variable chapters. It all depends how you want to show your "Table of Contents" but here I am using the "for" loop to construct unordered list with chapter titles. Everything else is just CSS styling.
Essentially, this is how you customize Booktype templates. I have compiled all the needed files (with CSS and additional JavaScript) from this blog post here. Please download it if you are interested in gong deeper into this process.
- If you want to stay up to date with news concerning Booktype join the Booktype Pro mailing list.
- If you have questions or comments about this blogpost please send us a message on our Facebook page.