Creating A Theme From Scratch (Almost)

::: {.lead} There is some documentation about creating themes for Nikola, but maybe a tutorial is also a useful way to explain it. So, here it is. I\'ll explain how to create a theme (almost) from scratch. All themes in Nikola must inherit from the base theme. In this case, we will inherit from bootstrap so we get good support for slides and galleries. :::

I will try to create a theme that looks like Vinicius Massuchetto\'s Monospace Theme.

::: {.danger} ::: {.admonition-title} Danger :::

This document is outdated! Recommendations in this post may not work! :::

Starting The Theme

First we will create a testing site:

$ nikola init --demo monospace-site
A new site with some sample data has been created at monospace-site.
See README.txt in that folder for more information.

$ cd monospace-site/

Our theme will inherit from the bootstrap theme, which is full-featured but boring.

$ mkdir themes
$ mkdir themes/monospace
$ echo bootstrap > themes/monospace/parent

The next step is to make the testing site use this new theme, by editing conf.py and changing the THEME option:

# Name of the theme to use. Themes are located in themes/theme_name
THEME = 'monospace'

Now we can already build and test the site:

$ nikola build && nikola serve

This is the default \"bootstrap\"
theme.

Of course, the page layout is completely different from what we want. To fix that, we need to get into templates.

Templates: Page Layout

The general page layout for the theme is done by the base.tmpl template, which is done using Mako. This is bootstrap\'s base.tmpl, it\'s not very big:

``` {.sourceCode .mako}

-- coding: utf-8 --

<%namespace name="base" file="base_helper.tmpl" import="" /> <%namespace name="bootstrap" file="bootstrap_helper.tmpl" import="" /> ${set_locale(lang)} <!DOCTYPE html>

${bootstrap.html_head()} <%block name="extra_head"> %block> ${extra_head_data}