Customizing

Changing the primary color

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

Easy option

Note: This method means that you have to overwrite a color in Notion.

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;
}

Replace the HEX code with a color of your choice, you can use this tool.
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;
}

Slower option

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;
}

Call to action button

Ascent has an additional feature that lets you turn a link into a call to action button, check out the example below. By default, the background color is set using the --primary-color variable as mentioned above.

Call to action button

For a link to become a button it must be a single bold text block on its own line with a link. You can customise the appearance of the button using the code snippet below. To change it, head to your site settings (cog icon), into the 'Code' page and inside the 'CSS' tab, simply paste the snippet below and update the values to your liking. This will also affect the padding and border radius styles of the Navbar call to action button.

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: var(--primary-color)!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!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.

Illustrations

Illustrations can add a bit of color or visual interest to your site that helps build engagement with your users. In combination with a Super template, these free illustrations can quickly bring your new website to life. If you can't find the illustration you need here, look for thousands more at Streamline.

super.so

Customizing icons

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.

Changing callout icon size

.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