How to install Ult

How to install Ult

Ult Installation Guide

Thank you for purchasing Ult!

Here's a quick guide of how to install Lift theme and start using it with no resistance. Note that you should have both Notion and Super accounts ready. Have Fun!

1. Create a Super site

Duplicate Notion Template:

image

Click Here

Share Your Notion Page and Connect it to Super

Check this video guide from Super Team

2. Install Ult Essentials

image

Paste this code in Site Settings > Code > HTML Head

<link rel="stylesheet" href="https://stfn.co/ult/ult.css">

3. Pick a theme

It will take about 10 minutes to install the theme but every parameter of it would be unlocked for your own cunstomization. Take your time, grab some tea and have fun decorating your new website.

🔥
image

Light

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Dark

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Pastel

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Crisp

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Graphite

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Funk

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Pine

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Arctic

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Cyber

Demo

Duplicate Theme

‣
or Install Manually
🔥
image

Blackout

Demo

Duplicate Theme

‣
or Install Manually
‣
There's also a quick but bulky way to install themes (not recommended)

4 (Optional). Frosted Glass header

To achieve the frosted glass header effect, paste the code below to your Super Site > Code > CSS

‣
Light, Crisp, Arctic Themes
‣
Dark, Charcoal, Blackout
‣
Pine
‣
Pastel
‣
Cyber

5 (Optional). Alternative Cover Style

You can change the cover image style by pasting the code below to your Super Site > Code > CSS

Shaded

image

No code needed, this style comes by default

Fullscreen

image
.notion-header {
  margin: calc(0px - var(--navbar-height) - 2em) auto 0!important;
  max-width: 100%!important;
  box-shadow: none!important;
}

.notion-header img {
  opacity:100%!important;
}

Block

image
/* Header Block*/

.notion-header {
  margin: 0 auto!important;
  max-width: var(--layout-max-width)!important;
  box-shadow: none!important;
  border-radius: var(--border-radii-layout)!important;
  overflow: hidden!important;
  width: calc(100% - var(--column-spacing))!important;
}

.notion-header img {
  opacity:100%!important;
}

CSS

You can get CSS file to see how if works or store on your own hosting

See Template's CSS Code

Feel free to ask any question at hello@stfn.co. Let's be in touch!