Welcome to Cluster 🥳

Thank you for choosing Cluster as your new documentation template. Everything you need to get started is included below 👇

Getting Started

1. Sign up with Super and Notion if you haven't already
2. Open the Notion template provided in the downloadable PDF and duplicate it to your own Notion workspace.
3. Create a new site using Super using a public link newly duplicated Notion page (Instructional video)
4. Open the super site and click into the Code page.
5. In the 'Head' tab, copy and paste the code below into the code box.
Copy

<link href="https://joshmillgate.github.io/cluster/v2/style.css" rel="stylesheet" />

Next steps

1. Next, I recommend updating the pages and content for your site in Notion
2. Then, when your site content is ready, In Super go to the ‘Pages’ page and check all your pages and their URLs are good to go. Click the refresh button on the Pages page to pull in any new pages.
3. Then head into the Navigation page. From here you can enable a sidebar, navbar and footer and begin adding your page links and logos.
4. That's it! If you have any issues get in touch, I’d be happy to help.

Migrating to the new Super Sidebar

Here’s a video guide on how to update the your site to use the new Sidebar.

In Notion

1. Create a toggle block at the top of your homepage and give it a brown background.
2. Move your pages from the synced block into the new toggle block
3. Delete and unsync the synced block from inside the old sidebar
4. Remove the left hand column by deleting any empty spaces and text blocks

In Super

1. In the code page, in the head tab replace the Aether stylesheet with the new one below
Copy

<link href="https://joshmillgate.github.io/cluster/v2/style.css" rel="stylesheet" />

2. In the body tab, remove the script code. We no longer need it.
3. Finally, head into the Navigation page, enable the sidebar and add your menu items.

Adding Analytics

Adding analytics to your site is an incredible way to get more insight about your users and your brand. Google analytics is often cited as being an unfriendly option and so I would recommend using Fathom instead, they are a great company that do not compromise privacy for data. Alternatively you can use Super’s built in analytics.

Changing the primary colour

1. In Super open Code page for your site.
2. On the tabs at the top click 'CSS' and simply copy and paste the code below into the text box.
Copy

:root {
  --color-primary: var(--color-green) !important;
}`

3. Replace —color-green with any of the options below:
Copy

--color-gray
--color-brown
--color-orange
--color-yellow
--color-green
--color-blue
--color-purple
--color-pink
--color-red

4. Save your changes and reload your site.

Adding your own custom colour

In order to add your own brand colour there are a few extra steps.

1. In order to add your own brand colour to Cluster as well as including the custom colour as your primary colour, you must overwrite one of the existing colours in Notion.
2. For example, if you want to use a vibrant blue colour like the hex code #7dd17d below, we will now not only assign it to the '—color-primary' variable but we will also assign it to the '—color-blue' variable so we can use it anywhere in our Notion site.
3. Be sure to overwrite the colour nearest to your brand colour.
Copy

:root {
  --color-primary: #7dd1d8 !important;	
	--color-blue: #7dd1d8 !important;
}

Using Cluster's blocks

This video explains how to create the unique blocks in Cluster. As a general guide I recommend duplicating items from the 'Blocks' Page and using them throughout the site.

• To create a bordered subheading use '/quote'
• To create a button use a '/callout' with a default background colour and a link on a single line of text
• To create a 'icon cards block' use '/gallery' with properties > card size > small
• To create a 'cards block' use use '/gallery' with properties > card size > medium
• To create a 'Call to action text block' use '/callout' with a background colour, a first line of bold text, a second line of standard text and a third line with linked text. Use Shift+Enter/Shift+Return to create a new line.
• To create a 'Message block', just add a background colour to the text block.

Changing the font

1. Open your site in Super and head over to the site settings.
2. Click into the 'Design' page then into ‘Typography’
3. Choose a font
4. 🥳

Showing page icons

If you want to show page icons you can use this snippet

.notion-page__icon {
	display: flex!important;
}

Removing links from tables

If you want to remove links from tables so that individual pages are not clickable then you can add the following code snippet to the CSS tab on the code page. Please note this will affect all tables with the default view.

From Default view tables

.notion-collection-table__cell.title > a {
  pointer-events: none!important;
	cursor: default!important;
}

.notion-collection-table.wrap-cells .notion-collection-table__cell.title .notion-semantic-string > span {
 border-bottom: none!important;
}

From gallery view tables

.notion-collection-card .notion-collection-card__anchor {
  pointer-events: none!important;
}

.notion-collection-card {
   cursor: default!important;
}

Setting table text to left align

By default table text is aligned centrally. If you want to change this to left align, please paste the following snippet into the Code page > CSS tab

td, th {
  text-align: left !important;
}

Change the max-width of the center content column

By default the center content column has a max-width of 750px. If you want to change this, please paste the following snippet into the Code page > CSS tab and adjust the values accordingly.

.notion-root > .notion-column-list > .notion-column:nth-child(1){
	max-width: 750px !important;
}

You can also modify the padding of this column using the snippet below.

.notion-root > .notion-column-list > .notion-column:nth-child(1){
		padding-left: 40px !important;
    padding-right: 40px !important;
}

Re-enable the default Notion title and cover

By default the default Notion heder is hiden. If you want to enable it, please paste the following snippet into the Code page > CSS tab.

.notion-header{
	display: block!important;
	border-bottom: 1px solid var(--color-border-default)!important;
  margin-bottom: 0px!important;
  padding-bottom: 20px!important;
}

Feedback, issues and support

If you find any bugs, have suggestions for improvement or need some help with Cluster, please get in touch by emailing me at: hello@joshmillgate.co.uk

Want your own custom Super theme?

I'm taking commissions from anyone that wants their own bespoke template for Super and Notion. Get in touch! You can see more examples of my work on my website and stay in touch by following me on twitter.

On this page

• Welcome to Cluster 🥳
• Getting Started
• Next steps
• Migrating to the new Super Sidebar
• In Notion
• In Super
• Adding Analytics
• Changing the primary colour
• Adding your own custom colour
• Using Cluster's blocks
• Changing the font
• Showing page icons
• Removing links from tables
• Setting table text to left align
• Change the max-width of the center content column
• Re-enable the default Notion title and cover
• Feedback, issues and support
• Want your own custom Super theme?