LogoZiad Ashraf

Notion Sup

Notion
2024

Notion Super.so CSS

Notion

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:
    • css
    <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.

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

    Text Align

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

    Making Gallery items unclickable

    css
    .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.

    plain text
    .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

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

    Themes

    html
    <script src="https://gumroad.com/js/gumroad.js"></script><link rel="stylesheet" href="https://sites.super.so/supply-v2/style.css">
    html
    <script src="https://gumroad.com/js/gumroad.js"></script><link rel="stylesheet" href="https://sites.super.so/supply-v2/style.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/aether/style.css"/>
    html
    <link rel="stylesheet" href="https://sites.super.so/context/style-v2.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/slite/style.css">
    html
    1. <link rel="stylesheet" href="https://sites.super.so/split/style.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/altar/style.css"/>
    html
    <link rel="stylesheet" href="https://sites.super.so/warp/style.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/spotlight/styles.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/ascent/css/style.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/medium/style.css">
    html
    <link rel="stylesheet" href="https://sites.super.so/narrative/css/style.css">
    html
    /* 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;
}