Make Zotonic your own - How to apply a custom theme

So, you've setup your Zotonic powered blog and are looking at the default theme. Here's how to apply an alternative bootstrap theme in a matter of minutes.

Twitter bootstrap

It's true what they say. The web looks more and more like bootstrap but would you rather see rainbow coloured page separators and <blink>? Let's find out how to replace Zotonic's default theme with another bootstrap variant.

If UI is your passion, this post should serve as a starter on what to tweak where.

Finding alternatives

Tons of sites have sprouted up that offer bootstrap based themes. Some are free, some not. I used a free CSS from for this blog.


Pick one of the bootswatch themes and copy the download link to your clipboard. Run:

$> cd zotonic/priv/<yoursite>/lib
$> mkdir -p bootstrap/css && cd bootstrap/css
$> wget <clipboard link>

This new CSS overrides the default bootstrap.min.css, yet your site's look has probably changed only slightly. Edit the file lib/css/project.css to comment out (or otherwise disable) colour related CSS properties for your page. At the very least you should disable those for body and navbar.  Reload.


As is typical of Zotonic, we override default behaviour by placing identically named files (bootstrap.min.css) into identically named folders (lib/bootstrap/css) relative to our site's root. Since our site has top priority (see Zotonic Admin, System -> Modules), our custom CSS takes precedence. 

That's it, except; what's the Atatonic CSS framework in zotonic/priv/sites/<yoursite>/lib/css/project.css for? A topic of a future post, perhaps? Perhaps! Do you know?

Rainbow page separator

For more awesome page dividers and seizure >>>

Thank you for reading this post. I appreciate your comment. HC

blog comments powered by Disqus
10 October 1990 - 10:11:12 10 October 1990