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
: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