Obsidian es un gestor de notas del tipo “segundo cerebro” que te permite organizar ideas, conectarlas y crear una red de conocimiento personal. Es ideal para tomar apuntes, escribir un diario, investigar, gestionar proyectos y aprender de manera más efectiva. Es gratuita, multiplataforma y de código abierto.
¿Cómo modificar los estilos CSS en Obsidian?
Si trabajas con Obsidian y alguna vez te has preguntado si es posible cambiar aspectos visuales de esta herramienta, la respuesta es que sí, y es muy simple; solo necesitas un poco de conocimientos en HTML y CSS. Si no los tienes, puedes tomar el curso gratuito que ofrecemos en Azul School: Curso gratuito de HTML y CSS con certificado. – Azul School
Identificando los elementos.
Imagina que deseamos cambiar los estilos de la forma en que se ven las tablas en Obsidian. Usemos este pequeño ejemplo:
Así es como se ve con el tema que tengo instalado actualmente. Lo primero que necesitamos es saber qué clases CSS le están dando estilos actualmente a esa tabla; para eso, podemos usar las DevTools.
Las DevTools son herramientas en navegadores como Chrome o Firefox que permiten a los desarrolladores inspeccionar y depurar aplicaciones web. Proporcionan funciones para modificar código en tiempo real, ejecutar comandos JavaScript, analizar rendimiento y seguridad, y depurar código. Son esenciales para el desarrollo web eficiente. (Esto significa que Obsidian se ejecuta en un navegador).
Para activar las DevTools, presionamos al mismo tiempo: Ctrl + Shift + I y se abrirá una ventana como esta:
En la imagen de ejemplo de arriba, puedes observar que he encerrado en rojo una opción. Esta opción nos permite seleccionar un elemento y ver sus propiedades. En este caso, podemos hacer clic en esa opción e ir a hacer clic en la tabla para ver cómo está compuesta. Aquí tienes más detalles:
En la imagen de arriba, observamos que hemos identificado la tabla y la clase que tiene por defecto “<table class="table-editor" tabindex="-1">“. La clase es “table-editor“, y podemos usarla para aplicarle estilos personalizados.
Aplicando estilos personalizados.
Para aplicar estilos personalizados, sigue estos pasos:
- Ve a Configuraciones > Apariencia. En la parte inferior, verás un mensaje que dice “No CSS snippets found”, justo debajo de ese mensaje se menciona dónde debería estar el archivo de estilos CSS.
- Dirígete a la carpeta mencionada anteriormente “nombre-vault/.obsidian/snippets” y crea un archivo; yo le llamaré “style.css”.
Es posible que no puedas crear el archivo con la extensión “.css”. Te recomiendo tener un editor de código; yo uso [Visual Studio Code](Download Visual Studio Code – Mac, Linux, Windows). Abre este editor, accede a la carpeta “snippets” y desde el editor crea el archivo. También será útil para editarlo.
- Abre el archivo con el editor de código de preferencia y coloca los estilos deseados.
Yo agregué los siguientes estilos:
thead {
background-color: rgba(61, 61, 61, 0.397);
}
Este estilo se aplica directamente al elemento, sin clase, y es para que la cabecera tenga un fondo.
table.table-editor, table.table-editor td {
border: solid 1px rgba(61, 61, 61, 0.397) !important;
}
Este utiliza el elemento y su clase, aplicándose tanto a la tabla en general como a cada campo de la misma. Sirve para agregar bordes sólidos de un píxel de un color específico.
Incluí el "!important" para que respetara este estilo sin importar que otros complementos ya hayan destinado estilos a los mismos elementos.
Por último, solo es necesario regresar a Configuraciones > Apariencia. En la parte inferior, activa la opción “Apply CSS snippet”.
Este es el resultado:
Espero que todo haya quedado claro. Si hay alguna duda, en la sección de abajo están las opciones para contactarme.
