Logo
  • Creating a site
  • Site pages
  • How Super works
  • Site options
  • Custom domain
  • Site theme
  • SEO options
  • Additional features
  • Extensions
  • Code snippets
  • Custom code
  • Creating a template
  • Compatible blocks
  • Notion colors
  • Super CSS Classes
Sign in
Custom code

Custom code

Getting started

Creating a siteCreating a siteSite pagesSite pagesHow Super worksHow Super works

Customize your site

Site optionsSite optionsCustom domainCustom domainSite designSite designSEO optionsSEO optionsManual PublishingManual PublishingAdditional FeaturesAdditional FeaturesSuper AnalyticsSuper AnalyticsExtensionsExtensionsCode SnippetsCode SnippetsUsing a templateUsing a template

Advanced

Custom codeCustom codeCreating a templateCreating a templateTemplate Starter KitTemplate Starter KitTemplate GuidelinesTemplate GuidelinesCloudflare proxyCloudflare proxy

Reference

Compatible blocksCompatible blocksNotion colorsNotion colorsSuper CSS ClassesSuper CSS ClassesProduct RoadmapProduct Roadmap

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.

Applying custom code to your entire site

Custom code can be added to your entire site or on specific pages. To add code for the entire site head into your site editor (cog icon) and click into the Code page.

image

Head, Body and CSS

From here you have the option to add code in three tabs, 'Head', 'Body', and 'CSS'.

  • The Head tab is used for adding scripts and other embed code for things like analytics, pop-ups, cookie consents, or chat bubbles.
  • The Body tab is used for adding HTML to the body area of the page. Code will be added to the top of the page.
  • The CSS tab is used for adding CSS code for styling. When placed here in the global code, the CSS will apply to every page.
image

Applying custom code to specific page

Applying code to an individual page can be done by clicking the code icon on a specific page in your site "Pages".

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

Customising your site appearance and adding styles

Any default styles on your page can be overridden with custom CSS in the "Code" page. The class names for elements on your site were intentionally designed to be easy to understand and override. You can view and learn more about all the CSS classes Super sites 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.

To learn more about customising your site's appearance check out our documentation on creating a template here.

💡
Find a list of all the Code Editor keyboard shortcuts here

← Previous

Using a template

Next →

Creating a template

On this page

  • Custom code
  • Applying custom code to your entire site
  • Head, Body and CSS
  • Applying custom code to specific page
  • Customising your site appearance and adding styles
Logo

© Super Publishing Co.

X