Requisitos
Para poder usar estos consejos y trucos, debes ser administrador de una instancia de Discourse autoalojada o de un plan alojado por Discourse superior a Basic.
Introducción
Discourse admite varios métodos para formatear y personalizar el contenido de una publicación. Puedes encontrar la lista aquí:
Pero a veces, querrás algo más específico, por ejemplo, un enlace que se vea como un botón.
Este es el tipo de modificación que aprenderemos aquí.
La lógica
Explicaré brevemente la lógica detrás de esto, pero puedes pasar al siguiente paso y sumergirte en un ejemplo práctico 
Discourse permite cualquier atributo HTML que comience con data- en el contenido de una publicación.
Esos son los atributos que apuntaremos con CSS para personalizar nuestro contenido.
Los llamaré atributos data- en este tutorial
Una forma de crear elementos con estos atributos es una etiqueta similar a BBcode: [wrap], a la que le añadiremos un valor de nuestra elección. Aquí elegimos “button” (podría ser cualquier otra cosa, incluso el nombre de tu perro 
):
[wrap=button]some text[/wrap]
Esto generará un elemento HTML con el siguiente atributo: data-wrap="button".
Primer ejemplo: un fondo rosa
Comencemos con un ejemplo práctico. Crearemos texto con un fondo rosa.
Como elemento de bloque
En tu publicación, en una línea vacía, escribe:
[wrap=pink]pink text[/wrap]
Esto creará un elemento div con el atributo data-wrap="pink".
Luego, agrega el siguiente CSS a tu tema.
Ve a Panel de administración → Personalizar → Temas → tu tema → Editar CSS/HTML → CSS.
Coloca el siguiente código CSS dentro:
[data-wrap="pink"] {
background: pink;
}
Luego haz clic en el botón Guardar.
Vuelve a tu publicación y mira el resultado:
Sí, ya es hermoso 
Notarás que el fondo cubre todo el ancho de la publicación. Como nuestro wrap es el único elemento en su línea, genera un elemento de bloque.
Puedes aprender más sobre la diferencia entre elementos HTML de bloques e inline aquí: HTML Block and Inline Elements.
Si quieres que tu fondo rosa abarque varias líneas (siguiendo siendo un bloque), necesitarás que ambas etiquetas [wrap] no tengan otro contenido ni texto en la misma línea:
[wrap=pink]
pink text
pink text
pink text
pink text
[/wrap]
Se verá así:
Como elemento inline
Ahora, agreguemos algún texto antes de [wrap], o después, o ambos 
. Por ejemplo:
Here is some [wrap=pink]pink text[/wrap] and it's awesome ✨
Aquí está el resultado:
Si hay texto u otros elementos en la misma línea que una de tus etiquetas [wrap], generará un elemento inline.
Segundo ejemplo: un enlace con apariencia de botón.
Jugar con la etiqueta [wrap] a veces puede llevar a resultados no deseados por varias razones, una de ellas es que puede ser un elemento de bloque o inline dependiendo del contexto.
Por lo tanto, describiremos dos métodos diferentes que logran el mismo resultado, pero podrás elegir el que más te convenga 
Un enlace de botón inline con [wrap]
La sintaxis para crear un enlace usando markdown es: [some text](https://some-link.etc).
Para personalizar el texto y hacerlo parecer un botón, insertaremos el wrap dentro de los corchetes. Aquí hay un ejemplo:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a blue button 🐳 !
No comentaremos qué genera este código. Sabes que, como escribiste [wrap=button], deberás apuntar a [data-wrap="button"] en tu CSS.
Así que, vamos, ¡agreguemos algo de CSS elegante para que se vea bonito! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
No detallaremos las reglas de CSS aquí. Hay muchos recursos de CSS en Internet, así que si quieres hacer modificaciones más específicas, primero tendrás que aprender sobre ello.
El resultado 
:
¿Se ve bien, verdad?
Un enlace de botón inline con contenido HTML regular
Dado que Discourse acepta código HTML, podemos decidir no usar las etiquetas [wrap] y usar HTML con un atributo data-. En este ejemplo, usaremos la sintaxis Markdown regular para el enlace y lo rodearemos con etiquetas <span>.
No podemos usar directamente una etiqueta de enlace <a> porque es una excepción y no permite ningún atributo data-.
Escribe:
This <span data-button>[link](https://discourse.org/)</span> is a green button 🐸 !
Esto generará un enlace dentro de una etiqueta <span> con un atributo data-button, lo que significa que el CSS será un poco más complicado. Tendremos que apuntar tanto a data-button como al enlace:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
¡Y aquí está el resultado!
Para ir más allá
Una lista personalizada usando [wrap]
Las etiquetas [wrap] y los atributos data- se pueden usar en muchos contextos y puedes personalizar contenido más avanzado. El límite es principalmente tu conocimiento de CSS (y HTML en menor medida).
Daré un solo ejemplo sin explicación personalizando una lista en la que cada elemento se antepone con un emoji de gato:
Texto:
[wrap=cat]
- Felix
- Garfield
- Nat's cat
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
Resultado:
Usando las variables de color de tu propio tema
Si permites a los usuarios usar diferentes temas o colores, tus modificaciones pueden no verse bien para cada uno, especialmente si tienen opciones entre esquemas de colores claros y oscuros.
Una buena práctica es usar las variables de color de Discourse en lugar de colores “codificados” como red, #FF0000 o rgb(255,0,0).
Aquí hay un ejemplo en el que el color de fondo del botón usará el color primario de la paleta actual, y el texto usará el color secundario:
Texto:
This [[wrap=button]nice link[/wrap]](https://discourse.org/) is a button 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Así se verá para un usuario que usa el esquema de colores Solarized Light:
Y si usan el esquema de colores Solarized Dark:
Conclusión
Ahora tienes las bases para crear elementos personalizados usando el elemento [wrap] y los atributos data-.
Para hacer personalizaciones más avanzadas, aprender CSS es primordial. Encontrarás muchos tutoriales en Internet.
La siguiente guía de Discourse también puede ser de ayuda: Making custom CSS changes on your site.
Usar las herramientas de desarrollo de tu navegador de Internet también te mostrará fácilmente la lista de las variables de color de tu Discourse y cómo se ve cada una:
¡No dudes en sugerir cualquier modificación para esta guía!
Este documento está controlado por versiones - sugiere cambios en github.
