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 Customization Remove.py
  11. Run Customization Patcher.py
  12. Run Notion

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/abcf5d28-6867-49d1-832d-da673547631d/ukraine_(1).png

Made by Uzver (discontinued)

Telegram : Discord :

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

Project continuation by dragonwocky

Details : https://github.com/dragonwocky/notion-enhancer

Discord : dragonwocky#8449 Twitter : https://twitter.com/dragonwocky e-mail : [email protected]

Download💾

Notion Customization.zip

Upd. June 13th 2020 v.4.2 (spaces in path fix, thx to Lucia)

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

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

Удалены рамки стандартного окна виндоус

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7a5c677c-39e3-4f25-9894-94c619d3893c/Untitled.png

(Default) Changed style of scrollbars (v1)

Изменен стиль скроллбаров

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a60a9545-5dc6-43cd-9912-be705d3316be/Screenshot_5.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/38078831-b305-4f50-a624-8bb9657099cc/Screenshot_6.png

(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) You're free to customize icons for this buttons

  3. You can find icons Here (Use search). Select icon, and copy only one line(doesn't matter which one) from "HTML Entity"

  4. Open main.user.js. Use comments like /* Close Button */ to locate code block for button that you want to change.

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

  6. Run Customization Patcher.py to apply changes and reload Notion (Ctrl + R )

  7. Different style of buttons here

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/98965e9b-09cd-4152-8c60-e34bb05e6e17/Untitled.png

Customization of Table View and Border View

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

Изменен большой отступ слева у таблиц

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3844eaa7-0233-42af-b9c0-91bfa293196e/1.gif

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;
}
  1. 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)

Изменены размеры иконок заголовке таблицы

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/60698d68-47ff-42cc-97ac-b60a37821036/2.gif

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)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1fce5f25-1f5a-42d9-a81c-da53e927ceeb/2020-02-08_21-19-41.png

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.