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.
- Next in your Settings page click into the ‘Theme’ page, then into ‘Custom navbar’. From here enable the Super Navbar and choose the ‘minimal’ style (Cosmos also works with other navbar styles too)
- Then in the same page, add a ‘Custom Footer’.
- Finally, inside ‘Theme’ you can also choose a default color setting.
- Optionally: to enable the database view selector go into ‘Options’ and enable ‘Database view switcher’.
- That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.
<link href="https://joshmillgate.github.io/cosmos/style.css" rel="stylesheet" />
<script defer src="https://joshmillgate.github.io/cosmos/script.min.js"></script>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 ↓
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 use the code snippet below on a page to hide it. Head to your site settings > pages > custom code icon and paste the following in the ‘Head’ tab.
<style>
.footer-cover {
display: none!important
}
</style>Theme options
Cosmos is setup to work by default with the range of themes provided by Super including Light and Dark modes. To switch your default theme simply head into your Super site settings, into the ‘theme’ page and then choose one from the list. Users can also toggle between Dark and Light mode directly on your site!
Removing the dark/light mode toggle
Simply swap the script from step one with this:
<link href="https://joshmillgate.github.io/cosmos/style.css" rel="stylesheet" />
<script defer src="https://joshmillgate.github.io/cosmos/script-2.min.js"></script>Support and Help
If you have any issues with Cosmos please get in touch via Twitter or by email at hello@joshmillgate.co.uk