Notion Enhancer

Notion Enhancer

Created
Apr 13, 2020 4:07 AM
Tags

Installation

  1. Download and install NodeJS
  2. Download and install Python
  3. Reboot. It's important.
  4. Run cmd. (windows + r)
  5. In cmd type npm install -g asar
  6. Check if asar really installed with asar in cmd
  7. You shouldn't see asar is not recognized in output
  8. Extract .zip with scripts
  9. Close Notion if it's open
  10. Remove previous version of scripts(if you have it) with Reset.py
  11. Run Customization Patcher.py
  12. Run Notion
image

Made by Uzver

Telegram : UserFromUkraine Discord : Uzver#8760

Feel free to text me with questions/ideas/code improvements/bugs/requests I mean, really, don't think that you will disturb me with your messages:)

Download💾

Notion Customization v4.1.zip138.0KB

Upd. February 13 2020 v.4.1

(Default) Removed windows titlebar and menubar. Changed style of scrollbars (v1)

image

(Default) Changed style of scrollbars (v1)

image
image

(Default) New window-control buttons with matching style for dark\light theme. (v1)

Before (Dark Theme)
Before (Dark Theme)
Before(Light Theme)
Before(Light Theme)
After (Dark Theme)
After (Dark Theme)
After (Light Theme)
After (Light Theme)

Relative features

  1. (Default) New "Always On Top" button. Disabled by default(downwards arrow) When enabled(upwards arrow) Notion will be shown above all other windows.
  2. (Optional) Instead of closing, app can just minimize to tray. 1. Open main.user.js 2. Find element.onclick = function () { browserWindow.close(); } and replace browserWindow.close(); with browserWindow.minimize(); 3. Run Customization Patcher.py to apply changes and reload Notion (Ctrl + R to reload without closing)
  3. (Optional) You're free to customize icons for this buttons 1. You can find icons Here (Use search). Select icon, and copy only one line(doesn't matter which one) from "HTML Entity" 2. Open main.user.js. Use comments like /* Close Button */ to locate code block for button that you want to change. 3. Inside this block of code, find element.innerHTML = "iconCode" and replace "iconCode" with your code from HTML Entity. You should put your code inside the quotation marks. 4. Run Customization Patcher.py to apply changes and reload Notion (Ctrl + R )

Customization of Table View and Border View

(Default) Removed huge padding on the sides (v1)

image

To disable "wider table":

  1. Open custom_style.css
  2. Navigate by comments to /* Changing table padding to make it more wider */
  3. Remove these blocks of code
/* Changing table padding to make it more wider */
[style^="flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;"]  .notion-table-view {
    padding-left: 35px !important;
    padding-right: 15px !important;
    min-width: 0% !important;
}
/* Changing the width of horizontal scroller, because of wider table */
[style^="flex-shrink: 0; flex-grow: 1; width: 100%; max-width: 100%; display: flex; align-items: center; flex-direction: column; font-size: 16px; color: rgba(255, 255, 255, 0.9); padding: 0px 96px 30vh;"] .notion-selectable .notion-scroller.horizontal::-webkit-scrollbar-track {
    margin-left: 10px;
    margin-right: 10px;
}

3. Save file and reload Notion(Ctrl+R).

UPD. As you can see, now css selector much longer. It's fix for "wider table in not full width page" bug

(Default) Changed table header icons size (v3)

image

To disable it, find this comment /* Changing table header icons to make it smaller */ at the end of the custom_style.css and remove code block below

If you want to change size, you should change both width and height properties to see changes.

(Optional) Changing width of the columns less than 100px (v1)

image

I recorded a video to show you an example of how to do it. You can find it Here📽️

  1. So, first of all, I open dev tools. Click on Notion app, to focus on it. And then Ctrl + Shift + I.
  2. In left top corner, you click on button to select elements with mouse.
  3. Click on table when hovering on that green area, like I did on video.
  4. Back to dev tools, expand selected elements with click on grey arrow, and select id.
  5. Open custom_style.css, and replace id in 4 places.
  6. Then I use "top-left button" again, to select table cell and test what width would be best. I set minimal width for column, so I was looking for width:100px (100px is minimal width). When I found it, I clicked on value and changed it with mouse wheel.
  7. Did same, but now with table header. Looks like here, when you select it, you should go on one element higher in dev tools. Then everything same, found 100px, changed it.
  8. Back to custom_style.css. Replace width with new value. Don't remove !important
  9. After, I counted columns to get column number. And replaced it in 3 places.
  10. Done. Ctrl + S to save file. Click on Notion to focus. Ctrl + R to reload Notion.
  11. But on video I showed few more things. What you should copy\paste in code to adjust another column. And how to center items(won't work for some of them) inside column with text-align: -webkit-center !important;

BUGS. MultiSelection in table view is implemented with obfuscated Javascript. And it brakes when you changing columns width, because when you change column width, it still thinks that column can't be thinner than 100px. Long story short - I can't fix it, so I hid it:) In custom_style.css below /* Hiding selection for table, because of changing columns width bugs selection inside table */ comment.

