There are two options, how to do theming, we are aware of:
1. Overriding in
You can override any css selectors in
/_sass/_overrides.scss. As it is a scss file, so you can use
the features of SCSS to improve readability, but it could still be a pain.
Typically people want to change the colors of the navbar, so there is a commented example of the six colors used in the navbar in the overrides file. Uncomment and set them to the values you prefer.
- You need to be able to find the css selectors in the developer tools of your browser
- Finding of all the css selectors to be overridden can be a lot of work
- The theme might not be consistent any more, in case you didn’t find all the occurencies of e.g. the color you want to change
- A lot of css: it might be a huge amount of css selectors, that you have to override
2. Overriding using the scss variables
In case you know about scss and gem based themes, you can skip the Gereral Principles chapter, inline the jekyll-bootflat theme, override the variables and you are done. Otherwise, let’s get into the details:
First explaination of the general principles:
Bootstap in included in version 3.3.6., which is also well documented: Documentation of Bootstrap 3.3.6
We using jekyll-bootflat as a Gem based theme, a Jekyll feature described in the Jekyll documentation of Gem based themes. This is the documetation you absolutely have to read to be able to adapt jekyll-octopod in the most efficient way possible.
I ran into the trap to believe that you could change variables simply by overriding them
/_sass/_overrides, but that is not the case. The reason is that for the scss parser of
Jekyll not the last setting of a scss variable wins, but the last one before resolving it,
which happens earlier. If that sounds strange, a look at
the import order
might clear things up: The variables are already used before they have been overridden :-(
Now let’s change the colors of the navbar as an example. The file containing the colors of the navbar is:
Whereever you inlined the file in your project, change the variables there to your heart’s desire:
$navbar-background-color: $mint-dark !default; $navbar-background-color-active: $mint-light !default; $navbar-font-color: $black !default; $navbar-item-background-color-hover: $navbar-background-color-active !default; $navbar-inverse-background-color: $black !default;