rinconelloinc

rinconelloinc.lemonsqueezy.com

How to add custom CSS

If you're reading this article, I assume you've already got your website up and running using Fruition or Super. Adding custom styling is fairly simple. Select the option below you’d like to use.

‣

Add CSS in Cloudflare

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>`;

‣

Add CSS in Super

Navigate to edit your Super site and click the Code menu option. From there, click the CSS tab to start adding your custom styling. Here’s a preview of mine.

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

Add a Full-width Background Colour

This is something I didn’t think was possible but have recently learned how to do. You can apply a background colour to an entire section. The trick is making sure that all the blocks you want are inside a callout block. It will end up looking something like this:

To get this result, make sure everything you want is inside a callout block. This is easier said than done because Notion doesn’t like it when you try to create columns inside a callout. Check out this tutorial on how to do it.

Tip: use a transparent square for the callout block’s icon. Here’s one I made earlier.

Invisible square. Right click and save as.

Once you have everything inside a callout block, you can then inspect it and find out its ID. My callout block had an ID of #block-fbb6317fa9db43c9ac5b38a35b5a46be.

Now we know how to select the callout, we can add a small bit of CSS to make it full width and give it a background colour. Here’s the code I’ve used. Feel free to copy it and change the background colour to your liking.

#block-fbb6317fa9db43c9ac5b38a35b5a46be {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  background-color: #feeddb;
}

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;
}

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.

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;
}

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);
}

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;
}

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;
	}

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.

📩

I hope you found this tutorial useful. If you have any questions, you can send an email to me@notiondad.com or follow me on Twitter @notiondad.

super-embed:<div id="fd-form-642f5074d462e590c547e86b"></div>
<script>
  window.fd('form', {
    formId: '642f5074d462e590c547e86b',
    containerEl: '#fd-form-642f5074d462e590c547e86b'
  });
</script>

Notion CSS Guide