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

Para que un enlace se convierta en botón, debe ser un único bloque de texto en negrita en su propia línea con un enlace. Puede personalizar la apariencia del botón utilizando el siguiente fragmento de código. Para cambiarlo, dirígete a la configuración de tu sitio (icono de engranaje), a la página 'Código' y dentro de la pestaña 'CSS', simplemente pega el fragmento de código de abajo y actualiza los valores a tu gusto.

Translated with DeepL

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

Code snippets

Las siguientes opciones de personalización requieren que pegue los siguientes fragmentos en la configuración de su sitio > Código > pestaña CSS. Deberá modificar los valores del código para realizar los cambios.

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 [email protected]