Mejores prácticas para crear estilos CSS personalizados para secciones de publicaciones

Desarrollador
1

Preámbulo

Mientras configuraba y personalizaba la instancia de Discourse de mi comunidad, he estado buscando formas de aprovechar el increíble poder de la plataforma para aumentar mi propia felicidad, así como la de mis usuarios.

Una de las cosas que me gustaría hacer sería añadir una firma personalizada a los mensajes privados que envío, y “firmarlos”. No quiero usar una imagen; sino más bien, mi nombre en una fuente de Google.

Conseguir que esto funcione me ayudará a entender cómo ofrecer fragmentos y similares a mi comunidad para su uso al componer publicaciones, por lo que el conocimiento es general, aunque la pregunta sea específica.

Mi razón para hacer la pregunta es que, antes de dedicar tiempo a crear estos bloques para su uso, me gustaría asegurarme de que es la mejor manera de hacerlo. Porque si se me ocurren algunas ideas ingeniosas, estoy pensando en compartir algunos ejemplos para iniciar una discusión y así poder obtener aún más ideas ingeniosas de otros más inteligentes que yo. :slight_smile:

La Pregunta: ¿Cómo poner texto en una publicación en un bloque que pueda ser dirigido mediante CSS?

Lo que he encontrado hasta ahora

Me encontré con el siguiente tema:

CSS personalizado dentro de una publicación / añadir clases personalizadas

De ese tema, obtuve esta respuesta:

Esto parece funcionar, pero me pregunto si actualmente se considera la mejor práctica/método para esto.

Ya que estoy aquí, una pregunta específica un poco fuera de tema, pero relacionada:

Estoy “abusando” de una personalización para que funcione mi idea de firma, solo que no está funcionando, y me pregunto si alguien tiene alguna idea al respecto.

Estoy cargando fuentes personalizadas de Google usando un plugin que sé que funciona porque todo mi foro está utilizando esas fuentes con éxito. Usé eso para forzar la carga de “Playwrite USA Traditional”.

Tengo el siguiente CSS en mi tema:

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

Mi div en mi publicación de ejemplo está efectivamente alineado a la derecha, pero está usando Arial o similar, no la fuente de mi tema, ni Playwrite.

¿Me estoy perdiendo algo tonto en mi configuración, o hay algo más que se te ocurra que me esté perdiendo? Esto no es una pregunta de Discourse.

Además, ¿hay una mejor manera de cargar una fuente de Google para usarla en mi sitio?

2

Recomiendo echar un vistazo a Generic bbcode wrapper for theme components

No se me ocurre nada basándome en lo que has compartido aquí. Si puedes compartir un enlace al foro en vivo, nos resultará más fácil ayudarte a encontrar el problema.

1 me gusta
3

Al verificar el código de inserción de https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400, parece que debería ser \"Playwrite US Trad\"

// <uniquifier>: Usa un nombre de clase único y descriptivo
// <weight>: Usa un valor de 100 a 400

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
1 me gusta
4

¡Ooh, eso parece muy bueno! ¡Gracias por la indicación!

Realmente, eso era todo lo que esperaba. No quería perder el tiempo, pero en caso de que hubiera algo muy obvio. jajaja.

Yo… tonto Google… ugh. Me centré en la dirección del componente para asegurarme de que el nombre fuera correcto, incluyendo las mayúsculas, que ni siquiera se me ocurrió comprobar el nombre REAL que Google podría estar usando. d’oh.

Para que conste, cargar el nombre de fuente correcto y hacer referencia al nombre de fuente correcto produce los resultados esperados originalmente.

Y ahora puedo “firmar” mis publicaciones:

712×532 40 KB

Gracias :slight_smile:

1 me gusta
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.