Customizing

Changing the primary color

Changing the color of the template requires a few steps and has a few options:

Easy option

The quickest way to change the primary color on this template is to overwrite Notion’s green color with your own custom color, you can do this using the steps below:

Paste the following snippet into your Super site settings > code page > CSS tab

:root {
	--primary-color: #3B9DEF !important;
}

Next, update the Navbar, footer colors in Super to match.

Tip: If using the method above, you could also add the following snippet to update your footer and navbar colors with the same approach, otherwise you can do it manually via the Super settings.

.super-footer, .super-navbar__cta {
  background: var(--primary-color)!important;
}

Another option for changing the primary color on this template that doesn’t sacrifice a color in Notion is takes a bit longer:

Update the color manually in Notion on all of the blocks that use a color by right clicking and changing the color settings.
Next, update the navbar, footer colors in Super to match.
To further tweak the color to match a brand color, you can adjust the default value of a color using the code snippet below (replace the name ‘blue’ for the color you chose and apply a custom hex code)

:root {
	--color-blue: #3B9DEF !important;
}

Customizing the font

Simply choose a different font in the Site > Theme page.

Customizing illustrations

Customize and embed different illustrations using our free set in partnership with Streamline.

You can easily swap out the default illustrations for emojis or custom ones. Notion has a good selection built in that you can change the color of.

Code snippets

The following customization options require you to paste the snippets below into your site settings > Code > CSS tab. You will need to modify the values in the code to make changes.

.notion-callout__icon span {
    width: 42px !important;
    height: 42px !important;
}

Re-enable page header on homepage

#page-index .notion-header {
    display: block!important;
}

For any other help and Support, reach out via the Super dashboard or by email hello@super.so