Changing the primary color
Changing the color of the template requires a few steps and has a few options:
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
- 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.
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)
Customizing the font
Simply choose a different font in the Site > Theme page.
Customize and embed different illustrations using our free set in partnership with Streamline.
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.
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.