Getting Started

Sign up with Super and Notion if you haven't already
Click the 'Duplicate' button in the downloadable PDF to open the Notion page and then duplicate it to your own Notion workspace.
Create a new site using Super using a public link newly duplicated Notion page (learn how here)
Open the Settings page for your super site (Cog icon) and click into the Code page.
In the 'Head' tab, copy and paste the code below into the code box.

<link href="https://joshmillgate.github.io/cosmos/style-v2.min.css" rel="stylesheet" />

Optionally, if you want to have the ‘footer cover’ appear at the bottom of each page like on the demo, add this snippet to the ‘Head’ tab too:

<script defer src="https://joshmillgate.github.io/cosmos/script-v2.js"></script>

Next in your Site click into the ‘Navbar’ page. From here choose the choose the ‘minimal’ type and customize it as you wish (Cosmos also works with other navbar styles too)
Then go to the footer page and choose a Footer type and customize it.
Next, inside ‘Design > Colors’ you can also customize the default color settings and choose wether your site loads in light or dark mode by default.
To enable the light/dark toggle button, go into ‘Options’ and enable ‘Color theme switcher’
To enable the database view selector go into ‘Options’ and enable ‘Database view switcher’.
To disable the ‘page properties’ that appear at the top of database pages, go to ‘Options’ and disable ‘Page properties’.
That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

Adding Analytics

Adding analytics to your site is an incredible way to get more insight about your users and your brand. Google analytics is often cited as being an unfriendly option and so I would recommend using Fathom instead, they are a great company that do not compromise privacy for data.

Managing Content

All the content in the Cosmos theme is managed in one place. Head to the bottom of the Cosmos homepage and you will find the main content database in the toggle block (this is hidden from your site so it is not visible to the public)

Add new content inside the Main database and display content through linked databases and use the database filter options to choose what content to show. I recommend using the ‘Type’ field to filter your content, by default Cosmos comes with ‘Posts’, ‘Products’, and ‘Projects’.

To hide content from your site you can use the ‘Published’ checkbox, if you add new linked databases make sure to add a filter for ‘only show items that have the published box checked’

Adding a button

Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.

Background images/Covers

The background images on Cosmos work by using the cover photos that you upload on a Notion page, Cosmos automatically duplicates the cover and adds it to the bottom of your site too. If you don’t want the background images simply remove any cover photos from your Notion page.

Cosmos comes with 4 different gradient cover images to get you started but the theme works with any image you’d like to use. Download the cover image pack below ↓

Download from Imgur

Hiding a footer background image

If for whatever reason you do not want to have the footer background image on a page (perhaps the image is photographic so having it flipped horizontally doesn’t work so well) then you can simply skip step 6 above and/or remove the script tag.

Remove this:

<script defer src="https://joshmillgate.github.io/cosmos/script-v2.js"></script>

Adding forms to your site

If you want to add forms to your site, you can use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database. It’s super easy to use and I would highly recommend.

Support and Help

If you have any issues with Cosmos please get in touch via Twitter or by email at hello@joshmillgate.co.uk