Notion-Anpassungen in JustZix — breitere Seiten, Schriften und Fokusmodus
Notion ist flexibel beim Inhalt, aber starr beim Aussehen. Eine schmale Textspalte, eine Schrift, kein Fokusmodus, Datenbanktabellen, die zu einem grauen Klumpen verschwimmen. Das können Sie in den Einstellungen nicht ändern — aber Sie können es mit einer einzigen JustZix-CSS-Regel ändern. Diese Anleitung führt durch sechs Anpassungen, die die tägliche Arbeit in Notion wirklich verändern, jede als fertig einzufügendes Snippet.
Warum CSS, nicht Notion-Einstellungen
Notion hält das Erscheinungsbild bewusst unter Kontrolle — es will, dass jede Seite auf jedem Gerät gleich aussieht. Das ist für ein Team sinnvoll, aber frustrierend, wenn Sie einen 27-Zoll-Monitor haben und der Text ein Drittel des Bildschirms nutzt. JustZix legt Ihr CSS im Browser über notion.so: Notion weiß nichts von der Änderung, und Sie bekommen Ihr Layout. Die Regel ist auf die Domain beschränkt, also funktioniert sie überall — im privaten und im Firmen-Workspace — ohne das Konto anzufassen.
Breitere Seiten und volle Breite
Notion hat einen seitenweisen Schalter für „volle Breite“, aber Sie müssen ihn auf jeder Seite manuell umlegen. Eine CSS-Regel macht das global und lässt Sie Ihre eigene Maximalbreite wählen:
/* Breitere Inhaltsspalte auf jeder Notion-Seite */
.notion-page-content {
max-width: 1100px !important;
width: 100% !important;
}
/* Der Kopf (Cover, Titel) richtet sich am Inhalt aus */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
max-width: 1100px !important;
}Setzen Sie max-width auf das, was zu Ihrem Monitor passt — 900 px ist bequemes Lesen, 1300 px ist eine tabellenartige Variante. Der Selektor .notion-page-content deckt sowohl gewöhnliche Seiten als auch als Datensatz geöffnete Datenbankseiten ab.
Fokusmodus — Seitenleiste und Topbar ausblenden
Wenn Sie ein längeres Dokument schreiben, lenken das linke Panel und die obere Leiste nur ab. Der Fokusmodus blendet beide aus und gibt dem Inhalt den ganzen Bildschirm:
/* Fokusmodus: blendet die Seitennavigation und die obere Leiste aus */
.notion-sidebar-container {
display: none !important;
}
.notion-topbar {
opacity: 0;
transition: opacity .2s ease;
}
.notion-topbar:hover {
opacity: 1;
}
/* Inhalt holt sich den Platz der ausgeblendeten Seitenleiste zurück */
.notion-frame {
margin-left: 0 !important;
}Die obere Leiste verschwindet nicht vollständig — sie wird transparent und kommt zurück, wenn Sie darüber fahren, sodass Sie weiterhin das Menü „Share“ und die Seitenhistorie erreichen. Behalten Sie diese Anpassung als separate Regel und schalten Sie sie über die Aktionsleiste um, wenn Sie die volle Navigation zurück wollen.
Eigene Schrift und Zeilenhöhe
Notion bietet drei Schriften an. Wenn Sie eine bestimmte Systemschrift bevorzugen oder einfach mehr Zeilenhöhe für langes Lesen wollen, überschreiben Sie das direkt:
/* Eigene Schrift und lockerere Zeilenhöhe im Text */
.notion-page-content,
.notion-page-content [placeholder] {
font-family: "Charter", "Iowan Old Style", Georgia, serif !important;
line-height: 1.7 !important;
font-size: 17px !important;
}
/* Überschriften bleiben serifenlos für Kontrast */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
font-family: "Inter", system-ui, sans-serif !important;
}Gestaltete Callout- und Zitatblöcke
Die Standard-Callouts und -Zitate in Notion sind so dezent, dass sie fast unsichtbar sind. Verstärken Sie sie, damit sie wirklich ins Auge fallen:
/* Auffälligere Callout-Blöcke */
.notion-callout-block {
border-left: 4px solid #2f6fed !important;
border-radius: 6px;
background: rgba(47,111,237,.07) !important;
}
/* Zitate mit einem größeren, weichen Akzent */
.notion-quote-block {
border-left: 4px solid #888 !important;
font-style: italic;
padding-left: 16px !important;
}
/* Toggle-Blöcke mit einer klareren Beschriftung */
.notion-toggle-block > div:first-child {
font-weight: 600;
}Datenbanken — Zebrazeilen und klebende Köpfe
Lange Datenbanktabellen sind mit den Augen schwer zu verfolgen. Abwechselnde Zeilenstreifen und ein Kopf, der beim Scrollen klebt, lösen beide Probleme:
/* Zebrastreifen in der Tabellenansicht */
.notion-collection-item:nth-child(even) {
background: rgba(0,0,0,.035) !important;
}
/* Klebender Tabellenkopf beim Scrollen */
.notion-table-view-header-row,
.notion-collection-view-header {
position: sticky !important;
top: 0;
z-index: 5;
background: var(--bg, #fff) !important;
}
/* Eine klarere Linie unter dem Kopf */
.notion-table-view-header-row {
border-bottom: 2px solid #ccc !important;
}Kommentare ausblenden und Code-Block-Anpassungen
Kommentar-Threads können nützlich sein, aber auf einer Referenzseite verstopfen sie nur den Rand. Code-Blöcke wiederum profitieren von einer größeren Monospace-Schrift:
/* Kommentar-Threads am Rand ausblenden */
.notion-discussion,
[class*="comment-thread"] {
display: none !important;
}
/* Besser lesbare Code-Blöcke */
.notion-code-block {
font-family: "JetBrains Mono", "Fira Code", monospace !important;
font-size: 14px !important;
border-radius: 8px;
background: #1e1e2e !important;
}
.notion-code-block code {
line-height: 1.55 !important;
}Wenn Sie Kommentare lieber nur einklappen statt ausblenden möchten, tauschen Sie eine JS-Regel ein, die bei document_idle die Einklapp-Schaltflächen anklickt — aber für die meisten Seiten reicht ein statisches display: none.
Anpassungen zu einem Set kombinieren
Jede Anpassung oben funktioniert für sich, aber der echte Komfort besteht darin, sie als separate, benannte Regeln zu behalten: „Notion — breite Seiten“, „Notion — Fokusmodus“, „Notion — Zebra-Datenbanken“. Dann schalten Sie über die Aktionsleiste genau das ein, was Sie auf einer bestimmten Seite brauchen, und deaktivieren den Fokusmodus mit einem Klick, wenn Sie die Navigation zurück wollen.
Fertige Regeln für Notion finden Sie in unserem Katalog — sehen Sie sich die Beispiele für notion.so an, kopieren Sie, was passt, und stimmen Sie es auf Ihren Monitor ab. Installieren Sie JustZix und formen Sie Notion in wenigen Minuten nach Ihren Bedürfnissen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.