⚡

Getting Started with Hyper

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.

‣
Indigo Theme 🪁

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/indigo/indigo.min.css"/>
‣
Sushi Theme 🍱

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/sushi/sushi.min.css"/>
‣
Minimalist Theme ⚫️

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/minimalist/minimalist.min.css"/>
‣
Party Theme 🎉

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/party/party.min.css"/>
‣
Dark Theme 🌙

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/dark/dark.min.css"/>
‣
Neumorphic Theme 🏳

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/neumorphic/neumorphic.min.css"/>
‣
Bumble Theme 🐝

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/bumble/bumble.min.css"/>
‣
Clean Theme 👟

View a demo here →

<link rel="stylesheet" href="https://sites.super.so/hyper/v2/themes/clean/clean.min.css"/>

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.
    3. :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

‣
View video

Custom Theme

‣
If you want to have a go at creating your own theme, paste the code snippet inside this toggle into your Super site settings > code > CSS tab and modify the values.
:root {
    /*Page background gradient or image*/
    --body-background: linear-gradient(163deg, rgba(211, 167, 255, 1) 0%, rgba(255, 174, 225, 1) 100%)!important;
		/*Page background image*/
		--body-background: url('URLHERE')!important;
		/*Page background color*/
		--body-background: #2b2b2b!important;
    /*Text and headings color*/
    --color-text-default: #ffffff!important;
    /*Page width*/
    --max-width: 760px!important;
    /*Link padding*/
    --link-padding: 15px!important;
    /*Link border radius*/
    --link-border-radius: 10px!important;
    /*Link background color*/
    --link-background: #ffffff!important;
    /*Link background color on hover*/
    --link-hover-background: #ffffff!important;
    /*Link backdrop filter*/
    --link-backdrop-filter: 0!important;
    /*Link border*/
    --link-border: 0!important;
    /*Link text color*/
    --link-color: #2b2b2b!important;
    /*Link shadow*/
    --link-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0) 10px 10px!important;
    /*Link shadow on hover*/
    --link-hover-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px!important;
    /*Link translate on hover*/
    --link-hover-translate: translate(-6px, -8px)!important;
    /*Social icon color, use CSS filter*/
    --social-icons-filter: grayscale(100%) brightness(0%) invert(100%)contrast(100%)!important;
    /*Social icon size*/
		--collection-card-cover-size-small: 26px!important;
		/*Footer Link underline color*/
    --color-text-default-light: #ffffff!important;
}

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;
}
SuperMade with Super