Notion CSS Guide

Notion CSS Guide

If you're using Fruition to build your website with Notion, you'll likely want to add some styling to your pages to make them stand out.

How to add custom CSS

If you're reading this article, I assume you've already got your website up using Fruition and Cloudflare. Adding custom styling is fairly simple.

In your worker on Cloudflare, find the part of the script that says

/* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT =

Below that equals sign, we need to add some <style> </style> tags to wrap our code in.

You should end up with something like this:

/* Step 5: enter any custom scripts you'd like */
const CUSTOM_SCRIPT = 
  <style>
    /* Custom CSS */
  </style>`;

Here are a few of my favourite bits of CSS that you can add to your site.

Centred Heading

The page name on Notion is usually aligned to the left. If you want it in the centre, like the image below, the CSS is nice and simple. You select your page header by the data block ID. If you were to use the notion page block class then this would change all headings across your entire site. Using the data-block-id means we can target just the front page title.

[data-block-id="1f6f92e8-f488-450b-a85b-f6c129f85820"] {
  text-align: center;
  font-size: 2.4rem !important;
}
image

You could also change the font and size of your heading in here too but this will also target the navigation backlink at the top of your site.

image

Remove the Toggle

You know that toggle in the top right that lets people switch your site over to dark mode? It doesn't have to be there. It's got a descriptive CSS class called "toggle mode" and we just set it to be hidden.

.toggle-mode {
  visibility: hidden !important;
}
image

Gradient Background

Give yourself a gradient background. Change the colours for a more intense colour scheme like the image below.

.notion-frame {
	background: linear-gradient(to left, #ffffff, #f3fbff);
}
image

Default Text Colour

Now that you've created your lovely header and website background, you might find that you can no longer read the text on the screen. Changing the default text colour is super simple. Any text colour you specify specifically on your Notion page will overwrite your default text and look something like the image below.

.notion-page-content {
  color: violet;
}
image

Buttons

Make your buttons stand out with some CSS shadows. These buttons took me far too long to figure out so hopefully I'll save you some time.

Use a callout block in Notion for your buttons. You can edit their style with the notion-callout-block selector.

  • border-radius will give your buttons those rounded edges.
  • box-shadow adds a shadow to your buttons and makes them pop out from the page.
  • background is the button colour you would like.
  • The notion-callout-blockdiv is there to remove the horrible square box around your button.
  • The notion-callout-blocka is the section that turns your callout block into an actual clickable button. Without this, just the text itself is clickable.
.notion-callout-block {
		border-radius: 20px !important;
		position: relative !important;
		border: none !important;
    box-shadow: 2px 2px 12px #dadada, -1px -1px 12px #ffffff !important;
		background: #ffffff !important;
	}

  .notion-callout-block div {
    background: none !important;
  }

	.notion-callout-block a {
		letter-spacing: -0.5px !important;
		padding: 0 0 2px 66px !important;
		align-items: center !important;
		position: absolute !important;
		display: flex !important;
		border: none !important;
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
	}
image

That's all I have for now. I'll come back and add more CSS tricks as I find them. If you have any that you use, let me know and I'll add them to this page and tag you.