How to Customize Your Potion Site's Style

Potion allows you to customize how your website looks with css. This guide will walk you through the steps of how you can do this. You will need to know some css.

The Default Look

By default Potion tries to look as close to Notion as possible. So every Potion block looks pretty similar to the Notion block.

Customizing your style

You can use Google Chrome to see the current styles and understand how each block is styled in css.

Open up your Potion website in Google Chrome.

Right click on an element that you would like to style.

Click the "Inspect" button in the dropdown menu.

An editor will appear in your browser that shows the html elements along with the css.

You will be able to see the Potion classes that are applied to each element. You can actually edit the class directly in the styles section to see what the new styles would look like.

You will need to make sure that you select each class correctly in css.

Snippet Injection

Once you have changed the css to your liking you can add that same css to Potion in the snippet injection editor.

Make sure you’re on Default Settings so it’s added to the full site then click “Edit Page Html”.

Make sure to add the css code inside <style> </style> tags. You only need to add the fields and classes that you want to override.

Any code that you add while “General Settings” is selected will be added to every page of your website. You can also set a page on the left to only add code to that page.

Once you add your styles be sure to save! When navigating back to your site, you will see the new changes immediately.

Here is a little example of css code you could add. 👇


<style>
	.notion-viewport {
		padding: 0;
	}

	.notion-header {
		display: none;
	}
</style>

Special css classes

Potion has a couple of special classes that I want to note to make sure you know they are available.

Notion Block Id class

There is a notion block id for every notion block. This way you can select that specific block's class only very easily.

2. index-page class

This class is only on the index page or main page of your site. This way you can add styles only to your index page.

3. Page block id class

Each page of your website has a notion block id class at the top level of the page content. This allows you to add styles specifically to that page.

Conclusion

There is a lot you can do with Potion styles and customizing your site. You can change your site to look very unique. This Potion site you are reading was even made with Potion!

Thats it!

Let us know if you have any more questions.