Installation process
To set up this template you will need to have an account on Notion and a paid account with Super.so
On Notion
- Duplicate Halcyon Notion page HERE
- Then, at the top right of the Notion page click Duplicate
- If prompted, log in to Notion and choose a workspace
- Then you should see it appear in your Notion Sidebar
Once you’ve got the template in your own Notion workspace you need to get the Notion Share URL so Super can transform it into a website.
- Open the page you just duplicated in Notion
- On the top right corner press Share > Toggle the Share to web button > Copy web link
On Super
- Create a new site and name it
- Paste the link on Notion Page URL section then press Continue.
you will find the design doesn't look the same as the template - don’t freak out, you haven't done anything wrong. Paste the code snippet underneath in the Site Settings > Code > Head Then press ‘Save’
<link rel="stylesheet" href="https://evenbloom.github.io/dist/style.css">
Refresh the page and you’ll see your brand new site!
If you do get stuck, there is a YouTube video on how to setup templates over HERE
Styling Restrictions
TEMPLATE STYLE GUIDE
To add a Bold H1 title
- Highlight the title > H1> Bold (B).
To add a Bold H2 & H3 title
- no need to make it Bold. Select H2 from the dropdown.
To create a Sub Header
- Highlight the title > H1
To add Text
- Highlight the paragraph > select Text
CLIENT WORK SECTION
For the databases in Notion - The Client Work section - the card size needs to stay ‘Large’ in size as shown in your Notion page and the Blog Section needs to stay ‘Small’ in size or it will alter the layout.
CALLOUTS
The Callouts in this template are synced so if you edit it on one page it will show up on another
- Drag across blocks to select content to sync, then copy (cmd/ctrl + C).
- Navigate to another page and paste (cmd/ctrl + V).
- Select Paste and sync. Your content now syncs across pages.
To change the Callout background colour
- On Super - Paste the code snippet underneath in the Site Settings > Code > CSS Then press ‘Save’
you can replace the hex code (#1e3d7b) to any colour you want, here is a hex library that can help you with your colour choice.
.bg-gray-light.notion-callout.notion-callout{
background-color: #1e3d7b !important;
}
Questions you may ask
How do I add a new project?
You can add as many projects to the Client Work section by pressing “+New” and then filling in all the required properties. You can check out the projects there already as a guide/reference to compare or copy.
How do I add a new blog post?
- On Notion to add a new blog post go to “All Blog Posts” located at the bottom of the page Under “Hidden Pages”
- Press on “+New” and fill in all the required properties.
- Tick on ‘Feature’ if you want it to show up on the Home page / Front page
* Only 3 posts can be ticked. If you tick more posts it will affect the layout of the Home page.
How do I add specific styles to buttons and links?
For Buttons
To add the black button style to your content you need to do as follows:
Write the title you want to add to the button > highlight the text and make it Bold (B) > link it to a URL of your choice.
For Links
Type the text of your choice and add an arrow (->) > highlight it and add a link
Navbar - Email Me Button on Super.so
You can link that button to your email by:
Navbar > Call to Action > Click URL > add title
*Before typing your email add ‘mailto:’
How to change the hover colour on buttons and links?
Copy & paste this code to change the background colour of the buttons’ hover state
on Super find Code > under the CSS tab paste the following code
.notion-text p.notion-text__content span.notion-semantic-string span strong a.notion-link:hover{
background:pink !important;
}
.notion-semantic-string .link:hover{
color:pink !important;
}
you can add any colour in place of pink - You can add hex codes (#) if you want to add a specific colour - you can copy the hex code of any colour you like from these example websites https://www.color-hex.com/
How to Disable Page properties?
By default, sites now have ‘page properties’ enabled by default for database pages. To disable find Options on Super’s toolbar on the left hand side > under Page properties make sure it's 'Disabled'.
Other options that you may want
How to remove the Blog section without deleting it from Notion?
Go Super.so Go to Settings > Code > CSS, then copy & paste this code
.notion-collection.inline.collection-d6309c8cebef4cb7b8c744970b459cf0{
display:none !important;
}
//or - if you choose this option any gallery with card size 'small' will not be displayed on your website
.notion-collection-gallery.small{
display:none !important;
}
If you don’t want to add a Blog section to your website, choose this option. This still includes the Blog section in Notion but doesn’t display it on your website so when the time comes to blog just remove that line of code.
Know that you'll find the Blog title and the link to See all blog posts are still there after adding the code above. You will have to remove them yourself and add them at a later time when you are ready to add the blog section to your website.
How to relink to all blog posts when the time comes to display the blog section?
- Highlight the text you want
- Press on link
- Type All Blog Posts
- The page should appear as an option to select
- Select it and you are all set
How to edit my Footer on a new page?
On Super on the left menu, you’ll find Footer - you can add or remove links as you please and be able to add your logo.
Have any questions?
Send your feedback or queries to hello@evenbloom.com