Skip to main content

Ralsina.Me — Roberto Alsina's website

Changing Color Schemes and Fonts in Nikola

One of the eas­i­est ways to per­son­al­ize how your site looks is us­ing col­or and ty­pog­ra­phy. While Niko­la's "site" theme is in­tend­ed to be rather bland and neu­tral, it does­n't have to be that way, and it's easy to change.

//ralsina.me/galleries/random/site-theme.thumbnail.png

Bland, sol­id and bor­ing.

To do these changes, you don't even need to know any CSS, HTM­L, or pro­gram­ming!

Here's the trick: Niko­la is us­ing Twit­ter Boot­strap to han­dle its styling. And they pro­vide a handy web form to cre­ate a cus­tom­ized ver­sion, just for you, at their cus­tom­ize page.

So, if you want au­vergine nav­i­ga­tion bars and av­o­ca­do back­ground­s, with couri­er fonts all over the place, that's where you do it. Just change the val­ue in the right vari­able to what­ev­er col­or you wan­t.

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".

Re­build your site, and voilá, all your cus­tomiza­tions are now in place.

This aw­ful­ness, for ex­am­ple, was done by set­ting just three vari­ables (body­Back­ground, text­Col­or, and sans­Font­fam­i­ly):

//ralsina.me/galleries/random/site-c64.thumbnail.png

Yes, I had a C64.


Contents © 2000-2020 Roberto Alsina