Welcome 👋

Thank you so much for purchasing this template. It means a lot! I have put a lot of effort into making sure this page includes all the information you need.

Follow the ‘Getting started’ steps below to get up and running. If you have any issues please don’t hesitate to get in touch.

Thanks, Josh 🎉 Check out the table of contents to the right for easy navigation →

Welcome 👋
Getting Started
Adding Analytics
Managing Databases
Adding a button
Style variables
Adding forms to your site
FAQ
Support and Help

Getting Started

Sign up with Super and Notion if you haven't already
Click the 'Duplicate' button in the downloadable PDF to open the Notion page and then duplicate it to your own Notion workspace.
Create a new site using Super using a public link newly duplicated Notion page (learn how here)
Open the Settings page for your super site (Cog icon) and click into the Code page.
In the 'Head' tab, copy and paste the code below into the code box.

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

If you want your site layout to look like my personal site (full-width view and sidebar on the left) use this code instead:

<link href="https://joshmillgate.github.io/diem/style-jm.min.css" rel="stylesheet" />

Next in your Settings page click into the ‘navbar’ page. From here choose the ‘Simple’ type
Once you’ve edited the contents of your site, you can come back to the Navbar later to add your page links.
Then go back to the main site and into the ‘Footer’ page, choose the style ‘Corners’ then customize it until you are happy.
Finally, head into the ‘Options’ page in your Super site settings and enable ‘Database Views’ and optionally, disable ‘Page properties’ to disable properties on blog posts and project paegs.
Then you can also enable the dark/light toggle button inside ‘Options’ and enable ‘Theme toggle’. Read here to make your logo toggle with dark mode too.
That's it! Your website should now be up and running and you should see the template styles applied immediately in the super preview.

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.

Managing Databases

This template is designed in a way that leaves it to you to choose how you want to manage databases. The two most common ways to manage databases are:

Have one main database for each content type e.g. ‘Posts’, ‘Projects’, and so on and then use database views and filters to choose which content to show
Have a ‘master’ content database and keep everything in one place, and show content throughout your site using filters and properties like ‘content types’.

Neither approach is best, just play around in Notion and use what works best for you. Just make sure to tidy up and organise your page URLs in Super > Pages afterwards.

💡

Learn more about database views on Notions official help page

Adding a button

Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.

Style variables

If you want to customise anything on this template, you can do so by pasting the following snippet into your site settings > Code > CSS and tweaking the values

‣

Reveal snippet

:root {
	  /* DATABASES */
    --collection-card-content-padding: 16px !important;
    --collection-card-border-radii: 12px !important;
    --collection-card-gap: 16px !important;
    --collection-card-cover-height-large: 380px !important;
    --collection-card-icon-display: none !important;
    --collection-card-title-size: 1.1rem !important;
    --callout-border-radii: 8px !important;
		/* IMAGES */
    --image-border-radii: 8px !important;
    /* COLORS */
    --header-dots: #E1E1E1; 
    --color-text-gray: #767572 !important;
    --primary-color: #F46E6F !important;
    --secondary-bg: #F8F8F8 !important;
    --color-text-default: #65635C;
    --body-text-default: var(--color-text-default) !important;
    --heading-text-default: #3D3C35 !important;
    --color-text-default-light: #55534B !important;
    --color-bg-default: #FFFFFF !important;
    --color-border-default: #EFEFEF !important;
    --color-ui-hover-bg: #efefef !important;
    --color-card-bg: #ffffff !important;
    --color-card-bg-hover: #FCFCFC !important;
    --color-calendar-weekend-bg: #f7f6f3 !important;
    --color-checkbox-bg: #2EAADC !important;
    --color-code-bg: #F8F8F8 !important;
    --color-checkbox-bg: #000 !important;
    --link-text-color: #000 !important;
    /*CTA BUTTON */
    --cta-border-radii: 40px !important;
    --cta-bg-color: #F8F8F8 !important;
    --cta-bg-hover-color: #111 !important;
    --cta-text-color: #262329 !important;
    --cta-text-hover-color: #ffffff !important;
    --color-bg-gray-light: #F8F8F8 !important;
    /*SCROLLBARS */
    --scrollbar-background-color: #FFFFFF !important;
    --scrollbar-thumb-color: #EEEEEE !important;
    --scrollbar-border-color: #FFFFFF !important;
    /* LAYOUT */
		--layout-border: 1px !important;
    --container-width: 800px !important;
    --cover-max-height: 290px !important;
}

Adding forms to your site

If you want to add forms to your site, you can use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database. It’s super easy to use and I would highly recommend.

FAQ

‣

How can I change the style of this template even more?

You will need to know basic CSS code to make more changes, check out Super’s docs page for a reference on the CSS classes that Super uses.

‣

Can I get some help with something specific?

Sure, drop me an email at hello@joshmillgate.co.uk

‣

Do you have other templates?

yep, check out these links:

Cosmos Cluster Sentience Purpose

‣

Can I get a discount code for your other templates?

Sure, use this code at checkout on any of my templates: QZODA3NA

Support and Help

If you have any issues with this template please get in touch via Twitter or by email at hello@joshmillgate.co.uk

Setup