Getting Started

Getting Started

1. Duplicate the template to Notion

The first step in getting started is to duplicate the template content into your own Notion workspace. Click the button below and then click ‘Duplicate’ at the top right.

Duplicate to Notion

2. Create an upgraded site on Super

Next, create a site on Super with the Notion page you just duplicated. Learn how here.

Note: In order to apply a custom template to your site you will need an upgraded site.

3. Apply the custom template

Then, open your new site settings, navigate to the ‘Code’ page and inside the ‘Head’ tab, paste the following snippet. You might notice the design doesn’t look exactly the same as the demo, we’ll fix that in the next step.

<link rel="stylesheet" href="https://sites.super.so/warp/style.css">

4. Apply the theme settings

Next, we’ll enable the Super theme so you can customize it as you like!

  1. Click this link to duplicate the Warp theme to your Super account
  2. Go back to the dashboard and into your site, in the ‘Design’ page - apply the Warp theme.
💡
ℹ️  There is currently a bug that means callout icons are still appearing after applying the theme, make sure to go into your Theme > Blocks > disable callout icons whilst we work on a fix.

5. Customize your site

Next you can add more features and customize your site to your liking.

  1. Head into the ‘Navbar’ page to add and customize a navbar.
  2. Head into the ‘Footer’ page to add and customize a footer.
  3. Head into the ‘Options’ page to enable/disable:
    1. Page properties (Shows database properties on database pages)
    2. Database view switcher (Enable switch between database views)
    3. Theme toggle (Enables a light/dark toggle on your navbar)

Thats it! Then just update the content in Notion 🎉

Further customization

You can customize this template further using Super’s built in design options. Please note, because this is a custom template which overrides certain values, some of the options inside your site design will not work as expected.

For the theme to match the demo site, you might want to set Dark mode as your default color mode, you can do that by going into Themes > Warp > Colors > Set the Default color mode at the top to ‘Dark’.

Changing the primary color

By default, the primary color of the site is determined by the navbar button background color. You can change this in the Themes > Warp > Colors > Navbar page.

You can override this by using the following code snippet

Paste the snippet in your Site > Code > CSS tab. Replace the hex code with a color of your choice.

:root {
  --primary-color: #392C72!important;
}

Changing images for light/dark mode

Whilst we are working on a native solution to creating dark and light mode images and logos on your site, there are some experimental solutions you can try on your site. To learn more about how you can make your navbar logo change with light and dark mode, read this post on our community here.

💡
Tip: gray icons and illustrations look great on light and dark mode!

FAQ

How can I show the header at the top of my home page?

In your Site > Code > CSS tab, paste the following snippet:

#page-index .notion-header {
  display: block !important;
}
How do I add a button to my page?
  1. Write some text
  2. Add a link
  3. Make it bold
  4. Done! It’ll appear as a button on your Super site
How do I change the button colors?

Your button colors are made to match your navbar colors, you can change them by going into Themes > Warp > Colors > Navbar

Can I change my callout blocks to left align?

In this template, callout blocks have their content set to center align. Change it back to default using the following snippet in your site > code > CSS tab.

.notion-callout {
  text-align: left !important;
}
I know some CSS! Can I customize the template further?

Sure, you can paste the following snippet in your Site > Code > CSS tab and modify these values to customize the template some more:

/* Main variables */
:root {
  --primary-color: var(--navbar-button-background-color)!important;

  /* CTA button styles */
  --cta-padding: 8px 12px!important;
  --cta-border-radii: 7px!important;
  --cta-bg-color: var(--primary-color)!important;
  --cta-text-color: var(--navbar-button-text-color)!important;
  
  /* Database view switcher */
  /* Active colors */
  --picker-active-bg-color: var(--primary-color)!important;
  --picker-active-text-color: var(--color-text-default)!important;
  --picker-active-border-color: var(--primary-color)!important;
    /* Default colors */
  --picker-border-color: var(--color-border-default)!important;
  --picker-text-color: var(--color-text-default)!important;
  --picker-border-radius: 8px!important;

  /*Miscelaneous*/
  --image-border-radii: 1px!important;
  --collection-card-bg-color: #F7F6F5;
  --navbar-background-color: #ffffff80 !important;
}

/* Dark mode specific variables */
.theme-dark {
  --navbar-background-color: #19191980 !important;
  --color-card-bg: #191919!important;
  --color-card-bg-hover: #1B1B1B!important;
  --collection-card-bg-color: #111111;
}