Getting Started

Installing the template

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 in Super using the Notion share URL of newly duplicated Notion page (learn how here)
4. Next, click here to duplicate the Horizon theme presets to your Super account.
5. Go into your new site and click into the Design page on the left sidebar panel.
6. At the bottom, choose the Horizon theme that we just duplicated.
7. Next, go into your new site and click into the Code page on the left sidebar panel.
8. In the 'Head' tab, copy and paste the code below into the code box.
Copy

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

Setup and customization

1. Next in your Super site click into the navbar page. From here enable the Super navbar and customize it to your needs.
2. Then in your Super site go into the Footer page, enable it and choose the style corners then customize it until you are happy.
3. Once you’ve edited the contents of your site, you can come back to the Navbar and Footer pages to add your page links.

Optional settings

Enabling light/dark toggle

This option allows you to enable a button in the navbar of your site to toggle color themes

1. In your Super site in the Options page enable Theme toggle

Enabling database views/filter

This option allows you to use the filter buttons to change between database views

1. In your Super site in the Options page enable Database Views

Disable page properties

This option allows you to show database properties at the top of every database page

1. In your Super site in the Options page disable Page properties

Full-width content

This option gives you the ability to make your page take up the full-width of the browser

1. On your Notion page, click the 3 dots at the top right of the page
2. Toggle the Full-width option
3. Refresh your site in Super

That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

Further customizations

Check out an example of all the blocks on this page

Creating extra large text

1. Create a Heading 1 block and write your text
2. Make it bold by selecting the text and clicking the B icon

Outline database pills

To get the outline style database pills on select properties, choose the light gray color

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.

Dark mode logo color change

To make your logo change on dark mode, view this post here for instructions.

Creating a lightbox image page

If you want to create lightbox images (like on this page) where you click the image to view it in a large view, then follow these steps:

1. Open your site in Super and go to the Pages page in the sidebar
2. On the page you want to add the lightbox on and then click the three dots menu and click edit custom code
3. Then, open the Body tab and paste one of the following snippets
‣

If you want the lightbox to work on a Gallery database block

Copy

<script src="https://sites.super.so/snippets/lightbox-gallery.js"></script>
<div class="lightbox-wrapper">
  <div class="close-lightbox">×</div>
  <img class="lightbox-image" src="">
</div>

‣

If you want the lightbox to work on an Image block

Copy

<script src="https://sites.super.so/snippets/lightbox.js"></script>
<div class="lightbox-wrapper">
  <div class="close-lightbox">×</div>
  <img class="lightbox-image" src="">
</div>

Managing Databases

This template is designed in a way that leaves it to you to choose how you want to manage databases. The two most common ways to manage databases are:

• Have one main database for each content type e.g. ‘Posts’, ‘Projects’, and so on and then use database views and filters to choose which content to show
• Have a ‘master’ content database and keep everything in one place, and show content throughout your site using filters and properties like ‘content types’.

Neither approach is best, just play around in Notion and use what works best for you. Just make sure to tidy up and organise your page URLs in Super > Pages afterwards.

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.

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.

FAQ

Support and Help

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