Take your Notion-Super sites to greater heights with custom CSS, site automations, and powerful workflows.
Hi, welcome to Super Power.
I created this site primarily to help Notion-Super users learn how to customize their sites using basic CSS. This site also serves as design resources for theme creators.
I've designed and sold a couple of themes, and I realized that many of my customers wanted to customize their site further, but they don't really know how.
- Global site code
- Page code
- Two ways to shape your site
- Edit CSS properties in real-time and apply it to your site
- Class and Type selectors
- Combining selectors with the same CSS properties
- How to use ID
- Commenting in CSS
- Frequently asked CSS tips
- How to use light, dark, and system theme on your site
- How to change default Notion colors to your own brand colors
- How to create and assign a new color variable
Part 1: Shaping your site
There are 2 types of code section in Super:
- The global site code
- Click on site settings → select Code
- The page code
- Click on site settings → select Pages → click on Edit code
Global site code
- If you add lines of code in this section, every single page in your site will inherit this code in them.
- A practical use case for a global code is to inject an analytics script like Plausible. You add an analytics script here, every single page of your site will be trackable.
- Another use case is to add a CSS theme to your site. Add a script or CSS code, and every single page of your site will have the same style.
- Any lines of code you add here will only be applied to that particular page.
- A practical use case is to add a chat or donation widget to a specific page, and not to every single page.
Shaping your site
With the option of global site code and page code, you can either,
- Have a site with a consistent theme by adding CSS code or style script in the global site code. In other words, every single page of your site will have the same theme.
- You can apply different themes to different pages within your site by adding CSS code or style script to different pages.
Part 2: How to inspect and edit elements on a webpage
Part 3: CSS essentials
Part 4: Colors
CSS code for light theme
CSS code for dark theme
CSS code for system theme
Discover how you can accomplish more with Notion & Super.