Requisitos
Para poder utilizar estos consejos y trucos, necesitas ser administrador de una instancia de Discourse autoalojada o de un plan alojado por Discourse superior al Básico.
Introducción
Discourse admite varios métodos para dar formato 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 parezca un botón.
Este es el tipo de modificación que aprenderemos aquí.
La lógica
Explicaré brevemente la lógica subyacente, pero puedes pasar directamente al siguiente paso y saltar a un ejemplo práctico 
Discourse permite cualquier atributo HTML que comience con data- en el contenido de una publicación.
Estos 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 mediante una etiqueta similar a BBcode: [wrap], a la cual añadiremos un valor a nuestra elección. Aquí elegimos “button” (que podría ser cualquier otra cosa, incluso el nombre de tu perro 
):
[wrap=button]algun texto[/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]texto rosa[/wrap]
Esto creará un elemento div con el atributo data-wrap="pink".
Luego, agrega el siguiente CSS a tu tema.
Ve al panel de Administración → Personalizar → Temas → tu tema → Editar CSS/HTML → CSS.
Pega 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 observa 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 bloque 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 o texto en la misma línea:
[wrap=pink]
texto rosa
texto rosa
texto rosa
texto rosa
[/wrap]
Esto se verá así:
Como elemento inline
Ahora, agreguemos algo de texto antes de [wrap], o después, o ambos 
. Por ejemplo:
Aquí hay algo de [wrap=pink]texto rosa[/wrap] y es increíble ✨
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.
Manipular la etiqueta [wrap] a veces puede dar resultados no deseados por varias razones, una de ellas es que puede ser un elemento de bloque o inline dependiendo del contexto.
Así que 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: [algun texto](https://algún-enlace.etc). Para personalizar el texto y hacerlo parecer un botón, insertaremos el wrap dentro de los corchetes. Aquí hay un ejemplo:
Este [[wrap=button]enlace bonito[/wrap]](https://discourse.org/) es un botón azul 🐳 !
No comentaremos sobre lo que produce este código. Sabes que, como escribiste [wrap=button], tendrás que apuntar a [data-wrap="button"] en tu CSS.
Así que vamos, ¡agreguemos un CSS elegante para que quede bonito! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
No detallaremos las reglas CSS aquí. Hay muchos recursos 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 permitirá ningún atributo data-.
Escribe:
Este <span data-button>[enlace](https://discourse.org/)</span> es un botón verde 🐸 !
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- pueden usarse 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 precederá con un emoji de gato:
Texto:
[wrap=cat]
- Felix
- Garfield
- Gato de Nat
[/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 que los usuarios usen diferentes temas o colores, tus modificaciones podrían no verse bien para cada uno, especialmente si tienen opciones entre esquemas de color claro y oscuro.
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:
Este [[wrap=button]enlace bonito[/wrap]](https://discourse.org/) es un botón 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Así es como se verá para un usuario que usa el esquema de color Solarized Light:
Y si usan el esquema de color Solarized Dark:
Conclusión
Ahora tienes los fundamentos 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 desarrollador de tu navegador web también te mostrará fácilmente la lista de las variables de color de tu Discourse y cómo se ve cada una:
¡Siéntete libre de sugerir cualquier modificación para esta guía!
Este documento está controlado por versiones: sugiere cambios en GitHub.
