Custom code

Custom code

For people who have some basic web development skills or need to add third-party scripts, Super offers advanced and powerful customization through custom code snippets.

Overview

With custom code you can add head tags to a page like third-party scripts, style it to look exactly how you want, and even add elements like navbars and footers to your site.

Custom code can be added to your entire site or on specific pages. To add code for the entire site click the "Edit code" button in the "Options" page.

image

Adding code to an individual page can be done by clicking the code icon on a page row in the "Pages" page or click "Edit custom code" when hovering over the ellipsis on a page row.

image

Super utilizes the code editor used in Visual Studio Code to provide syntax highlighting and a familiar environment to hack away at your site.

Styling

Any default styles on your page can be overridden with custom CSS. The class names for elements on your site were intentionally designed to be easy to understand and override. Learn more about what CSS classes you can use below.

The colors of your site are also customizable through a set of CSS variables. You can find a list of default colors we use with their corresponding CSS variables here.

CSS Classes (wip)

NameHTML ElementCSS Color VariableCSS ClassImagesTags
Text
<p>
--color-text-default
.notion-text__content
Basic blocks
Page
<div>
.notion-page
Basic blocks
.notion-page__icon
.notion-page__title
To-do
<div>
--color-text-default
.notion-to-do
Basic blocks
.notion-to-do__content
.notion-to-do__icon
.notion-checkbox
.notion-checkbox.checked
.notion-to-do__title
Headings
<p>
h1
Basic blocks
h2
h3
p
Bullet List
<div>
Basic blocks
Numbered List
<div>
Basic blocks
Toggle List
<div>
.notion-toggle
Basic blocks
Quote
<div>
.notion-quote
Basic blocks
Divider
<div>
.notion-divider
Basic blocks
Callout
<div>
.notion-callout
Basic blocks
.notion-callout__icon
Table
.notion-collection-table
Database
Board
Gallery
.notion-collection-gallery
.notion-collection__header
.notion-collection-card
.notion-collection-card__content
.notion-collection-card__cover
.notion-collection inline
List
Calendar
Timeline
Image
.notion-image
.notion-image img
Main Page
.notion-navbar
.notion-header__cover
.notion-header
Table of Contents
.notion-table-of-contents
.notion-table-of-contents__item
Embedded Content
.notion-embed

Progressive web app

The Super dashboard is fully responsive, meaning it works seamlessly on mobile, tablet, and desktop. It's also optimized to work as a progressive web app (PWA).

Installing on iOS

  1. Visit the Super dashboard on your iPhone or iPad in Safari
  2. Press the share icon at the bottom of Safari
  3. Press "Add to Home Screen". Below is a view of how this could look on iOS
  4. image
  5. Wait a couple seconds for all assets to load onto your phone or tablet's home screen as a bookmarked web app.

Creating a site
Creating a site
Adding a domain
Adding a domain
Configuring a site
Configuring a site
Site pages
Site pages
SEO options
SEO options
Site theme
Site theme
Custom code
Custom code
Extensions
Extensions
Additional Features
Additional Features
Compatible blocks
Compatible blocks
Notion Colors
Notion Colors

https://super.so

© Super Publishing Co — View this site in Notion ⚡️

Copied
Made with Super