Ajustes de Notion en JustZix — páginas más anchas, fuentes y modo enfoque
Notion es flexible con el contenido pero rígido con la apariencia. Una columna de texto estrecha, una sola fuente, sin modo enfoque, tablas de bases de datos que se difuminan en una sola mancha gris. No puedes cambiar eso en los ajustes — pero sí puedes cambiarlo con una sola regla CSS de JustZix. Esta guía recorre seis ajustes que cambian de verdad el trabajo diario en Notion, cada uno como un fragmento listo para pegar.
Por qué CSS, no los ajustes de Notion
Notion mantiene la apariencia bajo control de forma deliberada — quiere que cada página se vea igual en todos los dispositivos. Eso es razonable para un equipo, pero frustrante cuando tienes un monitor de 27 pulgadas y el texto usa un tercio de la pantalla. JustZix superpone tu CSS sobre notion.so en el navegador: Notion no sabe nada del cambio y tú obtienes tu diseño. La regla está limitada al dominio, así que funciona en todas partes — tu espacio de trabajo privado y el de la empresa — sin tocar la cuenta.
Páginas más anchas y todo el ancho
Notion tiene un interruptor de "todo el ancho" por página, pero hay que activarlo manualmente en cada una. Una regla CSS lo hace de forma global y te deja elegir tu propio ancho máximo:
/* Columna de contenido más ancha en cada página de Notion */
.notion-page-content {
max-width: 1100px !important;
width: 100% !important;
}
/* La cabecera (portada, título) se alinea con el contenido */
.notion-page-content > .notion-cover,
.notion-page-content > [class*="layout"] {
max-width: 1100px !important;
}Ajusta max-width a lo que convenga a tu monitor — 900 px es una lectura cómoda, 1300 px es una variante tipo hoja de cálculo. El selector .notion-page-content cubre tanto las páginas ordinarias como las páginas de base de datos abiertas como registro.
Modo enfoque — oculta la barra lateral y la superior
Cuando escribes un documento más largo, el panel izquierdo y la barra superior solo distraen. El modo enfoque oculta ambos y da al contenido toda la pantalla:
/* Modo enfoque: oculta la navegación lateral y la barra superior */
.notion-sidebar-container {
display: none !important;
}
.notion-topbar {
opacity: 0;
transition: opacity .2s ease;
}
.notion-topbar:hover {
opacity: 1;
}
/* El contenido recupera el espacio de la barra lateral oculta */
.notion-frame {
margin-left: 0 !important;
}La barra superior no desaparece del todo — se vuelve transparente y reaparece al pasar el ratón, así que aún llegas al menú "Share" y al historial de la página. Mantén este ajuste como una regla aparte y altérnalo desde la barra de acciones cuando quieras recuperar la navegación completa.
Fuente personalizada e interlineado
Notion ofrece tres fuentes. Si prefieres un tipo de letra concreto del sistema, o simplemente quieres más interlineado para lecturas largas, sobrescríbelo directamente:
/* Fuente personalizada e interlineado más holgado en el cuerpo */
.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;
}
/* Los títulos siguen siendo sans-serif para contrastar */
.notion-page-content h1,
.notion-page-content h2,
.notion-page-content h3 {
font-family: "Inter", system-ui, sans-serif !important;
}Bloques de aviso y cita con estilo
Los avisos y citas por defecto de Notion son sutiles hasta el punto de ser invisibles. Refuérzalos para que de verdad capten la mirada:
/* Bloques de aviso más destacados */
.notion-callout-block {
border-left: 4px solid #2f6fed !important;
border-radius: 6px;
background: rgba(47,111,237,.07) !important;
}
/* Citas con un acento más grande y suave */
.notion-quote-block {
border-left: 4px solid #888 !important;
font-style: italic;
padding-left: 16px !important;
}
/* Bloques desplegables con una etiqueta más clara */
.notion-toggle-block > div:first-child {
font-weight: 600;
}Bases de datos — filas a rayas y cabeceras fijas
Las tablas de bases de datos largas son difíciles de seguir con la vista. Las rayas alternas en las filas y una cabecera que se queda fija mientras desplazas resuelven ambos problemas:
/* Rayas tipo cebra en la vista de tabla */
.notion-collection-item:nth-child(even) {
background: rgba(0,0,0,.035) !important;
}
/* Cabecera de tabla fija al desplazar */
.notion-table-view-header-row,
.notion-collection-view-header {
position: sticky !important;
top: 0;
z-index: 5;
background: var(--bg, #fff) !important;
}
/* Una línea más clara bajo la cabecera */
.notion-table-view-header-row {
border-bottom: 2px solid #ccc !important;
}Ocultar comentarios y ajustes de bloques de código
Los hilos de comentarios pueden ser útiles, pero en una página de referencia solo ensucian el margen. Los bloques de código, a su vez, se benefician de un tipo monoespaciado más grande:
/* Oculta los hilos de comentarios en el margen */
.notion-discussion,
[class*="comment-thread"] {
display: none !important;
}
/* Bloques de código más legibles */
.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 prefieres solo plegar los comentarios en lugar de ocultarlos, cambia a una regla JS que pulse los botones de plegado en document_idle — pero para la mayoría de páginas un display: none estático es suficiente.
Combinar ajustes en un conjunto
Cada ajuste de arriba funciona por sí solo, pero la verdadera comodidad es mantenerlos como reglas separadas y con nombre: "Notion — páginas anchas", "Notion — modo enfoque", "Notion — bases de datos a rayas". Entonces, desde la barra de acciones, activas exactamente lo que necesitas en una página dada y desactivas el modo enfoque con un clic cuando quieres recuperar la navegación.
Las reglas ya hechas para Notion están en nuestro catálogo — mira los ejemplos para notion.so, copia lo que encaje y ajústalo a tu monitor. Instala JustZix y remodela Notion a tu medida en unos minutos.
Valora este artículo
Sin valoraciones — sé el primero.