notion enhancer
notion enhancer
-an enhancer/customiser for the all-in-one productivity workspace notion.so
-note: this is currently an unreleased version of the enhancer, which adds some cool things like colour theming and improves on some existing features. it is stable, and so has been pushed out for use. once i've done some more fine-tuning and finished taking screenshots of everything i will release this officially as v0.6.0.
+an enhancer/customiser for the all-in-one productivity workspace notion.so
+note: this is currently an unreleased version of the enhancer, which adds some cool things +like colour theming and improves on some existing features. it is stable, +and so has been pushed out for use. once I've done some more fine-tuning +and finished taking screenshots of everything I will release this officially as v0.6.0.
installation
-currently, only win10 is supported. it is possible to run this script via the wsl to modify the win10 notion app.
-(the styles should also work for the web version. -these can be installed via an extension like stylus -or a built-in feature like userChrome.css.)
+currently, both windows and linux are supported. it is possible to run this script via the WSL to modify the windows notion app.
+want macOS to be supported too? let me know, and I can work with you to get it going.
+for linux users, the notion-app (arch linux, +others e.g. ubuntu) package will wrap/run the macOS version of the notion app with electron.
+(the styles should also work for the web version. +these can be installed via an extension like stylus +or a built-in feature like userChrome.css.)
-
-
- install node.js (if using the wsl, it is recommended to install via nvm). -
- install python (if using the wsl, follow this guide). +
- install node.js: windows, linux/WSL. +
- install python: windows, linux/WSL.
- reboot. -
- in cmd (on windows) or bash (with wsl), run
npm install -g asar(check installation by runningasar).
- - download this enhancer & extract to a location it can safely remain (this must be in the windows filesystem, -even if you are running the script from the wsl). -
- ensure notion is closed. -
- optional: to remove previous versions of notion enhancer, run
cleaner.py
- - optional: modify the
resources/user.cssfile to your liking (see styling).
- - run
customiser.pyto build changes.
+ - in the appropriate terminal/command line, run
npm install -g asar(check installation by runningasar).
+ - download this enhancer & extract +to a location it can safely remain (if running the script from the WSL, make sure this is from a location within the windows filesystem). +
- ensure no notion processes are running - you may want to check the task manager to make sure. +
- optional: to remove previous applications of the notion enhancer, run
cleaner.py.
+ - optional: modify the
resources/user.cssfile to your liking (see styling).
+ - run
customiser.pyto build changes. (for linux run with sudo)
done: run notion and enjoy.
-oh no, now my app won't open!
+ ++ faq +
+now the notion app won't open :(
- kill any notion tasks in the task manager (
ctrl+shift+esc). - run
cleaner.py. - reboot.
- follow instructions above (ensuring notion isn't running! again, check task manager).
i'm updating from an old version of the enhancer?
-you must first run cleaner.py before running customiser.py.
i tried opening the python file but it just closed instantly and nothing happened?
-python scripts must be run from the wsl terminal or windows command prompt via e.g. python customiser.py.
now that i've run the script, can i delete this folder?
+python scripts must be run from the terminal or command prompt via e.g. python customiser.py.
now that I've run the script, can I delete the enhancer folder?
no! user style files resources/user.css and resources/theme.css are fetched from here each time you open notion.
additionally, if you ever need to change or reset your notion build, the customiser.py and cleaner.py files will be useful.
unless you're sure you know what you're doing (if you have to ask, you probably don't) then do not delete anything.
+something isn't working, and the suggestions here haven't fixed it...
+this is probably a bug. please submit a +bug report.
+I have a new feature idea for the enhancer!
+experienced problems with the notion app, or just want to add something a bit more to it? please submit a +feature request.
element.innerHTML = '⨉'; with element.inn
i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
ones that actually look as if they're part of notion.
to add these to the web version, copy lines 44 - 75 from user.css into your css customiser.
-
+
image: before enhancement
-
+
image: after default enhancement
F5.
CmdOrCtrl+Shift+A by default.to set your own toggle hotkey, open customiser.py and change line 16 (hotkey = 'CmdOrCtrl+Shift+A')
+
to set your own toggle hotkey, open customiser.py and change line 19 (hotkey = 'CmdOrCtrl+Shift+A')
to your preference. you will need to run or re-run customiser.py afterwards.
customiser.py af
tray
single-click to toggle app visibility. right click to open menu.
-settings will be saved in %localappdata%/Programs/Notion/resources/app/user-preferences.json
- run on startup: run notion on boot/startup. (default: true)
- hide on open: hide the launch of notion to the tray. (default: false) @@ -104,9 +119,9 @@ to your preference. you will need to run or re-run
- close to tray: close window to tray rather than closing outright
on click of
⨉. does not apply if multiple notion windows are open. (default: false) - load theme.css: loads the custom colour theme file. -see colour theming for more information. (default: false) +see colour theming for more information. (default: false)
customiser.py af
+
image: open application tray
custom appearances can be applied to the app via the resources/user.css and resources/theme.css files. for more information,
-and a list of various optional styling changes, see the page on styling.
- this is a fork -
-credit where credit is due, this was originally made by Uzver (github: @TarasokUA, -telegram: UserFromUkraine, discord: Uzver#8760).
-he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.
+and a list of various optional styling changes, see the page on styling.other details
-the notion logo belongs entirely to the notion team, and was sourced from their -media kit.
-if you have any questions, check my website for contact details.
+credit where credit is due, this was originally made by Uzver (github: @TarasokUA, +telegram: UserFromUkraine, discord: Uzver#8760). +he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.
+the notion logo belongs entirely to the notion team, and was sourced from their +media kit.
+if you have any questions, check my website for contact details.
notion enhancer
notion enhancer
@@ -7,14 +7,22 @@
to modify the appearance of the notion app, edit the style rules in resources/user.css,
use some of the suggested/documented optional styles below, or invent your own.
these styles are written in a language called "CSS". if you don't know what this is and are interested, -check out some youtube videos or try a free short course like the one on codecademy.
+check out some youtube videos or try a free short course like the one on codecademy.due to the enhancements directly fetching from the local CSS files,
changes will be applied instantly on notion reload
(no need to re-run customiser.py every time you want to change some styles).
these should also work for the web version, if copied into your css customiser.
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'] (video tutorial on fetching IDs).
[data-block-id='ID'].
+
+ + general/app-wide +
+
+image: the default post-customisation appearance
this replaces the default notion dark theme. the provided theme file is my custom dark+ theme: if you have another you wish to share, please contact me. if a few themes are submitted i will set up a distribution method (either including them as optionally-enableabled themes or sharing them on the website).
-to enable, see the tray options.
+to enable, see the tray options.
to modify, enter the theme.css file and change the colour values within the :root {} - value names
should describe what each colour will affect.
+
image: the dark+ theme
.notion-page-view-discussion {
display: none !important;
}
-image: before
-image: after
+image: before styling
+image: after styling
the @import statement must be added to the top of the file (with nothing above it
except comments or other @import statements)
to change the fonts, change the font-family property. there are +
to change the fonts, put the relevant URL in the @import statement and then change the font-family property.
plenty of other fonts that can be found on google fonts or that may be on your system already.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
.notion-app-inner {
@@ -62,10 +70,8 @@ plenty of other fonts that can be found on google fonts or that may be on your s
[style*=', serif;'] {
font-family: 'Roboto Slab', serif !important;
}
-image: before
-image: after
+image: after styling
ctrl+ or ctrl- to scale
[style*='font-size: 1.25em'] {
font-size: calc(var(--font-scale) * 1.25em) ;
}
-
-image: after
+image: after styling
ctrl+ or ctrl- to scale
.notion-peek-renderer > div:nth-child(2) {
max-width: 85vw !important;
}
-image: before
-image: after
+image: before styling
+image: after styling
ctrl+ or ctrl- to scale
img {
height: 12vh ;
}
-
-image: before
-image: after
+image: before styling
+image: after styling
+ tables +
+
+image: before styling
table columns below 100px
-not recommended! this is unreliable and will cause bugs. -coincidentally, this is also what the youtube video linked above shows how to do. -as it is a per-table-column style, unlike all others here, it must be prepended with the block ID.
-[data-block-id^='ID']
+ not recommended! this may cause buggy viewing.
+as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.
+to see how to do this, watch this video.
+[data-block-id^='tableID']
> [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
> div:nth-child(1)
- > div:nth-child(10)
+ > div:nth-child(COL_NUMBER)
> div:nth-child(1),
-[data-block-id^='ID']
+[data-block-id^='tableID']
> [style^='position: relative; min-width: calc(100% - 192px);']
> [data-block-id]
- > div:nth-child(10),
-[data-block-id^='ID'] > div:nth-child(5) > div:nth-child(10) {
- width: 45px !important;
+ > div:nth-child(COL_NUMBER),
+[data-block-id^='tableID'] > div:nth-child(5) > div:nth-child(COL_NUMBER) {
+ width: 32px !important;
}
-[data-block-id^='ID']
+[data-block-id^='tableID']
[style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
display: none;
}
+
+image: after styling
.notion-table-view-add-row {
display: none !important;
}
-image: before
-image: after
+image: after styling
.notion-table-view-add-row + div {
display: none !important;
}
-image: before
-image: after
- hide '+ new' board row -
-.notion-board-group
- [style='user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'] {
- display: none !important;
-}- hide board view 'add a group' -
-.notion-board-view > [data-block-id] > div:last-child,
-.notion-board-view > [data-block-id] > div:first-child > div:last-child {
- display: none !important;
-}
+image: after styling
.notion-table-view-header-cell > div > div {
margin: 0px auto;
}
+image: after styling
+image: after styling
.notion-table-view-header-cell [style^='margin-right: 6px;'] {
display: none !important;
}
+image: after styling
+image: after styling
+ boards +
+
+image: before styling
+ hide '+ new' board row +
+.notion-board-group
+ [style='user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; height: 32px; border-radius: 3px; font-size: 14px; line-height: 1.2; min-width: 0px; padding-left: 6px; padding-right: 8px; color: rgba(255, 255, 255, 0.4); width: 100%;'] {
+ display: none !important;
+}
+image: after styling
+image: after styling+ hide board view 'add a group' +
+.notion-board-view > [data-block-id] > div:last-child,
+.notion-board-view > [data-block-id] > div:first-child > div:last-child {
+ display: none !important;
+}
+image: after styling
+image: after styling