Creating a siteSite pagesHow Super worksSite optionsCustom domainSite theme
Sign in
Creating a siteSite pagesHow Super worksSite optionsCustom domainSite themeSEO optionsAdditional featuresExtensionsCode snippetsCustom codeCreating a templateCompatible blocksNotion colorsSuper CSS Classes
Code Snippets

Code Snippets

Code Snippets

Here is a selection of CSS code snippets for quick and easy customization, head into your site editor and simply add the code snippets below in the CSS tab on the "Code" page.
Using a code snippet on a Super site
Using a code snippet on a Super site

Layout

Hide the Notion header (page title, cover and icon)

/* Remove Notion Header (Page Title, Cover and Icon)*/
.notion-header {
    display: none!important;
}

.super-content {
    padding-top: 60px!important; /* You can change this number */ 
}

Change page width/max width

If you want to change the width of the content on your Super site, use the snippet below. If you want to make your page full width, you can set the 'Full Width' option on Notion in your page settings.

/* Change the max width of the page content */
:root {
    --max-width: 990px!important;
}

Callouts

Hiding a callout icon

Sometimes you might want to use a callout block without an Icon. Upload this empty transparent png image file as the callout icon

transparent.png0.2KB

Links/Buttons

Turn callout blocks with a link into a button

This snippet will only affect callout blocks with one line of text that is a link. It will make the link fill the width and height of the callout turning it into a button so the entire block is clickable rather than just the text.

/* Turn a single line callout block into a button (Entire block is clickable) */
 .notion-callout { 
  position: relative!important;
}

.notion-callout .notion-callout__content:first-of-type > .notion-semantic-string span .notion-link {
  position: absolute!important;
  height: 100%!important;
  width: 100%!important;
  top: 0!important;
  left: 0!important;
  right: 0!important;
  bottom: 0!important;
  padding: var(--callout-padding)!important;
  padding-left: 50px!important;
  border: none!important;
}

Change the border radius (rounding) of the Super Navbar Call to action

/* Set the border radius of the Super navbar call to action button */
.super-navbar__cta {
  border-radius: 50px!important;
}

Colors

In order to use the snippets below, replace the HEX codes with a custom color of your choice. You can use this tool by Mozilla to pick a color.

Change default text color

This snippet modifies the main text color on your page.

/* Change default text color */
:root {
	--color-text-default: #2b2b2b!important;
}

Change default background color

This snippet modifies the main background color on your page.

/* Change default background color */
:root {
	--color-bg-default: #eeeeee!important;
}

Change Notion text colors

This snippet modifies the colors in Notion when you choose a text color for a block.

/* Change Notion text colors */
:root {
  --color-text-blue: #2081e2!important;
  --color-text-red: #e2a79e!important;
  --color-text-green: #115e67!important;
  --color-text-pink: #fbbfe5!important;
  --color-text-yellow: #ffd140!important;
  --color-text-orange: #fba067!important;
  --color-text-purple: #80379c!important;
  --color-text-gray: #2b2b2b!important;
  --color-text-brown: #404040!important;
}

Change Notion block background colors

This snippet modifies the colors in Notion when you choose a background color for a block.

/* Change Notion background colors */
:root {
  --color-bg-blue-light: #2081e2!important;
  --color-bg-red-light: #e2a79e!important;
  --color-bg-green-light: #115e67!important;
  --color-bg-pink-light: #fbbfe5!important;
  --color-bg-yellow-light: #ffd140!important;
  --color-bg-orange-light: #fba067!important;
  --color-bg-purple-light: #80379c!important;
  --color-bg-gray-light: #2b2b2b!important;
  --color-bg-brown-light: #404040!important;
}

← Previous

Extensions

Next →

Custom Code