Changing Color Schemes and Fonts in Nikola

One of the easiest ways to personalize how your site looks is using color and typography. While Nikola's "site" theme is intended to be rather bland and neutral, it doesn't have to be that way, and it's easy to change.

http://lateral.netmanagers.com.ar/galleries/random/site-theme.thumbnail.png

Bland, solid and boring.

To do these changes, you don't even need to know any CSS, HTML, or programming!

Here's the trick: Nikola is using Twitter Bootstrap to handle its styling. And they provide a handy web form to create a customized version, just for you, at their customize page.

So, if you want auvergine navigation bars and avocado backgrounds, with courier fonts all over the place, that's where you do it. Just change the value in the right variable to whatever color you want.

Once you have your bootstrap.zip, go to your site's folder, and create themes/mytheme/assets and unzip it in there, so that you have themes/mytheme/assets/css, themes/mytheme/assets/js, etc.

Create a file called themes/mytheme/parent containing the word site.

Then edit your dodo.py (or conf.py if you are using the git master) and change the THEME option "mytheme".

Rebuild your site, and voilá, all your customizations are now in place.

This awfulness, for example, was done by setting just three variables (bodyBackground, textColor, and sansFontfamily):

http://lateral.netmanagers.com.ar/galleries/random/site-c64.thumbnail.png

Yes, I had a C64.

Comments

Comments powered by Disqus