Colección de Snippets CSS para Obsidian.md

Nivel: 1/3 Borrador [[calidad-blog]]

Obsidian cuenta con una gran cantidad de plugins hechos por la comunidad, pero también te permite utilizar archivos .css para hacer que obsidian tenga ciertos comportamientos o mejoras a nivel visual.

En este post iré recolectando todos los fragmentos de CSS (snippets CSS) y la funcionalidad o cambios que te permiten habilitar en tu instalación de obsidian.

También te dejo un video donde muestro un par de snippets y como activarlos en obsidian.

Snippets #

Iconos para notas y carpetas #

/* Emoji */
/*.nav-file-title-content::before { content: '🗒 '; }
.nav-folder-title-content::before { content: '📂 '; }*/

/* Flat font */
/* Requires: https://icomoon.io/#icons-icomoon/liga-font */
.nav-folder-children .nav-file-title-content:first-child::before {
  content: "\e924  ";
  font-family: "IcoMoon-Free";
}
.nav-folder-children .nav-folder-title-content::before {
  content: "\e930  ";
  font-family: "IcoMoon-Free";
}

Fuente: https://github.com/kmaasrud/awesome-obsidian/blob/master/code/css-snippets/custom-icons-differing-files-and-folders.css #

Este fragmento de CSS nos permite añadir un icono para nuestras notas y uno para las carpetas. Tenemos que tener instalado los iconos de ico-moon para que funcione.

En caso de que no quieras instalar IcoMoon, tendrás que utilizar VSCode para copiar el emoji de la nota y la carpeta en la parte de content de la siguiente forma:

/* Emoji */

.nav-folder-children .nav-file-title-content:first-child::before {
  content: "🗒  ";
  font-family: "IcoMoon-Free";
}
.nav-folder-children .nav-folder-title-content::before {
  content: "📂  ";
  font-family: "IcoMoon-Free";
}

Acá te comparto un video en donde instalo esta fuente y también utilizo los emojis del código CSS.

¿Te interesa más contenido sobre Obsidian?

Mira esta lista de reproducción sobre Plugins de Obsidian.

¿Te gustó el contenido? Píchame un café :)

¡Gracias por leer y hasta el próximo tutorial!