(Default) Removed huge padding on the sides of board view (v1)

image

To disable it, find this comment /* Same as with table. Makes board view more wider */ in custom_style.css and remove code block below.

(Default) Thinner Cover Image And Higher Content Block (v1)

image

There is some bugs with it. I made this layout for 24"(100%)\15.6"(120%) 1920x1080px. On other screens\scaling\resolutions, it may look weird.

To fix it, you should check this code in custom_style.css. Adjust "vh" values.

/* Changing content block position, less height - higher content block */
[style^="position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;"] {
    height: 12vh !important;
}
/* Changing cover image height to match higher content block */
[style^="position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;"] img {
    height: 20vh !important;
}

Custom_style.css

(Optional) Implemented browser extensions-like userstyles (v2)

image

All that you need now is to simply write in custom_syle.css what you want to change and reload Notion with (Ctrl+R). It possible, because when you run Customization Patcher.py, it creates link in Notion's code to custom_style.css. So if you scripts in other folder, then you need run Customization Patcher.py again to make new link.

Old version problems, like no syntax highlight or needing to use Customization Patcher.py to apply every change to styles, is gone;)

(Default) Styles from custom_style.css can be used in WEB version with extensions like "Stylus" (v2)

Gif beginning is when I select all code in the right window:)
Gif beginning is when I select all code in the right window:)
  1. Install extension for userstyles.

    2. Extension for Chrome

    Extension for Firefox

  2. Open notion.so
  3. Click on extension icon, hover on only notion.so and click on it
    4. image
  4. Copy all code from custom_style.css (ctrl+a to select all) and paste it to extension's window.
  5. Press "Save" at the left top corner.
  6. Reload page to apply all changes.

(Default)Hotkey to Show\Hide Notion window (v3)

image

If you need to change hotkey for this:

  1. Open Customization Patcher.py with notepad.
  2. At the beginning find 
    3. windowToggleHotkey = "'ctrl+shift+a'"
  3. And replace hotkey inside quotes with new one.
    4. windowToggleHotkey = "'shift+n'"
  4. Run Customization Patcher.py to apply changes.
  5. Be careful, when you change hotkey, you should write it inside "'double and single quotation marks'"

(Default) Tray support (v4)

One click to show Notion window. One click to hide. Right click to open menu.

image

(Default) Saving settings (v4)

All settings from tray's context menu will be saved at /Notion/resources/app/user-preferences.json

(Optional) Run Notion at Windows startup (v4)

Make shortcut of Notion.exe. Move that shortcut in Windows startup folder... Simply click on "Run at Startup"

(Optional) "Run Hidden" (v4)

Notion on launch is silently going to tray, without opening any windows. Handy with "Run at Startup"

(Optional) "Open Maximized" (v4)

Notion will opens only in maximized window. Doesn't matter hotkey, tray icon or shortcut - always maximized.

(Optional) "Close To Tray" (v4)

Close "X" button hides app to tray instead of closing it

(Default) Reset.py (v4)

If you got any problems after using Customization Patcher.py , you can reset all changes with running Reset.py It will remove any changes made by patcher. Close Notion before running Reset.py or will get an error about access problems.

(Default) Better output from Customization Patcher.py \ Reset.py (v4)

image
This message you'll see when everything was successfully patched
This message you'll see when everything was successfully patched
This message you'll see when
This message you'll see when Reset.py removed all changes made by Customization Patcher.py
On the screenshot is the access denied error, because I run
On the screenshot is the access denied error, because I run Reset.py when Notion was open

Now it catches errors instead of suddenly closing without any explanations. So it will be easier to understand what thing doesn't allow you to install customizations or remove them.

