Ajustements Notion dans JustZix — pages plus larges, polices et mode focus
Notion est souple sur le contenu mais rigide sur l'apparence. Une colonne de texte étroite, une seule police, pas de mode focus, des tableaux de base de données qui se fondent en un seul bloc gris. Vous ne pouvez pas changer cela dans les paramètres — mais vous pouvez le changer avec une seule règle CSS JustZix. Ce guide parcourt six ajustements qui changent réellement le travail quotidien dans Notion, chacun sous forme d'extrait prêt à coller.
Pourquoi le CSS, pas les paramètres de Notion
Notion garde délibérément l'apparence sous contrôle — il veut que chaque page ait la même allure sur chaque appareil. C'est raisonnable pour une équipe, mais frustrant quand vous avez un écran de 27 pouces et que le texte n'occupe qu'un tiers de l'écran. JustZix superpose votre CSS sur notion.so dans le navigateur : Notion ne sait rien du changement, et vous obtenez votre mise en page. La règle est limitée au domaine, donc elle fonctionne partout — votre espace de travail privé et celui de l'entreprise — sans toucher au compte.
Des pages plus larges et la pleine largeur
Notion possède un bouton « pleine largeur » par page, mais vous devez l'activer manuellement sur chaque page. Une règle CSS le fait globalement et vous laisse choisir votre propre largeur maximale :
/* Colonne de contenu plus large sur chaque page Notion */
.notion-page-content {
max-width: 1100px !important;
width: 100% !important;
}
/* L'en-tête (couverture, titre) s'aligne sur le contenu */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
max-width: 1100px !important;
}Réglez max-width sur ce qui convient à votre écran — 900 px pour une lecture confortable, 1300 px pour une variante de type tableur. Le sélecteur .notion-page-content couvre à la fois les pages ordinaires et les pages de base de données ouvertes comme un enregistrement.
Mode focus — masquer la barre latérale et la barre supérieure
Quand vous rédigez un document plus long, le panneau de gauche et la barre du haut ne font que distraire. Le mode focus masque les deux et donne tout l'écran au contenu :
/* Mode focus : masque la navigation latérale et la barre supérieure */
.notion-sidebar-container {
display: none !important;
}
.notion-topbar {
opacity: 0;
transition: opacity .2s ease;
}
.notion-topbar:hover {
opacity: 1;
}
/* Le contenu récupère l'espace laissé par la barre latérale masquée */
.notion-frame {
margin-left: 0 !important;
}La barre supérieure ne disparaît pas complètement — elle devient transparente et revient au survol, donc vous atteignez toujours le menu « Partager » et l'historique de la page. Gardez cet ajustement comme une règle distincte et basculez-le depuis la barre d'actions quand vous voulez retrouver la navigation complète.
Police personnalisée et interligne
Notion propose trois polices. Si vous préférez une police système précise, ou si vous voulez simplement plus d'interligne pour de longues lectures, remplacez-la directement :
/* Police personnalisée et interligne plus aéré dans le corps */
.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;
}
/* Les titres restent sans-serif pour le contraste */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
font-family: "Inter", system-ui, sans-serif !important;
}Blocs de rappel et de citation stylisés
Les rappels et citations par défaut de Notion sont discrets au point d'en être invisibles. Renforcez-les pour qu'ils accrochent réellement le regard :
/* Blocs de rappel plus visibles */
.notion-callout-block {
border-left: 4px solid #2f6fed !important;
border-radius: 6px;
background: rgba(47,111,237,.07) !important;
}
/* Citations avec un accent doux plus marqué */
.notion-quote-block {
border-left: 4px solid #888 !important;
font-style: italic;
padding-left: 16px !important;
}
/* Blocs basculables avec une étiquette plus claire */
.notion-toggle-block > div:first-child {
font-weight: 600;
}Bases de données — lignes zébrées et en-têtes collants
Les longs tableaux de base de données sont difficiles à suivre des yeux. Des bandes de lignes alternées et un en-tête qui reste collé pendant le défilement résolvent les deux problèmes :
/* Bandes zébrées dans la vue tableau */
.notion-collection-item:nth-child(even) {
background: rgba(0,0,0,.035) !important;
}
/* En-tête de tableau collant pendant le défilement */
.notion-table-view-header-row,
.notion-collection-view-header {
position: sticky !important;
top: 0;
z-index: 5;
background: var(--bg, #fff) !important;
}
/* Une ligne plus nette sous l'en-tête */
.notion-table-view-header-row {
border-bottom: 2px solid #ccc !important;
}Masquer les commentaires et ajuster les blocs de code
Les fils de commentaires peuvent être utiles, mais sur une page de référence ils ne font qu'encombrer la marge. Les blocs de code, eux, gagnent à avoir une police à chasse fixe plus grande :
/* Masquer les fils de commentaires dans la marge */
.notion-discussion,
[class*="comment-thread"] {
display: none !important;
}
/* Blocs de code plus lisibles */
.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;
}Si vous préférez simplement replier les commentaires plutôt que les masquer, remplacez par une règle JS qui clique sur les boutons de repli à document_idle — mais pour la plupart des pages un display: none statique suffit.
Combiner les ajustements en un ensemble
Chaque ajustement ci-dessus fonctionne seul, mais la vraie commodité est de les garder comme des règles distinctes et nommées : « Notion — pages larges », « Notion — mode focus », « Notion — bases de données zébrées ». Ensuite, depuis la barre d'actions, vous activez exactement ce dont vous avez besoin sur une page donnée, et vous désactivez le mode focus d'un clic quand vous voulez retrouver la navigation.
Des règles prêtes à l'emploi pour Notion sont dans notre catalogue — voyez les exemples pour notion.so, copiez ce qui convient et adaptez-le à votre écran. Installez JustZix et remodelez Notion à votre goût en quelques minutes.
Notez cet article
Aucune note — soyez le premier.