Table of contents

• 1. Getting Started
• Installing Hyper
• Choosing a theme
• 2. Updating Links
• Adding a link to an external page (URL)
• Adding a link to an internal page (In Notion)
• 3. Customizing Hyper
• Changing the background
• Changing the font
• Adding a navbar/footer
• Adding 'buy me a coffee' widget
• Custom Theme
• Snippets

1. Getting Started

Installing Hyper

1. Sign up with Super and Notion if you haven't already
2. Duplicate this Notion page to your own Notion workspace.
3. Create a new site using Super using the Notion web URL of the newly duplicated Notion page (Learn how here)
4. Then proceed to choose theme below ↓

Choosing a theme

Head to your Super site settings and click into the 'Code' page. In the 'Head' tab, then simply copy and paste a snippet from a theme below into the box.

2. Updating Links

Adding a link to an external page (URL)

1. Add a new page/item to the Links database
2. Make sure to include a URL in the super:Link property

Adding a link to an internal page (In Notion)

1. Add a new page/item to the Links list
2. Add content inside the page
3. Do not include a URL in the super:Link property.

3. Customizing Hyper

Changing the background

1. You can change the background image by uploading a cover image to your Notion page or…
2. If you want to set a solid color, use the following snippet in the ‘Code’ page and in the ‘CSS’ tab and change the HEX code accordingly.
Copy

:root {
	--color-bg-default: #f2f2f2 !important;
}

Changing the font

1. Head to your Super site settings
2. Click into the 'Design' page then into ‘Typography’
3. Choose a Custom Font

Adding a navbar/footer

1. Open your Super site
2. Click into the ‘Navbar’ page, choose a navbar and customize it to your needs
3. Repeat with the ‘Footer’ page.
4. If your text color is hard to read against the background, go into the ‘Design’ page and then into the ‘Colors’ page, and set the default color mode to ‘Dark’ or ‘Light’ depending on your setup.

Adding 'buy me a coffee' widget

Custom Theme

Snippets

For extra customisability, you can include the snippets below in your site settings > Code > CSS tab

Hide link Icons

To hide page/link Icons use the snippet below

.notion-property__title__icon-wrapper {
	display: none!important;
}

Hide Notion page Icon

To hide the Notion page Icon use the snippet below

.notion-header__icon-wrapper{
    display: none!important;
}

.notion-header__content.no-cover.has-icon .notion-header__title-wrapper {
    margin-top: 0px!important;
}