Notion Super.so CSS

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

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

.super-footer, .super-navbar__cta {
  background: var(--primary-color)!important;
}

Make your logo change with dark mode

First, make sure your logo is entirely white then add this snippet to your Code > CSS tab:

<script src="https://gumroad.com/js/gumroad.js"></script>
<link rel="stylesheet" href="https://sites.super.so/supply-v2/style.css">

You can override this by using the following code snippet

Paste the snippet in your Site > Code > CSS tab. Replace the hex code with a color of your choice.

:root {
  --primary-color: #392C72!important;
}

Text Align

.notion-callout {
  text-align: left !important;
}

Making Gallery items unclickable

.notion-collection-gallery.small {
    pointer-events: none !important;
}

How to limit or restrict the number of cards shown in a gallery collection

This is a really good tip for showing only recent posts.

.notion-collection-card:nth-child(n+7) {
display: none !important;
}

Changing callout icon size

Copy .notion-callout__icon span { width: 42px!important; height: 42px!important; }

Call to action button

:root {
	--cta-color-text: #FFFFFF!important;
	--cta-color-bg: var(--primary-color)!important;
	--cta-padding: 12px 22px!important;
  --cta-border-radii: 50px!important;
}

Themes

<script src="https://gumroad.com/js/gumroad.js"></script><link rel="stylesheet" href="https://sites.super.so/supply-v2/style.css">

<script src="https://gumroad.com/js/gumroad.js"></script><link rel="stylesheet" href="https://sites.super.so/supply-v2/style.css">

<link rel="stylesheet" href="https://sites.super.so/aether/style.css"/>

<link rel="stylesheet" href="https://sites.super.so/context/style-v2.css">

<link rel="stylesheet" href="https://sites.super.so/slite/style.css">

1. <link rel="stylesheet" href="https://sites.super.so/split/style.css">

<link rel="stylesheet" href="https://sites.super.so/altar/style.css"/>

<link rel="stylesheet" href="https://sites.super.so/warp/style.css">

<link rel="stylesheet" href="https://sites.super.so/spotlight/styles.css">

<link rel="stylesheet" href="https://sites.super.so/ascent/css/style.css">

<link rel="stylesheet" href="https://sites.super.so/medium/style.css">

<link rel="stylesheet" href="https://sites.super.so/narrative/css/style.css">

/* Main variables */
:root {
  --primary-color: var(--navbar-button-background-color)!important;

  /* CTA button styles */
  --cta-padding: 8px 12px!important;
  --cta-border-radii: 7px!important;
  --cta-bg-color: var(--primary-color)!important;
  --cta-text-color: var(--navbar-button-text-color)!important;
  
  /* Database view switcher */
  /* Active colors */
  --picker-active-bg-color: var(--primary-color)!important;
  --picker-active-text-color: var(--color-text-default)!important;
  --picker-active-border-color: var(--primary-color)!important;
    /* Default colors */
  --picker-border-color: var(--color-border-default)!important;
  --picker-text-color: var(--color-text-default)!important;
  --picker-border-radius: 8px!important;

  /*Miscelaneous*/
  --image-border-radii: 1px!important;
  --collection-card-bg-color: #F7F6F5;
  --navbar-background-color: #ffffff80 !important;
}

/* Dark mode specific variables */
.theme-dark {
  --navbar-background-color: #19191980 !important;
  --color-card-bg: #191919!important;
  --color-card-bg-hover: #1B1B1B!important;
  --collection-card-bg-color: #111111;
}