notion-enhancer/TWEAKS.md

tweaks

the enhancer comes with some built-in colour themes and layout improvements, but to get even more control over how the app looks you can use the file picker in the "custom inserts" module to inject your own javascript or css into it.

to make your own css file to add, make sure that your file manager has "show file extensions" ticked, then create a text document and make sure the name ends in .css (e.g. notion-tweaks.css).

this page is a collection of tested visual tweaks users often ask about. they should all also work in notion's web client, if copied into a customiser like stylus.

css below will work for every instance of the element, but if you wish to hide only a specific element (e.g. the '+ new' table row) it is recommended that you prepend each selector with [data-block-id='ID'].

if you don't know what css is and are interested, check out some youtube videos or try a free short course like the one on codecademy.

the following tweaks were previously on this page and have since been moved to the more stable and theme-compatible css variable system described in the developer documentation:

• colour theming
• custom fonts and font sizes
• wider page preview
• thinner cover image

if you are attempting to customise the web client, the css previously used for these can be found in the legacy documentation.

hide discussions (the comment threads at the top of each page)

[style*='env(safe-area-inset-left)']:not(.notion-page-content)
  [style*='width: 100%; height: 1px;'],
.notion-page-view-discussion {
  display: none !important;
}

hide backlinks

note: this only hides the trigger. if you've already got backlinks shown, then use the 3 dots up in the top-right corner to remove them.

.notion-page-details-controls {
  display: none !important;
}

hide the '+ new' gallery button

.notion-gallery-view
  .notion-selectable.notion-collection_view-block
  > [role='button'],
.notion-gallery-view
  .notion-selectable.notion-collection_view_page-block
  > [role='button'] {
  display: none !important;
}

table columns below 100px

not recommended! this may cause buggy viewing. as it is a per-table-column style, unlike all others here, it must be prepended with the block ID and repeated for each column.

to see how to do this, watch this video.

[data-block-id^='tableID']
  > [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
  > div:nth-child(1)
  > div:nth-child(COL_NUMBER)
  > div:nth-child(1),
[data-block-id^='tableID']
  > [style^='position: relative; min-width: calc(100% - 192px);']
  > [data-block-id]
  > div:nth-child(COL_NUMBER),
[data-block-id^='tableID'] > div:nth-child(5) > div:nth-child(COL_NUMBER) {
  width: 32px !important;
}
[data-block-id^='tableID']
  [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) {
  display: none;
}

hide '+ new' table row

.notion-table-view-add-row {
  display: none !important;
}

hide calculations table row

.notion-table-view-add-row + div {
  display: none !important;
}

centre-align table column headers

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

smaller table column header icons

[style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);']
  div:nth-child(1)
  svg {
  height: 10px !important;
  width: 10px !important;
  margin-right: -4px;
}

remove icons from table column headers

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

removing/decreasing side padding for tables

[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,
[class='notion-scroller'] > .notion-table-view {
  padding-left: 35px !important;
  padding-right: 15px !important;
  min-width: 0% !important;
}
[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;
}

hide '+ new' board row

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

hide board view hidden columns

.notion-board-view > [data-block-id] > div:nth-last-child(2),
.notion-board-view > [data-block-id] > div:first-child > div:nth-last-child(2) {
  display: none !important;
}

hide board view 'add a group'

.notion-board-view > [data-block-id] > div:last-child,
.notion-board-view > [data-block-id] > div:first-child > div:last-child {
  display: none !important;
}

removing/decreasing side padding for boards

.notion-board-view {
  padding-left: 10px !important;
  padding-right: 10px !important;
}