a collection of user-submitted css/js tweaks for notion-enhancer.
This repository has been archived in favour of the new tweaks page on https://notion-enhancer.github.io/
the enhancer comes with some built-in colour themes and layout improvements, but to get even more control over how the app looks you can use the file picker in the "custom inserts" module to inject your own javascript or css into it.
to make your own css file to add, make sure that your file manager has "show file extensions" ticked, then
create a text document and make sure the name ends in .css
(e.g. notion-tweaks.css
).
this page is a collection of tested visual tweaks users often ask about. they should all also work in notion's web client, if copied into a customiser like stylus.
css below will work for every instance of the element, but if you wish to hide only a specific element
(e.g. the '+ new' table row) it is recommended that you prepend each selector with
[data-block-id='ID']
.
if you don't know what css is and are interested, check out some youtube videos or try a free short course like the one on codecademy.
the following tweaks were previously on this page and have since been moved to the more stable and theme-compatible css variable system described in the developer documentation:
- colour theming
- custom fonts and font sizes
- wider page preview
- thinner cover image
if you are attempting to customise the web client, the css previously used for these can be found in the legacy documentation.
- Bigger icons in calendar view
- Centre-align table column headers
- Fira Math
- Hide '+ new' board row
- Hide '+ new' table row
- Hide backlinks
- Hide board view 'add a group'
- Hide board view hidden columns
- Hide calculations table row
- Hide callout icon
- Hide discussions
- Hide new page button
- Hide plus table column
- Hide the '+ new' gallery button
- Left-align images
- Minify breadcrumbs and topbar buttons
- Remove "Type '/' for commands" hint
- Remove arrows on linked pages and databases
- Remove icons from table column headers
- Remove rounded edges of all images
- Remove rounded edges of page icons in sidebar
- Removing/decreasing side padding for boards
- Removing/decreasing side padding for tables
- Scroll past end of page
- Shrink padding on code blocks
- Smaller page icons
- Smaller table column header icons
- Sticky table/list row
- Table columns below 100px