Ya hemos hablado de los ajustes de temas, y Obsidian se ve mucho mejor después de instalar un tema. Pero muchas personas aún sienten que algo no encaja después de cambiar de tema: fuente demasiado pequeña, interlineado demasiado ajustado, área de notas demasiado estrecha… Estos detalles están fuera del alcance de los temas. Este capítulo cubrirá cómo ajustar con precisión usando fragmentos CSS (CSS Snippets).
Este capítulo cubre cuatro cosas:
- Qué es CSS — comprensible incluso sin conocimientos de programación
- Por qué aún necesitas CSS incluso con un tema
- Deja que la IA escriba CSS por ti — solo copia y pega
- Dónde colocar el CSS y cómo hacerlo funcionar
¿Qué es CSS?
CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets). Suena técnico, pero la lógica central es simple: CSS es un conjunto de reglas que controlan cómo se ven las cosas.
Por ejemplo:
- ¿Qué fuente, tamaño y color debe tener este texto?
- ¿Qué ancho tiene esta área? ¿Cuáles son los márgenes?
- ¿Qué color de fondo debe tener al pasar el ratón?
Casi todos los efectos visuales que ves en una página web están controlados por CSS. La interfaz de Obsidian también está construida sobre tecnología web (Electron), por lo que se puede usar CSS para controlar su apariencia.
El tema que instalas es esencialmente un gran paquete de CSS escrito por otra persona. Un fragmento CSS es una pequeña pieza de CSS que agregas tú mismo, específicamente para ajustar detalles que el tema no cubre.
El tema es el estilo general; los fragmentos son ajustes locales. No entran en conflicto y se pueden usar juntos.
¿Por qué aún necesitas CSS si tienes un tema?
Los temas resuelven el problema del “estilo general”, pero muchos detalles de preferencias personales están fuera del alcance de los temas, y así debe ser, porque las preferencias de cada persona son diferentes.
Varios escenarios comunes donde los temas se quedan cortos:
Área de notas demasiado estrecha: Muchos temas limitan el ancho máximo de las notas por defecto, dejando grandes espacios en blanco en pantallas anchas con el contenido apretado en el medio. A algunos les gusta este diseño, otros lo encuentran desperdiciado.
Interlineado demasiado ajustado/suelto: El interlineado predeterminado puede no ser cómodo para ti, pero el tema no tiene una opción para cambiarlo.
Color de encabezado incorrecto: Te gusta el tema en general, pero el color del H1 es un poco demasiado brillante y quieres atenuarlo.
Elemento de interfaz molesto: Por ejemplo, un botón que nunca usas: quieres ocultarlo.
Estas necesidades son muy específicas y personales. Los fragmentos CSS son la herramienta diseñada para resolver estos problemas de “última milla”.
No necesitas escribirlo tú mismo — deja que la IA lo escriba por ti
Este es el punto más importante de este capítulo: No necesitas aprender CSS en absoluto — solo deja que la IA lo escriba por ti.
El proceso es muy simple: solo dile a la IA lo que quieres cambiar:
“Escríbeme un fragmento CSS para Obsidian que establezca el ancho máximo del área de contenido de la nota en 900px”
“Escríbeme un fragmento CSS para Obsidian que establezca el interlineado del cuerpo en 1.8”
“Escríbeme un fragmento CSS para Obsidian que cambie el color del H1 a azul oscuro”
La IA te dará un fragmento de código CSS completo que puedes copiar y usar directamente.
Algunos consejos para obtener mejores resultados de la IA:
- Especifica que es un fragmento CSS para Obsidian, de lo contrario la IA podría darte CSS web normal con nombres de variables incorrectos.
- Pídele a la IA que agregue comentarios, dile “Por favor, agrega comentarios junto a cada propiedad explicando qué hace” para que puedas entender tu archivo más tarde.
- Cambia una cosa a la vez, un archivo de fragmento para una cosa — es más fácil de depurar y desactivar individualmente.
Ejemplo de conversación:
Me: Write me an Obsidian CSS Snippet to set the maximum width of the note content area to 900px, please add comments.
AI:
.markdown-source-view, .markdown-reading-view {
/* Limit the maximum width of the note content area */
--file-line-width: 900px;
}
Eso es todo. No necesitas entender la sintaxis de CSS, no necesitas buscar documentación. Describe lo que quieres, obtén el código, pégalo, listo.
¿Dónde colocar el CSS? ¿Cómo hacerlo funcionar?
Los fragmentos CSS tienen una ubicación de almacenamiento fija. Solo sigue estos pasos.
Paso 1: Encuentra la carpeta de fragmentos
Ruta: Raíz de tu bóveda → carpeta .obsidian → carpeta snippets
.obsidian es una carpeta oculta. En Mac, presiona Command + Shift + . para mostrar archivos ocultos. Si la carpeta snippets no existe, créala manualmente.
Por supuesto, también puedes acceder directamente desde Ajustes.
Paso 2: Crea un archivo .css
En la carpeta snippets, crea un nuevo archivo de texto, cambia la extensión a .css. Ponle el nombre que quieras, pero se recomienda usar un nombre descriptivo como note-width.css o line-height.css. Pega el código de la IA y guárdalo.
Alternativamente, puedes abrir esta carpeta y dejar que la IA escriba el archivo CSS directamente allí.
Paso 3: Actívalo en Obsidian
Ruta: Ajustes → Apariencia → fragmentos CSS
Desplázate hasta el final de la página, verás una sección “fragmentos CSS”. Haz clic en el icono de actualizar a la derecha, y el archivo que acabas de crear aparecerá en la lista. Haz clic en el interruptor junto al nombre del archivo, el interruptor cambia de color y el fragmento se activa. La interfaz cambia inmediatamente, no es necesario reiniciar. Si el efecto no es el correcto, desactiva el interruptor y vuelve a revisar el código.
Cómo uso CSS yo mismo
Aquí hay algunos fragmentos que uso realmente, como referencia.
Ampliar el área de notas – Este es el que más uso: establece un ancho máximo más amplio para el área de contenido de la nota, para que haya menos espacio en blanco en pantallas grandes.
Ajustar el interlineado – El interlineado predeterminado es un poco ajustado para mí, así que uso CSS para aumentarlo ligeramente y hacer la lectura más cómoda.
Ocultar elementos no utilizados – Hay algunos botones e iconos en la interfaz de Obsidian que nunca uso. Los configuro con display: none mediante CSS para ocultarlos, haciendo la interfaz más limpia.
Ajustes de estilo de callouts – No me gustaban los colores predeterminados de los bloques de callout en cierto tema, así que usé CSS para cambiarlos a colores más suaves.
Estos cuatro fragmentos están almacenados en cuatro archivos .css separados, cada uno se puede activar individualmente. Si después de un tiempo encuentras que uno no te conviene, simplemente desactívalo — no interfieren entre sí.
Resumen
Lo que aprendiste hoy:
- CSS es la regla para controlar la apariencia de la interfaz; Obsidian usa fragmentos CSS para ajustes locales.
- Los temas son estilos generales; los fragmentos son ajustes de detalle — funcionan juntos.
- No necesitas escribir CSS tú mismo; dile a la IA lo que quieres cambiar y copia el código que te dé.
- Ruta de almacenamiento de fragmentos: Raíz de la bóveda →
.obsidian/snippets/→ archivo.css. - Actívalo en Ajustes → Apariencia → fragmentos CSS, activa el interruptor para que funcione.
Conclusiones clave:
- Describir tus necesidades a la IA para que escriba CSS es mucho más eficiente que aprender la sintaxis de CSS tú mismo.
- Un fragmento hace una cosa, facilitando la gestión y la depuración.
- Los interruptores se pueden desactivar en cualquier momento — seguro y reversible, no hay que preocuparse por romper la interfaz.