Logo
  • news
  • talks
  • show
  • forum
circulate

Customizing Narrative

Customizing the font

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

Changing button colors

The button colors are set using the navbar cta button colors, you can change this in your site settings > Navbar.

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

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

Logo

news

talks

show

forum

Partner

Impressum & Datenschutz

Think Circular.

YouTubeLinkedInInstagramThreadsXBlueskyPinterest
: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;
}