Learn the fundamentals
To create Super themes you will need to have a basic understanding of: UI design, HTML, CSS and the Developer Tools. Below are list of great free resources to help you get started with learning the fundamentals.
Start with a design
The process of template development can be made a lot easier if you already have a design to reference. Starting in design software gives you the freedom to make variations, changes and updates to a design much quicker than in development. Some design tools even give you access to the CSS code. As well as some recommended design tools, you can find some design guidelines below:
- Less is more
- Stick to using 1 or 2 primary colors
- Use white space to balance layout
- Keep typography legible
Develop your theme
After your design is ready, it's time to develop your theme. The key to creating templates for Super is to modify the existing CSS classes, you can view a list of all of the Super CSS classes here.
To jump in and start customising your site right away head to your Super Dashboard, click the Settings Icon ⚙️, and then click into the 'Code' page. From here you can open the 'CSS' tab and start writing CSS code. Try pasting the following snippet as an example:
body {
background: #f0bd66 !important;
}Once you are familiar with the workflow, you can host your custom code on Github Pages and include a link to it in your Super site's code. This allows for version control, organisation and efficiency.
We recommend starting with our Template Starter page, duplicate it to your own Notion workspace and create a site with it on Super. From here you can practice using the Developer Tools to inspect the different blocks and apply custom styles in the Code page on your Super site.
Theme Requirements
Templates that we add to our marketplace follow a few simple guidelines:
- Design should be clean, simple, and include some white space
- Templates should not modify the layout of a Super site too drastically
- Template should be responsive and look great on mobile as well as desktop
- Templates should allow people to still use Notion as expected without many hacks
- Templates should have creators that can provide support for their templates
- Templates should not have loaders or spinners that make initial load feel slow
