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

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

6. In the 'Body' tab, copy and paste the code below into the code box.
Copy

<script defer src="https://joshmillgate.github.io/hunt/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 customize it to your needs. To have the same design style as in the demo site, make sure your navbar background color has a lower opacity.
8. Then in the same page, add a ‘Custom Footer’, and customize it until you are happy.
9. Finally, head into the ‘Options’ page in your Super site settings and enable ‘Database Views’
10. 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 Hunt theme is managed in a master database. At the top of the Hunt homepage in Notion you will find the main content database along with other hidden pages in the brown toggle block (this is hidden from your site so it is not visible to the public)

All of the main directory content is managed inside the ‘Content’ database. Then we can use the database filter options such as ‘Tags’ or ‘Featured’ to choose what content to show in different places on our site.

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

Adding links and pages to each resource

By default the main view of the ‘Content’ database on the home page, is setup so that each item within our database links out to an external page when clicked. This feature uses a custom property called ‘super:Link’. Learn more about how it works here.

If you want to make it so that each database item links to an internal page instead, simply do not include a link inside the ‘super:Link’ property and make sure to add some content inside the page.

Setting up filtered views

The Hunt site utilizes Notion’s ‘database views’ to share different content throughout the site. Have a look at the image below that shows the views setup for the content shown on the hunt homepage. You can remove, add or edit these views anywhere on the site.

Setting up filtered pages

Creating a filtered view page is simple, inside the control panel just press the ‘Crete a new filtered view page’ button. This will generate a template page where you simply need to add a filter inside the page and rename it. You can use this feature to have a page dedicated to certain categories like ‘free’, or ‘most popular’.

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.

Important note about pricing property

In order for the pricing property to show up correctly (in the top right corner of the card) it MUST be the last property in the list. If you remove the price property the information will not display correctly.

If you do not want to include the price tag in the way, you can paste the following snippet into your site settings > code > css tab.

.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
    background: none!important;
    border-radius: 0px!important;
    color: var(--color-text-default)!important;
    font-size: 16px!important;
    font-weight: 300!important;
    opacity: 1!important;
    position: static!important;
}

Adding your own Submit form

To add a form where users can submit to your database (like on this page) you will need to 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.

Template options

Hunt comes with several built in theme options. Simply paste the snippet below into your site settings > code > css tab. Then customize the CSS values by changing out the HEX color code or pixel sizes.

Main styles and colors

:root {
    --primary-color: #202B3F;
    --color-text-default: #202B3F!important;
    --color-bg-default:#FBFCFF!important;
    --button-bg-color: #202B3F!important;
    --button-text-color: #ffffff!important;
    --mobile-menu-background-color: #FFFFFF!important;
    --list-item-border: #E1E9FF;
    --list-item-hover: #F1F5FF;
    --page-width: 1280px;
    --button-rounding: 50px!important;
}

Text alignment

By default, the text alignment on the homepage is set to ‘center’. You can disable this with the following snippet:

#page-index .notion-text, h1.notion-heading:first-of-type {
    text-align: left!important;
    margin: 0!important;
}

Page header alignment

By default, the page header title and icon is aligned center on all pages. You can reset it back to the left hand side using the following snippet:

.notion-header__title-wrapper {
    text-align: left!important;
}
.notion-header__icon-wrapper.has-icon, .notion-header__icon-wrapper.has-icon-image {
  margin-left: 0!important;
  margin-right: 0!important;
  left: 0!important;
  right: unset!important;
  text-align: left!important;
}

Cover image color blending

By default, all cover images blend with a white background color, if you change the theme background color this may need to be changed or you may want to remove it.

To disable the cover image blending gradient, include this snippet:

.notion-header__cover:after {
      background-image: none!important;
  }

To change the cover image blending color, change the RGB values in this snippet to match your new background color:

.notion-header__cover:after {
      background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(251, 252, 255, 1) 98%)!important;
  }

Cover image behind page content

By default, cover images position as they would in Notion, (above the page content) except for the home page. The homepage cover is set to position behind the page content.

Reset the homepage cover position so it goes above page content:

#page-index .notion-header__cover.has-cover {
    position: static!important;
    max-height: 30vh!important;
    height: 30vh!important;
    margin-top: 0px!important;
}

Set cover image to go behind the page content on all pages

.notion-header__cover.has-cover {
      position: absolute!important;
      width: 100%!important;
      top: 0!important;
      margin-top: -20px!important;
      height: 100vh!important;
      max-height: 100vh!important;
      z-index: -2!important;
  }

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