Getting Started

Getting Started

Please note: The dark/light mode toggle and the background images do not show up in the Super dashboard preview just yet. They will work fine on your live site though.

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. <link href="https://joshmillgate.github.io/cosmos/style.css" rel="stylesheet" />
    <script defer src="https://joshmillgate.github.io/cosmos/script.min.js"></script>
  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 in the same page, add a ‘Custom Footer’.
  9. Finally, inside ‘Theme’ you can also choose a default color setting.
  10. Optionally: to enable the database view selector go into ‘Options’ and enable ‘Database view switcher’.
  11. 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)

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

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

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