Getting Started

Getting Started

Getting Started

  1. Sign up with Super and Notion if you haven't already
  2. Click the 'Duplicate' button in the downloadable PDF to open the Notion page and then duplicate it to your own Notion workspace.
  3. Create a new site using Super using a public link newly duplicated Notion page (learn how here)
  4. Open the Settings page for your super site (Cog icon) and click into the Code page.
  5. In the 'Head' tab, copy and paste the code below into the code box.
  6. <script defer="defer" async src="https://joshmillgate.github.io/cosmos/script.js" /></script>
    <link href="https://joshmillgate.github.io/cosmos/style.css" rel="stylesheet" />
  7. 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)
  8. Then, inside ‘Theme’ you can also choose a default color setting.
  9. That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

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)

image

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’.

image

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’

image

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 ↓

Cosmos Covers.zip1480.1KB

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

Please note: The theme will ALWAYS show in the Super dashboard as dark theme, even if you change the theme in the settings. We are working on a fix for this at Super and it will be live soon, but rest assured that if you change the theme the live site will reflect it correctly.

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!

image

Support and Help

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

Cosmos by Josh Millgate

© 2022 — Built with Notion & Super