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.
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.
Tons of sites have sprouted up that offer bootstrap based themes. Some are free, some not. I used a free CSS from http://bootswatch.com/ 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?
For more awesome page dividers and seizure >>> http://rainbowdivider.com/
Thank you for reading this post. I appreciate your comment. HC