Cómo utilizar fragmentos de CSS en Obsidian

Los fragmentos de hojas de estilos en cascada (CSS) le ayudan a agregar estilos personalizados a una bóveda de Obsidian. Son herramientas poderosas que ayudan a definir diferentes partes de la interfaz de usuario, como el color, la posición y el tamaño de los elementos. Aprender a usar fragmentos de CSS en Obsidian significa que puedes crear una apariencia personalizada, lo que permite que Obsidian se acerque más a tu estilo de trabajo y personalidad. Esto puede mejorar su experiencia y productividad en general. Continúe leyendo para aprender cómo usar los fragmentos de CSS en Obsidian.

Agregar fragmentos en obsidiana

La primera parte del uso de fragmentos de CSS es agregarlos. Diferentes personalizaciones y estilos le permiten crear un espacio de trabajo visualmente atractivo y funcional. El uso de fragmentos hace que tomar notas sea gratificante y pertido. En caso de que aún no lo sepas, así es como agregas fragmentos a tu bóveda:

1. Vaya a “Configuración” y ábralo.
   
2. Elija “Apariencia” y seleccione “Fragmentos CSS”.
   
3. Seleccione la “Carpeta de fragmentos”.
   
4. Cree o descargue los fragmentos de CSS en esta carpeta.
   
5. Abra “Fragmentos” y “Recargar”.
   

Usando fragmentos de CSS en Obsidian

En Obsidian, el uso de fragmentos de CSS ayuda a sobrescribir o complementar diferentes temas más amplios que aplica al producto. Para usar fragmentos:

1. Agregue un archivo llamado .css a .obsidian/snippets.
   
2. Navega hasta la opción “Apariencia”.
   
3. Actualizar.
   
4. Elija el archivo resultante con un interruptor.
   

Diseñar obsidiana usando fragmentos de CSS

Los fragmentos de CSS son una parte integral de Obsidian porque describen cómo debe aparecer cada parte de la bóveda. Estos fragmentos le permiten personalizar prácticamente todas las características de Obsidian para que coincidan con sus preferencias. Hay varias opciones en lo que respecta al estilo de Obsidian.

Usar selectores para elegir un estilo

Decidir qué estilo darles estilo requiere “selectores”. Esto le permite identificar la pieza que necesita diseñar. Los selectores normalmente están anidados y es necesario ser específico. Si diseña “tipo de letra de comillas”, elija eso exactamente. Generalmente, al seleccionar “comillas” se cambia el aspecto de las citas en bloque en cada parte de la aplicación.

Utilice propiedades para aplicar estilo a la selección

Para diseñar su selección, debe utilizar “Propiedades”, que abundan en CSS. Para ser específico sobre el resultado, identifique las propiedades que necesitan edición y asígneles los valores objetivo.

Utilice la declaración para dar instrucciones

Para dar las instrucciones se utiliza una “declaración”. Esto incluye el selector (lo que necesita estilo), las propiedades que necesitan estilo (las partes que necesitan cambiar) y los nuevos valores de las propiedades (el aspecto que desea). Por ejemplo, si desea que todo el texto dentro del editor sea rojo, es como decir: “Obsidiana, busque todo el texto dentro del editor y dígales que se pongan rojos”. La declaración CSS debería verse así:

.markdown-source-view {
color: red;
}

.markdown-source-view actúa como selector. {} contiene las propiedades a las que se les debe aplicar estilo, mientras que el color representa la propiedad y el rojo es el valor deseado. Las relaciones de valor de todas las propiedades se muestran con la propiedad seguida de dos puntos, valor y punto y coma para finalizar la línea. Las propiedades deben estar a un guión del sector para diferenciarlas fácilmente.

Separar la declaración en filas es opcional, pero puede ayudarle a la hora de cambiar muchos elementos y aspectos diferentes.

La interpretación de CSS es secuencial, y las últimas declaraciones prevalecen sobre todas las demás que le preceden.

Utilice clases para seleccionar qué diseñar

Las “clases” se utilizan para seleccionar lo que necesita diseñar. Las clases se describen como atributos agregados de la estructura subyacente de la aplicación. Se pueden seleccionar mediante selectores. .markdown-fuente-vista identifica el contenido de la aplicación que está abierto a una vista del Editor. Un punto anterior en los nombres de objetos denota clases.

Elementos de destino

Los “elementos” también necesitan una orientación, dependiendo del estilo que se esté diseñando. Estas son partes estructurales de la aplicación. Los párrafos se pueden sangrar usando un selector de elementos “p”. No se utiliza puntuación anterior para describir elementos.

Utilice la lógica en los selectores para aumentar la especificidad

El uso de un espacio aumenta la especificidad al seleccionar descendientes: “abuelo padre-hijo” selecciona al hijo del padre que es hijo del abuelo. Por ejemplo, .cita en bloque de vista de fuente de rebajas selecciona comillas en bloque dentro de los paneles del modo de edición.

Si hay un período entre las clases, muestra una relación “y”. Por ejemplo, al ingresar “.programmer.designer” se seleccionarán elementos que tengan tanto “programador” como “diseñador” como clase.

Una coma es un separador lógico “o”. Por ejemplo, ingresar “blockquote,pre” apunta a los elementos “blockquote” y “pre”.

Puedes referirte a La guía de Mozilla sobre CSSya que la mayor parte de la lógica se aplica a la obsidiana.

Guardar las declaraciones de estilo

Al crear temas completos, guárdelos en VAULT/.obsidian/themes. Esto debe tener un nombre exclusivo y encontrarse en Configuración> Apariencia> Tema en Obsidian. Toque la opción “Recargar temas” si no se detecta. Si los ajustes se realizan en un tema existente y son pequeños, guárdelos en VAULT/.obsidian/snippets.

Personalización de temas de obsidiana mediante fragmentos de CSS

Obsidian tiene temas que te permiten realizar cambios. Puede optar por seguir probando un tema a la vez o crear un CSS personalizado que se adapte a sus necesidades utilizando DevTool.

Marque la opción “Aplicar fragmento de CSS”

Aquí es donde comienzas, y es para habilitar CSS personalizado. Esto permite a Obsidian leer el código y luego sobrescribir el estilo predeterminado. Los pasos a continuación ayudan a habilitar la opción CSS personalizada.

1. Abre la aplicación Obsidiana.
   
2. Navega a “Configuración” en tu página de obsidiana (abajo a la derecha). Esto abre la página de Configuración.
   
3. Seleccione “Apariencia” en la página de configuración.
   
4. En la parte inferior del menú “Apariencia”, marque la opción “Aplicar fragmento de CSS en (directorio)”.
   

Esto dirigirá la aplicación al archivo CSS ubicado en el directorio raíz de la bóveda. Esto se lee y se aplica el código CSS personalizado. En este punto, no hay ningún archivo CSS.

Aproveche al máximo Obsidian utilizando fragmentos de CSS

La obsidiana abre muchas posibilidades. Para aprovecharlo al máximo, debes probar algo adicional que haga que usarlo sea más emocionante y gratificante. Crear tus temas usando CSS puede ser todo lo que necesitas. Para hacerlo, primero debe habilitar los fragmentos de CSS en Obsidian a través del menú de configuración. CSS te permite modificar el estilo y agregar nuevos valores. Puedes lograr mucho más y jugar con el uso de fragmentos de CSS.

¿Alguna vez has intentado usar fragmentos de CSS en Obsidian? ¿Cuál fue tu experiencia? Por favor compártelo con nosotros en la sección de comentarios a continuación.