Documentation How-to
How to Install Kraft Theme
8 Oct, 2021
Here's a quick guide of how to install Kraft theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready
Duplicate Kraft Template
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F17e30931-d375-41c8-a996-299e5e81c124%2F90fe095e-cd30-433a-89eb-b69c820da7fc%2FFrame_78.png?id=6fbd28f9-90d8-4a40-ac27-6a77412ce1c1&table=block)
Once you purchase Kraft, you'll get a link to Kraft Notion Template that should be duplicated to your Notion.
Share it to web
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F17e30931-d375-41c8-a996-299e5e81c124%2F6b9f9051-b1c3-47a5-b1e8-2c910497fe98%2FFrame_79.png?id=ec0d299d-b6dc-42fd-894e-767a115ac2ab&table=block)
Publish your new Notion page to web.
Create a new Super Site
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F17e30931-d375-41c8-a996-299e5e81c124%2F5009744e-fd1e-4571-bef1-53db86007018%2FFrame_80.png?id=2ecb5b87-d0e7-4eac-816e-1c35b4205995&table=block)
Use the link you've got from Notion Sharing while creating a Super Site
Paste the theme's custom code
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F17e30931-d375-41c8-a996-299e5e81c124%2F654d0419-19b1-48c7-9325-a20b92605b25%2FFrame_81.png?id=45dd477a-b40f-49ce-8450-a278c10a6b80&table=block)
Site settings → Code → HTML head
<!-- Animation Module -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- Theme CSS File -->
<link
rel="stylesheet"
href="You'll get the correct link once purchase Kraft"
/>
You'll get an original CSS file too if you want to store it on your server but note that the latest version with all the updates and fixes will be only available via the link.
Adjust Appearance via Super Settings
![image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F17e30931-d375-41c8-a996-299e5e81c124%2F781fd2dd-7a2d-40d9-b89f-0203fa329aeb%2FFrame_82.png?id=ff5aaa70-65c2-4498-bd12-e95cbbb90c21&table=block)
Color theme
Site settings → Theme → Color Theme
You can choose one of four color schemes for Kraft: Light, Darkmode, Neutral, and Blackout
Font
Site settings → Theme → Custom Font
Select one of fonts that listed in Super's theme settings.💡 The original font used in Kraft is Manrope
Custom Navbar
Site settings → Theme → Custom Navbar
Choose between Simple, Minimal, or Balanced. Feel free to adjust your navbar in your way, here are some recommended settings that you can use for better theme match:
You're all set!
Build pages in Notion, and they will automatically be synced with Super. Magic!
🔥
And don't forget to have fun!
Feel free to reach me at hello@stfn.co if you have any questions about theme and it's features
Cover image by Robin Schreiner
Table of contents
- Here's a quick guide of how to install Kraft theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready
- Duplicate Kraft Template
- Share it to web
- Create a new Super Site
- Paste the theme's custom code
- Adjust Appearance via Super Settings
- Color theme
- Font
- Custom Navbar
- You're all set!
- Build pages in Notion, and they will automatically be synced with Super. Magic!
- Nick Stfn
- See Also
![image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F615cb33d-1e12-4622-895e-77ab3c77da6f%2Favatar-2.jpg?id=633a7010-66a4-413a-8d08-eaf9eb8c26e1&table=block)
Nick Stfn
Product designer, maker, nomad. Kraft Creator
See Also
Kraft Theme by Nick Stfn