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

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.

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