Customizing Narrative

Customizing the font

Simply choose a different font in the Site > Theme page.

Call to action button

Narrative has an additional feature that lets you turn a link into a call to action button, check out the example below. By default the colors are set using the navbar cta button colors in your navbar settings.

Call to action button

For a link to become a button it must be a single bold text block on its own line with a link. You can customise the appearance of the button using the code snippet below. To change it, head to your site settings (cog icon), into the 'Code' page and inside the 'CSS' tab, simply paste the snippet below and update the values to your liking.

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: #1CA0F2!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!important;
}

Code snippets

The following customization options require you to paste the snippets below into your site settings > Code > CSS tab. You will need to modify the values in the code to make changes.

Changing callout icon size

.notion-callout__icon span {
    width: 42px !important;
    height: 42px !important;
}

Re-enable page header on homepage

#page-index .notion-header {
    display: block!important;
}

Customize all theme options

Below is a list of all the themes variables. To customize, simply paste the snippet below into your 

:root {
    /* Style options */
    --callout-padding: 16px!important;
    --callout-border-radii: 8px!important;
    --column-spacing: 32px!important;
    --layout-max-width: 1000px!important;
    --color-border-default: #E7E6E6!important;
    --collection-card-gap: 24px!important;
    --header-cover-height: 45vh!important;
    --cta-border-radii: 7px!important;
    --image-border-radii: 8px!important;
    --db-title-spacing: -0.5px!important;
    --color-card-bg: #F8F8F8!important;
    --color-card-bg-hover: #f4f4f4!important;
    --collection-card-cover-height-small: 160px!important;
    --quote-background: #e2edff!important;
    /* Database view picker options */
    /* Active colors */
    --picker-active-bg-color: #f0f0f0!important; 
    --picker-active-text-color: var(--color-text-default)!important;
    --picker-active-border-color: #f0f0f0!important; 
    /* Default colors */
    --picker-border-color: rgb(233, 233, 233)!important;
    --picker-text-color: rgb(70, 70, 70)!important;
    --picker-border-radius: 50px!important;
    /* Hover colors */
    --picker-hover-bg-color: #f0f0f0!important; 
    --picker-hover-text-color: var(--color-text-default)!important;
    --picker-hover-border-color: #f0f0f0!important; 
    --collection-card-cover-size-small: 140px!important;
}

For any other help and Support, reach out via the Super dashboard or by email hello@super.so