Getting started

Creating a site

Site pages

How Super works

Customize your site

Site options

Custom domain

Site design

SEO options

Manual Publishing

Additional Features

Super Analytics

Extensions

Code Snippets

Using a template

Advanced

Custom code

Creating a template

Template Starter Kit

Template Guidelines

Cloudflare proxy

Reference

Compatible blocks

Notion colors

Super CSS Classes

Product Roadmap

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.

Image lightbox

Make images open in a lightbox on click, view our guide here.

Database filter

Add filtering/view picker options to your databases, view our guide here.

Layout

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

You no longer require custom code to hide the Notion header, simply head into your Site > Design > Layout > Disable Notion Header

Change page width/max width

You no longer require custom code to change the width of your page content, simply head into your Site > Design > Layout

Callouts

Hiding a callout icon

You no longer need custom code to hide a callout icon, you can do this in your Site > Design > Blocks page.

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

You no longer require custom code to change colors on your site, simply head into your Site > Design > Colors page!

On this page

• Code Snippets
• Image lightbox
• Database filter
• 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