Customizing design

In this guide, we will learn how to use dimer config file to customize the website header and primary color.

What can be updated?

Dimer has few extension points, which can be used to personalize the outlook for your website.

In future, we will open Dimer API for public use and then you can even build your layouts for fine-grained control.

  1. You can update the header background color.
  2. Add navigation links to the header.
  3. Define logo and favicon URLs.
  4. Update links color.

Customizing header

Let's get started by customizing header. We will give a custom background color and also update the logo.

dimer.json
{
  "themeSettings": {
    "headerBg": "#110122",
    "logoUrl": "./assets/logo.svg",
    "favUrl": "./assets/favicon.png"
  }
}
KeyValue
headerBgThe background color must be a valid CSS background property .
logoUrlThe logo URL can be an absolute http(s) URL or path to a relative file. The dimer assets detection will upload the logo for you.
favUrlThe logo to be used as the favicon.

Adding navbar

You can add navbar to the header by defining it inside the config file. Dimer support one level deep nested navigation.

dimer.json
{
  "themeSettings": {
    "navbar": {
      "Home": "https://dimerapp.com",
      "Community": {
        "Github": "https://github.com/dimerapp",
        "Twitter": "https://twitter.com/dimerapp"
      }
    }
  }
}

Finally, the links color can be customized too. The combination of all these customizations will get you closer to your brand.

dimer.json
{
  "themeSettings": {
    "linkColor": "#6142d2"
  }
}