Colección de Snippets CSS para Obsidian.md

Nivel: 1/3 Borrador

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 gustó este post?
🎥 Mira más en YouTube.
☕ Apóyame con un café :)
✉️ Recibe más guías como esta ¡suscribiéndote!