Welcome

Thank you for purchasing this theme and template. The installation guide is just a scroll down away.

Contact me

Wherever possible, please reach out to me first for template-related support before reaching out to the Super team. They already got a lot on their hands. Note that I’m currently at a GMT+8 timezone, so I might be asleep when I got your message, but I’ll make sure to reply to you as soon as I can.

• DM me on Twitter (@yusufgiftworks)
• Email me at [email protected]

Extras

Here are some products and services that might be of use to you when creating your sites:

• Illustrations and icons
  • Craftwork Design
  • Streamline
• Tutorials
  • How to create a membership site with Notion+Super

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2b9b5ebe-ee2a-43f3-98ad-a68193afaca5/Layout.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2b9b5ebe-ee2a-43f3-98ad-a68193afaca5/Layout.svg" width="40px" /> INSTALLATION GUIDE

• Open the page and duplicate the template to your own Notion workspace.

  Portal Template

• Select a theme, open the toggle, and copy the line of code.

  • Portal light theme
  • Portal dark theme
  • Portal system theme — alternates between light and dark themes depending on your device's system theme settings

• Head over to your site on Super and click Code to enter the 'Global site code' page.

• Paste the code into the Head section of your page on Super. Then, click save.

• Also, check that Super > Options > Page properties are enabled.

• Done!

• Make sure to check out the HOW TO USE section below. </aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9f9ac23b-bbcb-49ec-a8c4-3904cf6347c1/Layout.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9f9ac23b-bbcb-49ec-a8c4-3904cf6347c1/Layout.svg" width="40px" /> HOW TO USE

Blocks

All Notion blocks that Super supports can be used. However, there are a couple of blocks that I have modified to fit the design of Portal. I'll note them here, so please be aware of it, okay?

Here are the blocks that I have modified:

Inline Code (By selecting a text and pressing ⌘ + E or CTRL + E)

• Using inline code on a text will render a special text.

• Toggle block with Brown background

• Use this block to hide pages or add hidden notes. For example, if you prefer to use underlined links instead of Notion's document icon with link (newpage), you can use this block to hide them.

  Hide pages like this one ⤵️

  newpage

Quote block with Brown background

• Use this block to create buttons. To use colored buttons, highlight the quote content and select a color.

Quote block with Gray background

• Use this block to create a small navigation bar on the left side of the page. Perfect as a back or home link on a post page.

  View demo →

<aside> 💡 Callout block with Gray background

</aside>

• This block creates a sidebar on the right side of the page. In the template, a table of contents block was added to create the timeline view.
• Texts in this block are converted into special text.
• Callout icon in this block is hidden.

<aside> 💡 Callout block with Brown background

</aside>

• This block creates a sidebar on the left side of the page. In the template, this block was used to create the user profile.
• Callout icon in this block is hidden.

<aside> 💡 Callout block with Color

</aside>

• This block creates a callout block with colored dotted lines. The text inside the block won't be colored, you can selectively do this instead.

And that's it. I didn't modify that many blocks, so you can use all the Notion blocks as you normally would.

Page Title

• The page's Title is hidden by default to fit Portal's design. If you like to show it, use the code below:

  .notion-header__content {
    display: block !important;
  }
  

• In a post (database) page, like this one, the page's Title is hidden and replaced with a database's text property named 'Title'. </aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/49ebbe02-fd3f-49c1-97a2-bff3a90a18f9/Lightbulb.svg" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/49ebbe02-fd3f-49c1-97a2-bff3a90a18f9/Lightbulb.svg" width="40px" /> TIPS & EXTRAS

Keyboard shortcuts

• Creating keyboard shortcuts requires coding, but it's more of copy and pasting than writing scripts. If you follow along the instructions here, it should be relatively easy.
• This is an example of a code script you need to add to the 'Body' section of your site's page or site's global site code.
  • JavaScript code

Redirecting full database pages

• Notion's full database page doesn't allow us to add blocks inside them, limiting how we can customize the page.

• A roundabout way is to create a new normal page and create an inline database. This way, we can customize the page while still have a database block in it.

• Since the database page still lives on our site and has a working URL, we want visitors who visit the full database page to be redirected to the new page with an inline database that we created.

  To do this, insert this code in the 'head' section of the database page's code page in Super (replace the URL with your database page's URL):

  <script>
    window.location.href = "<https://yourwebsite.com/posts>";
  </script>
  

</aside>