Putting Notion in my Mac's menu bar :: Ben Smith
Updated (8th May 2019): CSS amended to support database views.
I use Notion every day. It’s my favourite place to manage tasks and take notes on client projects, but I missed the 'quick-entry’ mode of my last productivity app which saved lots of clicks between apps and pages to record a new entry.
I wanted one-click access to my most-used Notion pages (my task list and a quick-entry notepad).
Fluid (a Mac utility that turns websites into apps) saved the day. Because Notion is excellent via a web browser I could make each important Notion page into a Fluid app and pin it to the menu bar (that step needs a $5 license for Fluid). By using a floating window these pages hover over my other work and, with some custom CSS, the interface fits well into a smaller window. Because Notion's web app works offline, so do my menu bar icons.
I still use the Notion desktop app for other tasks (or to use these pages full-screen), but my important pages are now a click-away and sync instantly if they're simultaneously open in multiple windows / on other devices.
To do this I made a Fluid app with this config:
In this screen:
- 'URL' is the 'important' page's public link copied from Notion (located in the 'Share' menu).
- 'Icon' is a graphic from The Noun Project to provide a neat, greyscale, menu bar-sized icon.
When created, the new app needs to be configured and pinned to the menu bar:
In this screen the most important change is to set the window level to 'floating'. I recommend completing the login steps for Notion before pinning to the menu bar (Fluid calls this 'Pin to Status Bar', located in the menu under the name of the new application).
Once pinned, the new app will function correctly but is best optimised for smaller windows with some layout changes via additional CSS. This can be applied by right-clicking the app's menu bar icon and selecting 'Userstyles'.
In this window:
- The left pane lists all the additional CSS to be applied. Create a new one by clicking the '+' button and give it a name - I called mine 'Clean'.
- The patterns pane lists all the URLs this CSS will be applied to. I apply mine to every URL in the 'notion.so' domain - the stars at the beginning and end will match any sub-domains or paths.
- The line-numbered pane is where the CSS to be applied should be added.
I chose to hide most of the menus and page titles, and apply smaller page margins with my CSS. Some is a bit clumsy as the specific elements I wanted to change didn't have unique IDs or classes, but it works:
/* CSS version 4 - updated 8th May 2019 *//* This version adds support for pop-ups on database screens and hides commenting */div.notion-topbar>div>div:first-child,div.notion-topbar>div>div:last-child,div.notion-help-button,div.notion-sidebar-container,div.notion-frame div.notion-scroller.vertical.horizontal>div:first-child,div.notion-frame div.notion-scroller.vertical:not(.horizontal)>div:first-child,div.notion-frame div.notion-scroller.vertical.horizontal>div>div>div.notion-selectable,div.notion-frame div.notion-scroller.vertical:not(.horizontal)>div>div>div:not(.notion-selectable)>div>div:nth-child(1),div.notion-frame div.notion-scroller.vertical:not(.horizontal)>div>div>div:not(.notion-selectable)>div>div:nth-child(2),div.notion-frame div.notion-scroller.vertical:not(.horizontal)>div>div>div:not(.notion-selectable)>div>div:nth-child(3),div.notion-peek-renderer>div:nth-child(2)>div:first-child,div.notion-peek-renderer> div:nth-child(2)>div.notion-scroller.vertical>div:nth-child(3)>div { display:none !important;}div.notion-topbar,div.notion-topbar>div { height: 30px !important;}div.notion-page-controls { visibility:hidden !important; margin-top: 0px !important;}div.notion-page-content { padding-left: 20px !important; padding-right: 8px !important;} div.notion-selectable { max-width: none !important;}div.notion-topbar,div.notion-cursor-listener,div.notion-frame,div.notion-frame>div:nth-child(1),div.notion-frame > div.notion-scroller.vertical > div:nth-child(1) { width: 100% !important; max-width: 100% !important;}div.notion-frame>div.notion-scroller.vertical:not(div.notion-scroller.horizontal)>div:nth-child(2),div.notion-frame>div.notion-scroller.vertical>div.notion-scroller.horizontal>div { padding-left: 12px !important; padding-right: 12px !important;}div.notion-peek-renderer>div:nth-child(2) { top: 5% !important; left: 8% !important; right: 8% !important;}div.notion-peek-renderer>div:nth-child(2)>div.notion-scroller.vertical>div:nth-child(1)>div,div.notion-peek-renderer>div:nth-child(2)>div.notion-scroller.vertical>div:nth-child(2)>div { padding-left: 20px !important; padding-right: 20px !important;}Once the 'Userstyles' window is completed, close the window and re-start the app to ensure the new styling is applied and you're done.
Sign-up to Notion using this link and get $10 credit to a paid account. I use (and recommend) the Personal plan ($48 per year) when I needed to store more that the Free plan supported.