├── .gitignore ├── README.md ├── template.md └── tweaks ├── bigger icons in calendar view.md ├── centre-align table column headers.md ├── fira math.md ├── hide backlinks.md ├── hide board view add a group.md ├── hide board view hidden columns.md ├── hide calculations table row.md ├── hide callout icon.md ├── hide discussions.md ├── hide new board row.md ├── hide new page button.md ├── hide new table row.md ├── hide plus table column.md ├── hide the new gallery button.md ├── left-align images.md ├── minify breadcrumbs and topbar buttons.md ├── remove arrows on linked pages and databases.md ├── remove icons from table column headers.md ├── remove rounded edges of all images.md ├── remove rounded edges of page icons in sidebar.md ├── remove type for commands.md ├── removing decreasing side padding for boards.md ├── removing decreasing side padding for tables.md ├── scroll past end of page.md ├── shrink padding on code blocks.md ├── smaller page icons.md ├── smaller table column header icons.md ├── sticky table list row.md └── table columns below 100px.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tweaks 2 | > a collection of user-submitted css/js tweaks for [notion-enhancer](https://github.com/notion-enhancer/notion-enhancer). 3 | 4 | **This repository has been archived in favour of the new tweaks page on https://notion-enhancer.github.io/** 5 | 6 | the enhancer comes with some built-in colour themes and layout improvements, 7 | but to get even more control over how the app looks you can use the file picker in the 8 | "custom inserts" module to inject your own javascript or css into it. 9 | 10 | to make your own css file to add, make sure that your file manager has "show file extensions" ticked, then 11 | create a text document and make sure the name ends in `.css` (e.g. `notion-tweaks.css`). 12 | 13 | this page is a collection of tested visual tweaks users often ask about. 14 | they should all also work in notion's web client, if copied into a customiser 15 | like [stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en). 16 | 17 | css below will work for every instance of the element, but if you wish to hide only a specific element 18 | (e.g. the '+ new' table row) it is recommended that you prepend each selector with 19 | `[data-block-id='ID']`. 20 | 21 | if you don't know what css is and are interested, check out some youtube videos 22 | or [try a free short course like the one on codecademy](https://www.codecademy.com/learn/learn-css). 23 | 24 | **the following tweaks were previously on this page and have since been moved to the** 25 | **more stable and theme-compatible css variable system described in the** 26 | **[developer documentation](https://github.com/notion-enhancer/notion-enhancer/blob/dev/DOCUMENTATION.md#variablescss):** 27 | 28 | - colour theming 29 | - custom fonts and font sizes 30 | - wider page preview 31 | - thinner cover image 32 | 33 | if you are attempting to customise the web client, the css previously used for these can be found 34 | [in the legacy documentation](https://github.com/notion-enhancer/notion-enhancer/blob/b5043508d91df76f145f0f48c2c63d7dd1c27543/STYLING.md). 35 | 36 | ## list of tweaks 37 | 38 | * [Bigger icons in calendar view](tweaks/bigger%20icons%20in%20calendar%20view.md) 39 | * [Centre-align table column headers](tweaks/centre-align%20table%20column%20headers.md) 40 | * [Fira Math](https://github.com/notion-enhancer/tweaks/blob/main/tweaks/fira%20math.md) 41 | * [Hide '+ new' board row](tweaks/hide%20new%20board%20row.md) 42 | * [Hide '+ new' table row](tweaks/hide%20new%20table%20row.md) 43 | * [Hide backlinks](tweaks/hide%20backlinks.md) 44 | * [Hide board view 'add a group'](tweaks/hide%20board%20view%20add%20a%20group.md) 45 | * [Hide board view hidden columns](tweaks/hide%20board%20view%20hidden%20columns.md) 46 | * [Hide calculations table row](tweaks/hide%20calculations%20table%20row.md) 47 | * [Hide callout icon](https://github.com/notion-enhancer/tweaks/blob/main/tweaks/hide%20callout%20icon.md) 48 | * [Hide discussions](tweaks/hide%20discussions.md) 49 | * [Hide new page button](https://github.com/notion-enhancer/tweaks/blob/main/tweaks/hide%20new%20page%20button.md) 50 | * [Hide plus table column](tweaks/hide%20plus%20table%20column.md) 51 | * [Hide the '+ new' gallery button](tweaks/hide%20the%20new%20gallery%20button.md) 52 | * [Left-align images](tweaks/left-align%20images.md) 53 | * [Minify breadcrumbs and topbar buttons](tweaks/minify%20breadcrumbs%20and%20topbar%20buttons.md) 54 | * [Remove "Type '/' for commands" hint](tweaks/remove%20type%20for%20commands.md) 55 | * [Remove arrows on linked pages and databases](tweaks/remove%20arrows%20on%20linked%20pages%20and%20databases.md) 56 | * [Remove icons from table column headers](tweaks/remove%20icons%20from%20table%20column%20headers.md) 57 | * [Remove rounded edges of all images](https://github.com/notion-enhancer/tweaks/blob/main/tweaks/remove%20rounded%20edges%20of%20all%20images.md) 58 | * [Remove rounded edges of page icons in sidebar](https://github.com/notion-enhancer/tweaks/blob/main/tweaks/remove%20rounded%20edges%20of%20page%20icons%20in%20sidebar.md) 59 | * [Removing/decreasing side padding for boards](tweaks/removing%20decreasing%20side%20padding%20for%20boards.md) 60 | * [Removing/decreasing side padding for tables](tweaks/removing%20decreasing%20side%20padding%20for%20tables.md) 61 | * [Scroll past end of page](tweaks/scroll%20past%20end%20of%20page.md) 62 | * [Shrink padding on code blocks](tweaks/shrink%20padding%20on%20code%20blocks.md) 63 | * [Smaller page icons](tweaks/smaller%20page%20icons.md) 64 | * [Smaller table column header icons](tweaks/smaller%20table%20column%20header%20icons.md) 65 | * [Sticky table/list row](tweaks/sticky%20table%20list%20row.md) 66 | * [Table columns below 100px](tweaks/table%20columns%20below%20100px.md) 67 | -------------------------------------------------------------------------------- /template.md: -------------------------------------------------------------------------------- 1 | # Title 2 | 3 | > Description 4 | 5 | **last tested/working:** Month Day, Year 6 | 7 | **author(s):** [@author](https://github.com/author) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== TITLE ========== */ 24 | 25 | ``` -------------------------------------------------------------------------------- /tweaks/bigger icons in calendar view.md: -------------------------------------------------------------------------------- 1 | # Bigger icons in calendar view 2 | 3 | **last tested/working:** Nov 6, 2020 3:46 PM 4 | 5 | **author(s):** [@fabiosangregorio](https://github.com/fabiosangregorio) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== BIGGER ICONS IN CALENDAR VIEW ========== */ 22 | .notion-calendar-view .notion-record-icon { 23 | width: 16px !important; 24 | height: 16px !important; 25 | margin-top: 0 !important; 26 | } 27 | .notion-calendar-view .notion-record-icon * { 28 | width: 100% !important; 29 | height: 100% !important; 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /tweaks/centre-align table column headers.md: -------------------------------------------------------------------------------- 1 | # Centre-align table column headers 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== CENTRE-ALIGN TABLE COLUMN HEADERS ========== */ 22 | .notion-table-view-header-cell > div > div { 23 | margin: 0px auto; 24 | } 25 | ``` -------------------------------------------------------------------------------- /tweaks/fira math.md: -------------------------------------------------------------------------------- 1 | # Fira Math 2 | 3 | **last tested/working:** Oct 12, 2021 8:40 AM 4 | 5 | **author(s)**: [@mtoohey31](https://github.com/mtoohey31) 6 | 7 | ## css 8 | 9 | ```css 10 | @import url("https://firamath.github.io/css/firamath.css"); 11 | 12 | .katex * { 13 | font-family: "Fira Math" !important; 14 | } 15 | ``` 16 | -------------------------------------------------------------------------------- /tweaks/hide backlinks.md: -------------------------------------------------------------------------------- 1 | # Hide backlinks 2 | 3 | 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. 4 | 5 | **last tested/working:** Oct 1, 2020 6 | 7 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== HIDE BACKLINKS ========== */ 24 | .notion-page-details-controls { 25 | display: none !important; 26 | } 27 | ``` -------------------------------------------------------------------------------- /tweaks/hide board view add a group.md: -------------------------------------------------------------------------------- 1 | # Hide board view 'add a group' 2 | 3 | 4 | **last tested/working:** Oct 1, 2020 5 | 6 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
before tweakafter tweak
before tweakafter tweak
18 | 19 | ## css 20 | 21 | ```css 22 | /* ========== HIDE BOARD VIEW 'ADD A GROUP' ========== */ 23 | .notion-board-view > [data-block-id] > div:last-child, 24 | .notion-board-view > [data-block-id] > div:first-child > div:last-child { 25 | display: none !important; 26 | } 27 | ``` -------------------------------------------------------------------------------- /tweaks/hide board view hidden columns.md: -------------------------------------------------------------------------------- 1 | # Hide board view hidden columns 2 | 3 | **last tested/working:** Oct 19, 2021 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE BOARD VIEW HIDDEN COLUMNS ========== */ 22 | .notion-board-view > [data-block-id] > :first-child > :last-child, 23 | .notion-board-view > [data-block-id] > :last-child { 24 | display: none !important; 25 | } 26 | ``` 27 | -------------------------------------------------------------------------------- /tweaks/hide calculations table row.md: -------------------------------------------------------------------------------- 1 | # Hide calculations table row 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE CALCULATIONS TABLE ROW ========== */ 22 | .notion-table-view-add-row + div { 23 | display: none !important; 24 | } 25 | ``` -------------------------------------------------------------------------------- /tweaks/hide callout icon.md: -------------------------------------------------------------------------------- 1 | # Hide callout icon 2 | 3 | **last tested/working:** Dec 5, 2020 4 | 5 | **author(s):** [@admiraldus](https://github.com/admiraldus) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE CALLOUT ICON ========== */ 22 | .notion-selectable.notion-callout-block .notion-record-icon { 23 | display: none !important; 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /tweaks/hide discussions.md: -------------------------------------------------------------------------------- 1 | # Hide discussions 2 | > Hide discussions (the comment threads at the top of each page) 3 | 4 | **last tested/working:** Oct 1, 2020 5 | 6 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
before tweakafter tweak
before tweakafter tweak
18 | 19 | ## css 20 | 21 | ```css 22 | /* ========== HIDE DISCUSSIONS ========== */ 23 | [style*='env(safe-area-inset-left)']:not(.notion-page-content) 24 | [style*='width: 100%; height: 1px;'], 25 | .notion-page-view-discussion { 26 | display: none !important; 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /tweaks/hide new board row.md: -------------------------------------------------------------------------------- 1 | # Hide '+ new' board row 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE '+ NEW' BOARD ROW ========== */ 22 | .notion-board-group > div[role='button'][tabindex='0'] { 23 | display: none !important; 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /tweaks/hide new page button.md: -------------------------------------------------------------------------------- 1 | # Hide new page button 2 | 3 | **last tested/working:** Dec 5, 2020 4 | 5 | **author(s):** [@admiraldus](https://github.com/admiraldus) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE NEW PAGE BUTTON ========== */ 22 | .notion-sidebar > :nth-child(7) { 23 | display: none !important; 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /tweaks/hide new table row.md: -------------------------------------------------------------------------------- 1 | # Hide '+ new' table row 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE '+ NEW' TABLE ROW ========== */ 22 | .notion-table-view-add-row { 23 | display: none !important; 24 | } 25 | ``` -------------------------------------------------------------------------------- /tweaks/hide plus table column.md: -------------------------------------------------------------------------------- 1 | # Hide '+' table column 2 | 3 | **last tested/working:** Nov 29, 2020 4 | 5 | **author(s):** [@admiraldus](https://github.com/admiraldus) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== HIDE '+' TABLE COLUMN ========== */ 22 | .notion-table-view-add-column { 23 | display: none !important; 24 | } 25 | .notion-selectable.notion-page-block.notion-collection-item > div:last-child { 26 | display: none !important; 27 | } 28 | ``` -------------------------------------------------------------------------------- /tweaks/hide the new gallery button.md: -------------------------------------------------------------------------------- 1 | # Hide the '+ new' gallery button 2 | 3 | 4 | **last tested/working:** Sept 13, 2021 5 | 6 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
before tweakafter tweak
before tweakafter tweak
18 | 19 | ## css 20 | 21 | ```css 22 | /* ========== HIDE THE '+ NEW' GALLERY BUTTON ========== */ 23 | .notion-gallery-view 24 | .notion-selectable.notion-collection_view-block 25 | div 26 | + [role="button"], 27 | .notion-gallery-view 28 | .notion-selectable.notion-collection_view_page-block 29 | div 30 | + [role="button"] { 31 | display: none !important; 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /tweaks/left-align images.md: -------------------------------------------------------------------------------- 1 | # Left-align images 2 | 3 | > Always left-align all images. 4 | 5 | **last tested/working:** Nov 18, 2020 6 | 7 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== LEFT-ALIGN IMAGES ========== */ 24 | .notion-selectable.notion-image-block { 25 | margin-right: auto; 26 | } 27 | ``` -------------------------------------------------------------------------------- /tweaks/minify breadcrumbs and topbar buttons.md: -------------------------------------------------------------------------------- 1 | # Minify breadcrumbs and topbar buttons 2 | 3 | > Removes unused space on top of pages and makes the page icon smaller (similar to database page icons). 4 | 5 | **last tested/working:** Nov 19, 2020 6 | 7 | **author(s):** [@CloudHill](https://github.com/CloudHill) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
before tweakafter tweak
before tweakafter tweak
20 | 21 | 22 | ## css 23 | 24 | ```css 25 | /* ========== MINIFY BREADCRUMBS AND TOPBAR BUTTONS ========== */ 26 | 27 | /* Only apply when window size is <= 600px */ 28 | @media (max-width:600px) { 29 | /* Hide Share, Update, Favorite Buttons */ 30 | .notion-topbar-actions> :not(:last-child) { 31 | display: none !important; 32 | } 33 | /* Remove icon margin */ 34 | .notion-topbar-breadcrumb [role="button"] .notion-record-icon { 35 | margin-right: 0 !important; 36 | } 37 | /* Absolutely position page title */ 38 | .notion-topbar-breadcrumb .notion-selectable:hover { 39 | z-index: 999; 40 | } 41 | .notion-topbar-breadcrumb [role="button"] { 42 | position: relative; 43 | } 44 | .notion-topbar-breadcrumb [role="button"] .notion-record-icon+div { 45 | background: var(--theme--interactive_hover); 46 | height: 24px; 47 | padding: 0 6px; 48 | border-radius: 3px; 49 | position: absolute; 50 | left: 26px; 51 | display: flex; 52 | align-items: center; 53 | pointer-events: none; 54 | } 55 | /* Title transition */ 56 | .notion-topbar-breadcrumb [role="button"] .notion-record-icon+div { 57 | transition: opacity 20ms ease-in, max-width 300ms ease-in !important; 58 | } 59 | /* Hide title when not hovered */ 60 | .notion-topbar-breadcrumb [role="button"]:not(:hover) .notion-record-icon+div { 61 | opacity: 0; 62 | max-width: 0px !important; 63 | } 64 | /* Show title when hovered */ 65 | .notion-topbar-breadcrumb [role="button"]:hover .notion-record-icon+div { 66 | opacity: 1; 67 | } 68 | /* Transition delay when hovered */ 69 | .notion-topbar-breadcrumb [role="button"]:hover .notion-record-icon, .notion-topbar-breadcrumb [role="button"]:hover .notion-record-icon+div { 70 | transition-delay: 200ms !important; 71 | } 72 | } 73 | ``` -------------------------------------------------------------------------------- /tweaks/remove arrows on linked pages and databases.md: -------------------------------------------------------------------------------- 1 | # Remove arrows on linked pages and databases 2 | 3 | > Removes all the arrow icons from linked databases/pages, resulting in a cleaner look. 4 | 5 | **last tested/working:** Nov 9, 2020 6 | 7 | **author(s):** [@fabiosangregorio](https://github.com/fabiosangregorio) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
before tweakafter tweak
before tweakafter tweak
20 | 21 | ## css 22 | 23 | ```css 24 | /* ========== REMOVE ARROWS ON LINKED DATABASES/PAGES ========== */ 25 | svg.alias, .notion-collection_view-block [style="display: flex; align-items: center; margin-right: 6px;"] { 26 | display: none !important; 27 | } 28 | /* Remove in page mentions */ 29 | .notion-page-mention-token [style="width:1em;display:inline-block;vertical-align:-0.15em;margin-right:0.1em"] { 30 | width: 2px !important; 31 | } 32 | ``` -------------------------------------------------------------------------------- /tweaks/remove icons from table column headers.md: -------------------------------------------------------------------------------- 1 | # Remove icons from table column headers 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== REMOVE ICONS FROM TABLE COLUMN HEADERS ========== */ 22 | .notion-table-view-header-cell [style^='margin-right: 6px;'] { 23 | display: none !important; 24 | } 25 | ``` -------------------------------------------------------------------------------- /tweaks/remove rounded edges of all images.md: -------------------------------------------------------------------------------- 1 | # Remove rounded edges of all images.md 2 | 3 | > Remove rounded edges of all images 4 | 5 | **last tested/working:** Oct 28, 2021 6 | 7 | **author(s):** [@GitMoleo](https://github.com/GitMoleo) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== REMOVE ROUNDED EDGES OF ALL IMAGES ========== */ 24 | img { 25 | border-radius: 0px !important; 26 | } 27 | ``` 28 | -------------------------------------------------------------------------------- /tweaks/remove rounded edges of page icons in sidebar.md: -------------------------------------------------------------------------------- 1 | # Remove rounded edges of page icons in sidebar.md 2 | 3 | **last tested/working:** Oct 28, 2021 4 | 5 | **author(s):** [@GitMoleo](https://github.com/GitMoleo) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== REMOVE ROUNDED EDGES OF PAGE ICONS IN SIDEBAR ========== */ 22 | img[style*="display: block; object-fit: cover; border-radius: 3px; width: 17.76px; height: 17.76px; transition: opacity 100ms ease-out 0s;"] { 23 | border-radius: 0px !important; 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /tweaks/remove type for commands.md: -------------------------------------------------------------------------------- 1 | # Remove "Type '/' for commands" 2 | 3 | > Remove "Type '/' for commands" 4 | 5 | **last tested/working:** Oct 5, 2021 6 | 7 | **author(s):** [@Adambl4](https://github.com/Adambl4), [@dragonwocky](https://github.com/dragonwocky) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | 21 | ## css 22 | 23 | ```css 24 | /* ========== REMOVE TYPE '/' FOR COMMANDS ========== */ 25 | [contenteditable]:empty:after { 26 | content: ' ' !important; 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /tweaks/removing decreasing side padding for boards.md: -------------------------------------------------------------------------------- 1 | # Removing/decreasing side padding for boards 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== REMOVING/DECREASING SIDE PADDING FOR BOARDS ========== */ 22 | .notion-board-view { 23 | padding-left: 10px !important; 24 | padding-right: 10px !important; 25 | } 26 | ``` -------------------------------------------------------------------------------- /tweaks/removing decreasing side padding for tables.md: -------------------------------------------------------------------------------- 1 | # Removing/decreasing side padding for tables 2 | 3 | 4 | **last tested/working:** Oct 1, 2020 5 | 6 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
before tweakafter tweak
before tweakafter tweak
18 | 19 | ## css 20 | 21 | ```css 22 | /* ========== REMOVING/DECREASING SIDE PADDING FOR TABLES ========== */ 23 | [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;'] 24 | .notion-table-view, 25 | [class='notion-scroller'] > .notion-table-view { 26 | padding-left: 35px !important; 27 | padding-right: 15px !important; 28 | min-width: 0% !important; 29 | } 30 | [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;'] 31 | .notion-selectable 32 | .notion-scroller.horizontal::-webkit-scrollbar-track { 33 | margin-left: 10px; 34 | margin-right: 10px; 35 | } 36 | ``` -------------------------------------------------------------------------------- /tweaks/scroll past end of page.md: -------------------------------------------------------------------------------- 1 | # Scroll past end of page 2 | 3 | > Allows the user to scroll past the end of the page. 4 | 5 | **last tested/working:** Nov 28, 2020 6 | 7 | **author(s):** [@fabiosangregorio](https://github.com/fabiosangregorio) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== SCROLL PAST END OF PAGE ========== */ 24 | .notion-page-content { 25 | padding-bottom: 80vh !important; 26 | } 27 | ``` -------------------------------------------------------------------------------- /tweaks/shrink padding on code blocks.md: -------------------------------------------------------------------------------- 1 | # Shrink padding on code blocks 2 | 3 | > Shrinks the padding on the new code blocks design, making the language select floating over the code. 4 | 5 | **last tested/working:** Nov 28, 2020 6 | 7 | **author(s):** [@fabiosangregorio](https://github.com/fabiosangregorio) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== SHRINK PADDING ON CODE BLOCKS ========== */ 24 | .notion-code-block.line-numbers > div { 25 | padding-top: 14px !important; 26 | padding-bottom: 14px !important; 27 | } 28 | .notion-code-block:not(.line-numbers) .line-numbers + div + div, #code-line-numbers { 29 | top: 14px !important; 30 | } 31 | 32 | .notion-code-block.line-numbers + div + div { 33 | background: var(--theme--code-background); 34 | box-shadow: 5px 2px 8px 4px var(--theme--code-background); 35 | } 36 | ``` -------------------------------------------------------------------------------- /tweaks/smaller page icons.md: -------------------------------------------------------------------------------- 1 | # Smaller page icons 2 | 3 | > Removes unused space on top of pages and makes the page icon smaller (similar to database page icons). 4 | 5 | **last tested/working:** Sept 20, 2021 6 | 7 | **author(s):** [@CloudHill](https://github.com/CloudHill) [@Amadeus](https://github.com/l782993610) 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
before tweakafter tweak
before tweakafter tweak
19 | 20 | ## css 21 | 22 | ```css 23 | /* ========== SMALLER PAGE ICONS ========== */ 24 | /* Place icon relative to the title container */ 25 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child { 26 | padding-top: 30px; 27 | position: relative; 28 | } 29 | 30 | /* Set icon size */ 31 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 140px"], 32 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 78px"] { 33 | width: 38px !important; 34 | height: 38px !important; 35 | } 36 | 37 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 140px"] *, .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 78px"] * { 38 | width: 100% !important; 39 | height: 100% !important; 40 | } 41 | 42 | /* Icon placement */ 43 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 140px"], 44 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon[style *= "height: 78px"] { 45 | margin-top: 8px !important; 46 | margin-right: 8px !important; 47 | float: left; 48 | } 49 | 50 | 51 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-page-controls { 52 | position: absolute !important; 53 | top: -5px; 54 | } 55 | 56 | /* Emoji icon */ 57 | .notion-scroller[style*="display: flex; flex-direction: column"] > :nth-child(2):not([contenteditable*="false"]) > :first-child > :first-child .notion-record-icon [style*="font-size: 78px"] { 58 | font-size: 38px !important; 59 | } 60 | 61 | 62 | /* Remove space on top of the page when no icon or cover is set */ 63 | .notion-page-controls[style*="margin-top: 80px"] { 64 | margin-top: 8px !important; 65 | } 66 | 67 | .notion-page-controls[style*="margin-top: 32px"] { 68 | margin-top: 8px !important; 69 | } 70 | 71 | ``` 72 | -------------------------------------------------------------------------------- /tweaks/smaller table column header icons.md: -------------------------------------------------------------------------------- 1 | # Smaller table column header icons 2 | 3 | **last tested/working:** Oct 1, 2020 4 | 5 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
before tweakafter tweak
before tweakafter tweak
17 | 18 | ## css 19 | 20 | ```css 21 | /* ========== SMALLER TABLE COLUMN HEADER ICONS ========== */ 22 | [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'] 23 | div:nth-child(1) 24 | svg { 25 | height: 10px !important; 26 | width: 10px !important; 27 | margin-right: -4px; 28 | } 29 | ``` -------------------------------------------------------------------------------- /tweaks/sticky table list row.md: -------------------------------------------------------------------------------- 1 | # Sticky table/list row 2 | 3 | note: this will make the first row stick to the top of the screen when scrolling down. to stick a specific row replace `:nth-child(2)` with `[data-block-id="ROW_BLOCK_ID_HERE"]`. does not apply to inline databases. 4 | 5 | **last tested/working:** Oct 1, 2020 6 | 7 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 8 | 9 | ![after tweak](https://i.imgur.com/Ur3N6ER.png) 10 | 11 | ## css 12 | 13 | ```css 14 | /* ========== STICKY TABLE/LIST ROW ========== */ 15 | .notion-collection_view_page-block 16 | .notion-page-block.notion-collection-item:nth-child(2) { 17 | background: var(--theme--main); 18 | z-index: 10; 19 | position: sticky; 20 | top: 0; 21 | } 22 | .notion-table-view 23 | .notion-collection_view_page-block 24 | .notion-page-block.notion-collection-item:nth-child(2) { 25 | top: 32px; 26 | } 27 | ``` -------------------------------------------------------------------------------- /tweaks/table columns below 100px.md: -------------------------------------------------------------------------------- 1 | # Table columns below 100px 2 | 3 | **not recommended!** this may cause buggy viewing. as it is a per-table-column style, unlike most others here, it must be prepended with the block ID and repeated for each column. 4 | 5 | to see how to do this, watch [this video](https://www.youtube.com/watch?v=6V7eqShm_4w). 6 | 7 | **last tested/working:** Oct 1, 2020 8 | 9 | **author(s):** [@dragonwocky](https://github.com/dragonwocky) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
before tweakafter tweak
before tweakafter tweak
21 | 22 | ## css 23 | 24 | ```css 25 | /* ========== TABLE COLUMNS BELOW 100PX ========== */ 26 | [data-block-id^='tableID'] 27 | > [style^='display: flex; position: absolute; background: rgb(47, 52, 55); z-index: 82; height: 33px; color: rgba(255, 255, 255, 0.6);'] 28 | > div:nth-child(1) 29 | > div:nth-child(COL_NUMBER) 30 | > div:nth-child(1), 31 | [data-block-id^='tableID'] 32 | > [style^='position: relative; min-width: calc(100% - 192px);'] 33 | > [data-block-id] 34 | > div:nth-child(COL_NUMBER), 35 | [data-block-id^='tableID'] > div:nth-child(5) > div:nth-child(COL_NUMBER) { 36 | width: 32px !important; 37 | } 38 | [data-block-id^='tableID'] 39 | [style^='position: absolute; top: 0px; left: 0px; pointer-events: none;']:not(.notion-presence-container) { 40 | display: none; 41 | } 42 | ``` --------------------------------------------------------------------------------