This is another quick and easy Notion tutorial that I think many might find useful. I’m going to show you how to hide the huge +New button that appears in the gallery view.
![Notion +New button in gallery view](https://blog.shorouk.dev/wp-content/uploads/2021/05/image.png)
I can’t tell you how many of my Notion templates just look so much better now after I got rid of it.
So, an obvious solution is locking the page. However, that is not an optimum solution if you are editing the page on a daily basis. I wanted something more permanent and where I don’t have to keep locking and unlocking the page every time I wanted to edit it.
Here’s an example of my planner page: You can see the difference with and without the +New button. No more ugly wasted spaces! Just a nice compact page.
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/before.png)
![Notion planner template](https://blog.shorouk.dev/wp-content/uploads/2021/05/after-531x1024.png)
Here’s another example a part of an old daily agenda page of mine from 2020.
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/b2-1024x897.png)
![Notion daily agenda template](https://blog.shorouk.dev/wp-content/uploads/2021/05/a2-1024x617.png)
So, How to actually hide the +New button?
You’ll only need an extension/plugin for your browser that allows you to add custom CSS to any website. I use Brave browser so all Chrome extensions work for me and the one I use is called User JavaScript and CSS but you can use any extension.
So after installing the extension open notion.so and click on the extension icon and then “add new”
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/image-2.png)
You’ll find a page that looks like this
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/image-3-1024x468.png)
In the Name field you can put anything you want
and in the CSS space to the right, copy and paste this code
/*************************************************************/
/*remove new button from gallery view*/
div[style="user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 3px; box-shadow: rgba(55, 53, 47, 0.09) 0px 0px 0px 1px inset; min-height: 40px;"]
{
display:none;
}
/*************************************************************************/
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/image-4-1024x352.png)
Finally click “Save” and refresh the page et Voilà! That’s really it. It takes a couple of minutes no more!
Keep in my mind that this solution only works for the web app though.
I think there is an app that allows you to do so on the windows app too, but I mostly use the web app so that works for me.
Happy Notioning!
Busy Now? Pin it for later
![](https://blog.shorouk.dev/wp-content/uploads/2021/05/pin.png)
1 Comment
View Comments