Getting started
Customize your site
Advanced
Reference
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.

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;
}
.max-width {
max-width: var(--max-width) !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
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 .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: 15px!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;
}
Change default background color
This snippet modifies the main background color on your page.
/* Change default background color */
:root {
--color-bg-default: #eeeeee;
}
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
Next →
On this page
- Code Snippets
- Layout
- Hide the Notion header (page title, cover and icon)
- Change page width/max width
- Callouts
- Hiding a callout icon
- Links/Buttons
- Turn callout blocks with a link into a button
- Change the border radius (rounding) of the Super Navbar Call to action
- Colors
- Change default text color
- Change default background color
- Change Notion text colors
- Change Notion block background colors