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

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💾

Upd. February 13 2020 v.4.1

Features

(Default) - Enabled by default (Optional) - Can be enabled with some actions. (v1) - In which version of script was implemented current feature

Additional styles which is not included in scripts

Changelog

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 )

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

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)

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)

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)

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

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

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

1. Install extension for userstyles.

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. 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.

If you need to change hotkey for this:

1. Open Customization Patcher.py with notepad.
2. At the beginning find
Copy

windowToggleHotkey = "'ctrl+shift+a'"

3. And replace hotkey inside quotes with new one.
Copy

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

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.

Hide "+ New" Row

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

Align column header to center

.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

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

Hide "Add a Group"

[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"

[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

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

Wider page view

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

Removed unnecessary elements

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

Changing fonts

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

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