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

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.

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!

← Previous

Extensions

Using a template

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