The End Of Features :(

Don't do that!:)

Don't use scripts in path with nonenglish symbols. It, probably, won't work or work not as expected.

Don't use Customization Patcher.py if you didn't installed asar Make sure you checked it existence in system with asar command in cmd.

Troubleshooting

  1. When I open script, it instantly closes. Right click on Customization Patcher.py -> Run with IDLE -> Run -> Run Module it will help to understand a problem.
  2. Notion don't opens after I launched Customization Patcher.py. Check /Users/Your_User_name/AppData/Local/Programs/Notion/resources probably, the problem is with file that should be named as app.asar.bak simply rename it back to app.asar and remove "app" folder if it exists
  3. Want to change something in main.user.js/Customization Patcher.py , but can't understand some parts of code. Feel free to text me with questions:)
  4. Sometimes, I can't click on button at the TopBar or I can't move window. For long story - text me in PM. Short story - draggable area was above this buttons, so that's why you can't click on them. In v.4 I fixed it, and now, you can see on screenshot where is draggable area. In previous versions it was in full height of topbar. I can't fix it in "right way" from my side. This's how their application works. So that's the price you pay for frameless window:)
    5. image
  5. What should I know, to understand how it's working. HTML\CSS\JavaScript and Python for patcher

Additional customizations of custom_style.css which is not included in scripts

This customizations wasn't fully tested. I'm not sure if it will work perfectly for you:)

READ THIS BEFORE EDITING

  1. You should know how to get IDs. Example is on video in "Column width editing". But different elements have different IDs, some elements don't have it at all.
  2. I use ID to say in code "Select ONLY this element", if you want to make changes to all similar elements(for example to all table views) you should edit code:) Table view has .notion-table-view class. Border view has .notion-border-view class. And so on. Some elements don't have classes at all, so you should use their attributes.
  3. Learn about CSS Selectors and Chrome DevTools (CTRL+SHIFT+I in Notion). Hint: you can devtools search(ctrl+F) to test your css selectors.
    • Notion's code is not rich with classes and IDs. So learn how to select element with its attributes
  4. Notion code is pretty hard to edit, so be careful with it, and try to use detailed selectors
  5. Use !important if your changes in code is not applying:) Example: width: 100px !important;

Table view

Hide "+ New" Row

image
.notion-table-view>[data-block-id="YourIdHere"]>div:nth-child(4) {
    display: none !important;
}

Align column header to center

image
.notion-table-view-header-cell>div>div {
    margin: 0px auto;
}

Proper column body alignment

/* child(7) for column number */
[data-block-id^="YourIdHere"]>[style^="position: relative; min-width: calc(100% - 192px);"]>[data-block-id]>div:nth-child(7)>div:nth-child(1) {
    justify-content: center;
    padding-left: 6px;
}

Hide "Calculate" Row

image
/* Hide "Calculate" row */
.notion-table-view>[data-block-id="YourIdHere"]>div:nth-child(5) {
    display: none !important;
}
/* Hide empy block below Calculate row to make scrollbar closer to table */
.notion-table-view>[data-block-id="YourIdHere"]>div:nth-child(6) {
    display: none !important;
    /* height: 32px !important; *//* If you want have some space between scrollbar and table - change height instead of display:none. 32px is default*/
}

Hide table header properties icons

[data-block-id^="YourIdHere"] .notion-table-view-header-cell [style^="margin-right: 6px;"] {
    display:none !important;     
}

Align content inside table header cells

[data-block-id^="d1623406-c75a-4cda-b821-ed54550d4601"] .notion-table-view-header-cell {
    margin: 0px auto;
}
[data-block-id^="d1623406-c75a-4cda-b821-ed54550d4601"] .notion-table-view-header-cell>div:nth-child(1) {
    justify-content: center;
}

Board view

Hide "Add a Group"

image
[data-block-id="YourIdHere"]>div:nth-child(4),
[data-block-id="YourIdHere"]>div:nth-child(1)>div:nth-child(3) {
    display: none !important;
}

Hide "Hidden Columns"

image
[data-block-id="YourIdHere"]>div:nth-child(3),
[data-block-id="YourIdHere"]>div:nth-child(1)>div:nth-child(2) {
    display: none !important;
}

Hide "+ New" for each group

image
[data-block-id="YourIdHere"] .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;
}

Page view

Wider page view

image
.notion-peek-renderer>div:nth-child(2) {
    max-width: 1205px !important;
}

Removed unnecessary elements

image
/* Hide "add icon\cover" row in page view */
.notion-peek-renderer .notion-scroller.vertical>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
    display:none !important;
}

/* Hide comments row */
.notion-peek-renderer .notion-scroller.vertical>div:nth-child(3) {
    display:none !important;
}

/* remove huge margin-top of icon */
.notion-peek-renderer .notion-record-icon {
    display: none !important;
}

Other changes

Changing fonts

You can find some commonly used combinations of fonts here and here

image
* {
	font-family: Algerian; 
}

Hide the [+] in a specific gallery 

[data-block-id^="YourIdHere"]>[style^="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer;"] { 
	display: none !important;
}