Customizing your site’s style & format
While Notion is a really great tool to compose and edit the content of your site, the style and format options are kind of limited. The good news is Potion lets you add a really nice coat of fresh paint to make your site look as nice as you want it to.
To start editing how your site looks, sign in the Potion Dashboard, click the configure option of the site you want to edit and choose Custom Styles.
Overview of the Custom Style editor
The Custom Style editor shows a controls to the left of a live rendering of your site. Here are the 3 most important elements about it:
1️⃣ Site navigation
The toolbar on top of your site preview shows the url of the current page as well as information about last edits on the content of this page.
- Click on the URL to open up a panel allowing to preview any other page on your site
- The Last modification for this page … indicates the time of the last modifications made on that page in Notion that are currently published on your site.
2️⃣ Block selection
Hover your mouse over any element of the page. You will see it light up in a pale blue shade. If you click on it, this will load custom style option for this block. See further information below.
Any changes you make will instantly show up in the site render giving you a preview of how they’ll look.
3️⃣ Applying style to your site
Once you’re ready to apply custom styles to your site, click the Apply button in the top left corner.
The Undo button removes all unapplied changes and revert back to your site as it is currently showing publicly.
Using the no-code style controls
No need to be familiar with CSS to customize your Potion site. Potion offers controls that can customize the font, text size, text color and background of different elements with precise control on which elements these styles are applied to.
Global Site Style
The options selected here will apply to all relevant elements on all pages of your site. It also includes a control to edit the content width of your site. See Content width and responsive layouts for further details on this option.
Notion Block Type
These controls allow you to set style options for content made using a given Notion block. You can quickly tweak how paragraph, callouts, quotes, bulleted lists and other block types look on your site.
All blocks of this type on all pages of your site will inherit these style options.
Specific Block
Finally, you can set style options that only apply to one specific block.
Advanced styling with injected CSS
If you’re looking for more precise control of design elements on your site, the Global CSS Injection will be your best friend. Open that section to reveal a CSS code editor with live preview.
After you click Apply, the CSS in this editor will be injected in the <head>
element on all pages of your site.
Applying your own CSS directives to content elements
You can leverage the same Global > Notion Block Type > Specific Block scoping in the no-code editor to your own CSS classes. This gives you very precise control over which elements in your site your custom CSS is applied to:
- When you select a block in the site preview, notice the Inject class name control available in the Notion Block Type and Specific Block sections. Click set custom value and enter values to add in the class attribute of those elements.
You can enter as many class names as you need. As is the case when setting the value of the class attribute of an HTML element, they should be separated by a space and you should not put a . character in front.
- Open the Global CSS Injection section to reveal the CCS editor. Add CSS directives using a selector based on the class name from step 1.