Supporting custom css

[canbi]

Hey, I was using custom css when I was using Fruition. I couldn't find a way to build with custom css, I think only custom scripts are supported at the moment. Are there any supported way to add custom css?

I solved it with this approach:

In site-config.ts file:

// Set this to your Google Tag ID from Google Analytics
const GOOGLE_TAG_ID = 'G-XXXXXXX'

// CUSTOM CSS DEFIND HERE 👈👈👈
const CUSTOM_CSS = `
<style>
/* Footer - custom block css*/
[data-block-id="496884be-8b53-46ee-a8a7-ff148ff7e68a"] {
  text-align: center;
  margin-bottom: -2.5rem !important;
  font-size: 12px;
}
</style>`

export const SITE_CONFIG: NoteHostSiteConfig = {

  //...
  // other stuff
  //...

  // Custom JS for head and body of a Notion page
  customHeadJS: googleTag(GOOGLE_TAG_ID),
  customBodyJS: `${PAGE_SCRIPT_JS_STRING} ${CUSTOM_CSS}`, // CUSTOM CSS ADDED HERE 👈👈👈
}

If custom css is not supported, at least this way it can be added to the project.

Thanks for your efforts, I rebuilt my site with notehost very quickly 🤟

[velsa]

Thanks for the idea :)

I've added customHeadCSS in the latest version, so you can simply put your CSS code there.

E.g.

const CUSTOM_CSS = `
/* Footer - custom block css*/
[data-block-id="496884be-8b53-46ee-a8a7-ff148ff7e68a"] {
  text-align: center;
  margin-bottom: -2.5rem !important;
  font-size: 12px;
}
`
  //...
  // other stuff
  //...

  // Custom JS for head and body of a Notion page
  customHeadCSS: CUSTOM_CSS,
  customHeadJS: googleTag(GOOGLE_TAG_ID),
  customBodyJS: `${PAGE_SCRIPT_JS_STRING}`,
}