Jun 3, 2021 1 min read

Nikko is easy to customize

Nikko is easy to customize

Nikko comes with a config file, where you can overwrite the default settings the theme comes with, this file is theme-config.hbs and it's located in the partials folder.

Theme config

You can set the following:

  • set the content api key to enable the search
  • set the search result limit
  • set the default color scheme
  • enable/disable the floating header
  • enable/disable the theme toggle feature
  • set the header height
  • set the site width
  • set the post content width
  • hide/show the progress bar
  • and much more..

For more advanced customization it's important to know that at the base of the theme style is PostCSS. This makes style customization easier and faster.

The most important aspects of the theme are defined as CSS custom properties which can be modified even without generating theme assests, so you can even customize styling using the Code Injection in Ghost Admin, either to do it Globally or on a post by post basis.

All these properties are in assets/css/settings/_settings.css file.

Utility classes

Besides the available custom properties you can take advantage of the utility classes available in order to build new content blocks, and style them according to your need.

Color utilities

color-primary
color-secondary
color-dark
text-acc-1
text-acc-2
text-acc-3
color-light
bg-primary
bg-secondary
bg-acc-1
bg-acc-2
bg-acc-3

Text utilities

Font weight:

fw-100
fw-200
fw-300
fw-400
fw-500
fw-600
fw-700
fw-800
fw-900

Text size:

text-xxs
text-xs
text-sm
text-md
text-lg
text-xl
text-xxl
text-xxxl

Text alignement:

text-left
text-center
text-right

Paddings & Margins

p-xs
p-sm
p
p-lg
p-xl
m-xs
m-sm
m
m-lg
m-xl

For more check out the documentation

Jason Biron
Typical travel lover. Web aficionado. Subtly charming social media geek. Beer specialist. Entrepreneur. Lifelong tvaholic. Reader.
Table of Contents
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Nikko.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.
Customize Nikko:
Buy Nikko