notion enhancer
notion enhancer
an enhancer/customiser for the all-in-one productivity workspace notion.so
+note: this is currently an unreleased version of the enhancer, which adds some cool things like colour theming and improves on some existing features. it is stable, and so has been pushed out for use. once i've done some more fine-tuning and finished taking screenshots of everything i will release this officially as v0.6.0.
customiser.py and cleaner.py files will be useful.
unless you're sure you know what you're doing (if you have to ask, you probably don't) then do not delete anything.
-- this is a fork -
-credit where credit is due, this was originally made by Uzver (github: @TarasokUA, -telegram: UserFromUkraine, discord: Uzver#8760).
-he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.
-
@@ -80,6 +72,10 @@ replacing element.innerHTML = '⨉'; with element.inn
i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous
ones that actually look as if they're part of notion.
to add these to the web version, copy lines 44 - 75 from user.css into your css customiser.
+
+image: before enhancement
+
+image: after default enhancement
i mean, yeah. get rid of those ugly default scrollbars and use nice inconspicuous ones that actually look as if they're part of notion.
to add these to the web version, copy lines 44 - 75 from user.css into your css customiser.
+image: before enhancement
+image: after default enhancement
⨉. does not apply if multiple notion windows are open
+image: open application tray
styling
- +custom appearances can be applied to the app via the resources/user.css and resources/theme.css files. for more information,
+and a list of various optional styling changes, see the page on styling.
+ this is a fork +
+credit where credit is due, this was originally made by Uzver (github: @TarasokUA, +telegram: UserFromUkraine, discord: Uzver#8760).
+he has approved my go-ahead with this fork, as he himself no longer wishes to continue development on the project.
+
diff --git a/docs/screenshots/board-before.jpg b/docs/screenshots/board-before.jpg
new file mode 100644
index 0000000..7568709
Binary files /dev/null and b/docs/screenshots/board-before.jpg differ
diff --git a/docs/screenshots/customfonts-after.jpg b/docs/screenshots/customfonts-after.jpg
new file mode 100644
index 0000000..3c9c8f5
Binary files /dev/null and b/docs/screenshots/customfonts-after.jpg differ
diff --git a/docs/screenshots/customfonts-before.jpg b/docs/screenshots/customfonts-before.jpg
new file mode 100644
index 0000000..626a397
Binary files /dev/null and b/docs/screenshots/customfonts-before.jpg differ
diff --git a/docs/screenshots/default-after.jpg b/docs/screenshots/default-after.jpg
new file mode 100644
index 0000000..f80e468
Binary files /dev/null and b/docs/screenshots/default-after.jpg differ
diff --git a/docs/screenshots/default-before.jpg b/docs/screenshots/default-before.jpg
new file mode 100644
index 0000000..4e53aca
Binary files /dev/null and b/docs/screenshots/default-before.jpg differ
diff --git a/docs/screenshots/fontresizing.jpg b/docs/screenshots/fontresizing.jpg
new file mode 100644
index 0000000..9da2baf
Binary files /dev/null and b/docs/screenshots/fontresizing.jpg differ
diff --git a/docs/screenshots/hideaddrow-after.jpg b/docs/screenshots/hideaddrow-after.jpg
new file mode 100644
index 0000000..e6af8fd
Binary files /dev/null and b/docs/screenshots/hideaddrow-after.jpg differ
diff --git a/docs/screenshots/hidecalculationsrow-after.jpg b/docs/screenshots/hidecalculationsrow-after.jpg
new file mode 100644
index 0000000..edcefaa
Binary files /dev/null and b/docs/screenshots/hidecalculationsrow-after.jpg differ
diff --git a/docs/screenshots/hidediscussion-after.jpg b/docs/screenshots/hidediscussion-after.jpg
new file mode 100644
index 0000000..5d66a62
Binary files /dev/null and b/docs/screenshots/hidediscussion-after.jpg differ
diff --git a/docs/screenshots/hidediscussion-before.jpg b/docs/screenshots/hidediscussion-before.jpg
new file mode 100644
index 0000000..830c779
Binary files /dev/null and b/docs/screenshots/hidediscussion-before.jpg differ
diff --git a/docs/screenshots/table-before.jpg b/docs/screenshots/table-before.jpg
new file mode 100644
index 0000000..b1d755d
Binary files /dev/null and b/docs/screenshots/table-before.jpg differ
diff --git a/docs/screenshots/theme.jpg b/docs/screenshots/theme.jpg
new file mode 100644
index 0000000..34c6b68
Binary files /dev/null and b/docs/screenshots/theme.jpg differ
diff --git a/docs/screenshots/thinnercover-after.jpg b/docs/screenshots/thinnercover-after.jpg
new file mode 100644
index 0000000..c8a01e1
Binary files /dev/null and b/docs/screenshots/thinnercover-after.jpg differ
diff --git a/docs/screenshots/thinnercover-before.jpg b/docs/screenshots/thinnercover-before.jpg
new file mode 100644
index 0000000..407f6f5
Binary files /dev/null and b/docs/screenshots/thinnercover-before.jpg differ
diff --git a/docs/screenshots/tray.jpg b/docs/screenshots/tray.jpg
new file mode 100644
index 0000000..7ba21fc
Binary files /dev/null and b/docs/screenshots/tray.jpg differ
diff --git a/docs/screenshots/widerpreview-after.jpg b/docs/screenshots/widerpreview-after.jpg
new file mode 100644
index 0000000..0c9ba9b
Binary files /dev/null and b/docs/screenshots/widerpreview-after.jpg differ
diff --git a/docs/screenshots/widerpreview-before.jpg b/docs/screenshots/widerpreview-before.jpg
new file mode 100644
index 0000000..3608569
Binary files /dev/null and b/docs/screenshots/widerpreview-before.jpg differ
diff --git a/docs/styling.html b/docs/styling.html
index 22e79f6..cf987df 100644
--- a/docs/styling.html
+++ b/docs/styling.html
@@ -1,4 +1,4 @@
-styling | notion enhancer notion enhancer
+styling | notion enhancer notion enhancer
@@ -27,6 +27,8 @@ set up a distribution method (either including them as optionally-enableabled th
to enable, see the tray options.
to modify, enter the theme.css file and change the colour values within the :root {} - value names
should describe what each colour will affect.
+
+image: the dark+ theme
@@ -36,6 +38,10 @@ should describe what each colour will affect.
.notion-page-view-discussion {
display: none !important;
}
+image: before
+
+image: after
@@ -44,6 +50,8 @@ should describe what each colour will affect.
the @import statement must be added to the top of the file (with nothing above it
except comments or other @import statements)
+to change the fonts, change the font-family property. there are
+plenty of other fonts that can be found on google fonts or that may be on your system already.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
.notion-app-inner {
font-family: 'Oxygen', sans-serif !important;
@@ -54,6 +62,10 @@ should describe what each colour will affect.
[style*=', serif;'] {
font-family: 'Roboto Slab', serif !important;
}
+image: before
+
+image: after
@@ -62,9 +74,9 @@ should describe what each colour will affect.
not recommended: this can mess up container sizes.
it is suggested to instead use ctrl+ or ctrl- to scale everything up/down.
-/* font sizes */
-:root {
- --font-scale: 1;
+to change the size, change the value of --font-scale.
+:root {
+ --font-scale: 1.4;
}
.notion-app-inner {
font-size: calc(var(--font-scale) * 16px) !important;
@@ -87,15 +99,21 @@ it is suggested to instead use ctrl+ or ctrl- to scale
[style*='font-size: 1.25em'] {
font-size: calc(var(--font-scale) * 1.25em) !important;
}
+
+image: after
-
+
- wider page view
+ wider page preview
.notion-peek-renderer > div:nth-child(2) {
max-width: 85vw !important;
}
+image: before
+
+image: after
@@ -107,8 +125,12 @@ it is suggested to instead use ctrl+ or ctrl- to scale
}
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
img {
- height: 20vh ;
+ height: 12vh ;
}
+
+image: before
+
+image: after
@@ -143,6 +165,10 @@ as it is a per-table-column style, unlike all others here, it must be prepended
.notion-table-view-add-row {
display: none !important;
}
+image: before
+
+image: after
@@ -152,6 +178,10 @@ as it is a per-table-column style, unlike all others here, it must be prepended
.notion-table-view-add-row + div {
display: none !important;
}
+image: before
+
+image: after
diff --git a/resources/theme.css b/resources/theme.css
index 2d3c233..320ecc4 100644
--- a/resources/theme.css
+++ b/resources/theme.css
@@ -101,7 +101,7 @@
background: var(--theme-primary_click) !important;
}
[style*='background: rgb(235, 87, 87)'] {
- background: var(--theme-primary-indicator) !important;
+ background: var(--theme-primary_indicator) !important;
}
[style*='background: rgba(151, 154, 155, 0.5)'],
diff --git a/screenshots/board-before.jpg b/screenshots/board-before.jpg
new file mode 100644
index 0000000..7568709
Binary files /dev/null and b/screenshots/board-before.jpg differ
diff --git a/screenshots/hideaddrow-after.jpg b/screenshots/hideaddrow-after.jpg
new file mode 100644
index 0000000..e6af8fd
Binary files /dev/null and b/screenshots/hideaddrow-after.jpg differ
diff --git a/screenshots/hidecalculationsrow-after.jpg b/screenshots/hidecalculationsrow-after.jpg
new file mode 100644
index 0000000..edcefaa
Binary files /dev/null and b/screenshots/hidecalculationsrow-after.jpg differ
diff --git a/screenshots/table-before.jpg b/screenshots/table-before.jpg
new file mode 100644
index 0000000..b1d755d
Binary files /dev/null and b/screenshots/table-before.jpg differ
diff --git a/screenshots/thinnercover-after.jpg b/screenshots/thinnercover-after.jpg
new file mode 100644
index 0000000..c8a01e1
Binary files /dev/null and b/screenshots/thinnercover-after.jpg differ
diff --git a/screenshots/thinnercover-before.jpg b/screenshots/thinnercover-before.jpg
new file mode 100644
index 0000000..407f6f5
Binary files /dev/null and b/screenshots/thinnercover-before.jpg differ
diff --git a/screenshots/widerpreview-after.jpg b/screenshots/widerpreview-after.jpg
new file mode 100644
index 0000000..0c9ba9b
Binary files /dev/null and b/screenshots/widerpreview-after.jpg differ
diff --git a/screenshots/widerpreview-before.jpg b/screenshots/widerpreview-before.jpg
new file mode 100644
index 0000000..3608569
Binary files /dev/null and b/screenshots/widerpreview-before.jpg differ
notion enhancer
notion enhancer
@@ -27,6 +27,8 @@ set up a distribution method (either including them as optionally-enableabled th
to enable, see the tray options.
to modify, enter the theme.css file and change the colour values within the :root {} - value names
should describe what each colour will affect.
+image: the dark+ theme
.notion-page-view-discussion {
display: none !important;
}
+image: before
+image: after
the @import statement must be added to the top of the file (with nothing above it
except comments or other @import statements)
to change the fonts, change the font-family property. there are +plenty of other fonts that can be found on google fonts or that may be on your system already.
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Oxygen&family=Roboto+Slab:wght@300&display=swap');
.notion-app-inner {
font-family: 'Oxygen', sans-serif !important;
@@ -54,6 +62,10 @@ should describe what each colour will affect.
[style*=', serif;'] {
font-family: 'Roboto Slab', serif !important;
}
+image: before
+image: after
not recommended: this can mess up container sizes.
it is suggested to instead use ctrl+ or ctrl- to scale everything up/down.
/* font sizes */
-:root {
- --font-scale: 1;
+to change the size, change the value of --font-scale.
+:root {
+ --font-scale: 1.4;
}
.notion-app-inner {
font-size: calc(var(--font-scale) * 16px) !important;
@@ -87,15 +99,21 @@ it is suggested to instead use ctrl+ or ctrl- to scale
[style*='font-size: 1.25em'] {
font-size: calc(var(--font-scale) * 1.25em) !important;
}
+
+image: after
- wider page view + wider page preview
.notion-peek-renderer > div:nth-child(2) {
max-width: 85vw !important;
}
+image: before
+image: after
ctrl+ or ctrl- to scale
}
[style^='position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; height: 30vh;']
img {
- height: 20vh ;
+ height: 12vh ;
}
+
+image: before
+image: after
.notion-table-view-add-row {
display: none !important;
}
+image: before
+image: after
.notion-table-view-add-row + div {
display: none !important;
}
+image: before
+image: after