¿Así que estás interesado en diseñar tu propio tema para Discourse? ¡Has llegado al lugar correcto 
Esta guía se centrará más en los aspectos de SCSS/CSS del trabajo con temas en Discourse. Si también tienes conocimientos en JS/EmberJs/Handlebars, puedes profundizar aún más consultando esta guía.
Te describiré mi método personal para diseñar y aplicar temas en Discourse. Como en la mayoría de las cosas, hay MUCHAS formas de implementar tus propios diseños. Disfruto usando mucho las herramientas de inspección al crear temas, y te mostraré un par de veces cómo lo hago en esta publicación.
Configuración para el diseño de temas
Por favor, lee la Guía para principiantes sobre el uso de temas de Discourse, así como la Estructura de los temas… antes de continuar. No es necesario tener un conocimiento profundo en este punto, pero estos artículos te darán un poco más de familiaridad antes de comenzar.
Para trabajar de la mejor manera con el diseño de temas en Discourse, sugiero configurar lo siguiente para ofrecerte el proceso de diseño más rápido y eficiente. Estos pasos te permitirán ver tus cambios a medida que los realizas, sin tener que ‘guardar’ y actualizar desde el panel de administración de un sitio de Discourse.
Es totalmente posible trabajar con esta guía usando la consola de administración (siempre que tengas acceso de nivel de administrador a un foro de Discourse.)
- Instala Discourse Theme CLI y lee ese tema para entender qué puede hacer.
- Obtén una clave API de https://discourse.theme-creator.io/
- Inicia sesión con tu cuenta de Meta
- Haz clic en Mis temas
- Haz clic en Clave API
- En el modal emergente, haz clic en Generar clave API y copia la clave generada para ti (la usaremos en un momento)
Ejecutando Discourse Theme CLI
Con Discourse Theme CLI instalado y tu clave API lista, abre tu editor de texto o ventana de terminal preferida y cambia tu directorio de trabajo a donde deseas configurar la carpeta de tu tema.
Una vez allí, ejecuta el siguiente comando discourse_theme new tu_nombre_de_tema y completa las indicaciones de la siguiente manera:
-
¿Cómo te gustaría llamar a tu tema? Elige el nombre de tu tema
-
¿Te gustaría comenzar a observar este tema? Sí
-
¿Cuál es la URL raíz de tu sitio de Discourse?
https://discourse.theme-creator.io/ -
¿Te gustaría guardar el nombre de este sitio en…? Sí
-
¿Cuál es tu clave API? Ingresa la clave API que obtuviste de Theme Creator
-
¿Te gustaría guardar esta clave API…? Sí
-
Elige Crear y sincronizar con un nuevo tema cuando se te solicite
-
Elige No hacer nada cuando se te pregunte sobre los componentes de temas secundarios
Si todo funcionó correctamente, ahora deberías poder navegar a Mis temas en https://discourse.theme-creator.io/ y ver tu nuevo tema en la lista de temas a la izquierda.
Para ver estos cambios en tiempo real, haz clic en el nombre de tu tema y, en la parte inferior del área de información, haz clic en Vista previa
El CLI de Temas también está ahora observando cualquier cambio en el directorio recién creado y guardará, así como actualizará el tema en theme-creator con cada cambio.
Primeros pasos
El CLI de Temas de Discourse ha creado una estructura básica de tema para nosotros dentro de la carpeta con el nombre que especificamos en el comando que ejecutamos anteriormente. Se generan muchos archivos que no usaremos, así que procederemos a eliminar todo excepto lo siguiente:
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
Dentro del directorio, ejecuta también rm -rf .git para eliminar el seguimiento de versiones de git; no será necesario para esta guía.
Tu directorio de tema debería verse ahora así:
Vale la pena mencionar que los estilos que agregamos a estos archivos se renderizarán en sus respectivos casos de uso. Los estilos en common.scss se aplicarán a escritorio + móvil, mientras que los estilos en desktop.scss solo se aplicarán a la navegación de escritorio, y los de mobile.scss solo se aplicarán a las vistas móviles.
Hola Mundo (en color)
Discourse utiliza SCSS para su estilado, por lo que para aprovechar al máximo los estilos, es posible que quieras familiarizarte con SASS, pero si no, aún podrás seguir esta guía.
Bien, ahora lleguemos a lo que todos hemos estado esperando… ¡EL DISEÑO DE TEMAS!
En este momento, nuestro about.json actualmente no tiene ningún esquema de color definido, así que pega el siguiente código en esa sección y guarda.
{
"name": "mi tema",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Default": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
Si tienes tu navegador abierto, no habrías visto ningún cambio生效, porque este es el esquema de color predeterminado que se usa cuando no hay ningún esquema presente.
Descripción general del tema
Para tener algo que implementar realmente en esta guía, te guiaré a través de la creación de un tema simple basado en esta paleta de colores.
Cambiar el color de fondo + color de texto principal
Hagamos algo muy sencillo. Procederemos a cambiar el valor "Secondary" de nuestro esquema de color actual. Cambiémoslo a "secondary": "EEF4F7" (esto cambia el color de fondo). También cambiemos el valor "primary" a "203243".
Con solo esa línea, ya hemos cambiado la apariencia y sensación de nuestro foro. Muchas personalizaciones pueden realizarse simplemente editando los colores en el esquema de color.
Uso del esquema de color
Todas las siguientes claves están definidas en el archivo about.json bajo el nombre del esquema de color correspondiente. Estas descripciones son una buena referencia para ayudarte a entender cuál es el propósito principal de cada nombre de variable:
| Color | Descripción |
|---|---|
| primary | La mayoría del texto, iconos y bordes |
| secondary | El color de fondo principal y el color de texto de algunos botones |
| tertiary | Enlaces, algunos botones, notificaciones y color de acento |
| quaternary | Enlaces de navegación |
| header_background | Color de fondo del encabezado del sitio |
| header_primary | Texto e iconos en el encabezado del sitio |
| highlight | El color de fondo de los elementos resaltados en la página, como publicaciones y temas |
| danger | Color de resaltado para acciones como eliminar publicaciones y temas |
| success | Se usa para indicar que una acción tuvo éxito |
| love | El color del botón de “Me gusta” |
Cada una de estas variables está disponible para que la usemos dentro de nuestros archivos SCSS de la siguiente manera.
body {
background-color: var(--primary);
}
También se crean otras versiones de cada color para que las usemos. Cosas como var(--primary-medium) o var(--primary-very-low) pueden usarse para obtener diferentes tonos del mismo color.
Cambemos los otros colores en nuestro esquema de color “Default” para que coincidan con esto:
"Default": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
Puedes ver todas las variables disponibles para usar en tus archivos SCSS si haces clic en el enlace Guía de estilos mientras haces una vista previa de tu tema en theme creator, y luego haces clic en Colores en el menú de la izquierda.
La Guía de estilos es una sección muy útil para consultar cuando estás creando un tema personalizado. Cada átomo te mostrará cómo se verán ciertos elementos de Discourse con tus estilos aplicados.
Profundizando
Con la sección anterior bajo nuestro cinturón, creo que es hora de profundizar un poco más en lo que se puede hacer en Discourse solo con SCSS. (Pista: ¡MUCHO!)
Estilando el encabezado
Notarás que nuestros cambios anteriores en el esquema de color han dejado algo que desear en nuestro encabezado. ¡Los iconos apenas son visibles!
El encabezado de Discourse incluye un contenedor (con un color de fondo) para alojar un logotipo del sitio, así como los iconos de navegación a la derecha. Todos estos pueden personalizarse.
La clase objetivo para personalizar el encabezado es .d-header.
En nuestro archivo common/common.scss, agreguemos lo siguiente:
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
Esto eliminará la sombra de caja predeterminada en el encabezado, le dará un poco más de altura y establecerá un borde inferior para darnos cierta separación.
Para los iconos: dentro de los corchetes SCSS de .d-header, agreguemos este código anidado.
.d-header {
// ...código anterior
.d-icon {
color: var(--primary-low-mid);
}
}
Esto se ve bien, pero un ojo atento notará que el aumento de la altura del encabezado nos ha dejado menos espacio entre este y el resto de los elementos del foro de Discourse.
El espacio entre el área principal y el encabezado está controlado por el objetivo #main-outlet. Aumentemos un poco este espacio agregando lo siguiente al final de tu archivo common/common.scss.
#main-outlet {
padding-top: 6.5em;
}
Contenedor de navegación
El contenedor de navegación incluye las siguientes partes.
El área más a la izquierda son los menús desplegables de filtro por categoría/etiqueta, seguidos de los enlaces de navegación y finalizados con el botón Nuevo tema.
Menú desplegable de Categoría / Etiqueta
Hagamos algunos cambios en esta área. Para ello, agrega lo siguiente a tu archivo common.scss.
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
Aquí apuntamos a .select-kit-header para darles un radio de borde idéntico, así como un color de fondo más claro.
Hacer clic en cualquiera de estos abre un menú desplegable.
Actualmente, también tiene esquinas duras, así que agreguemos algunos estilos para redondearlos y cambiar el color de fondo para que sea el mismo que el del encabezado.
.navigation-container {
.select-kit.combo-box {
// ...código anterior
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
Esto resulta en la siguiente apariencia…
Si te fijas bien, puedes ver que nuestros cambios han dejado un pequeño borde visible en la parte superior derecha del área de búsqueda.
Arreglémoslo mirando en el inspector de nuestro navegador. Esta es siempre una herramienta súper útil para aprender qué clases/IDs necesitamos apuntar para aplicar estilos correctamente.
Con el menú desplegable visible, haz clic derecho en el área de búsqueda y ‘Inspecciona’ el elemento en tu navegador.
Podemos ver que esta entrada está ubicada dentro de un div con una clase de select-kit-filter.
Si miramos las reglas que se aplican a este selector, podemos ver que actualmente tiene un borde superior e inferior, así como algún relleno aplicado. Solo queremos cambiar el estilo del borde superior.
Agrega el siguiente código anidado en el SCSS de .select-kit-body de antes.
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...código anterior
.select-kit-filter {
border-top: 0px;
}
}
}
Con eso, nuestro código para estilizar el contenedor de navegación debería verse así.
.navigation-container {
// Menú desplegable de Categoría + Etiqueta
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
Enlaces de navegación
Agreguemos algunos estilos para que estos enlaces de navegación se vean similares a esto:
Usemos nuestro inspector nuevamente para descubrir qué deberíamos apuntar aquí.
Podemos ver que nuestros elementos de navegación están dentro de un UL con una clase de "nav nav-pills ..."
De vuelta en nuestro archivo common.scss, debajo de la sección anterior, pero aún anidado dentro de navigation-container, agreguemos lo siguiente:
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
Este cambio apuntará solo a nuestros enlaces con una clase de active que son hijos de nav-pills. Este cambio debería hacer que nuestro enlace activo se vea así:
Esto está bien, pero me gustaría que el borde inferior se extienda solo hasta donde llega el texto. Para hacer esto, arriba de la línea &.active {, agreguemos lo siguiente, lo cual afectará a todos los enlaces A dentro de las etiquetas <li> de navegación.
// ...otro código
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...más código
}
}
}
Ahora, necesitamos estilizar el efecto “hover” para que sea igual al efecto “active”.
Debajo de nuestro &.active anterior, agreguemos
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
Así que todo nuestro código de navegación ahora debería verse así:
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
Botones
Los botones en Discourse vienen en muchas formas y tamaños. Puedes ver una variedad de ellos en la Guía de estilos en la sección de Botones.
Me gustaría cambiar la mayoría de los botones de este tema para que sean redondeados con algún estilo personalizado. Esto cambiará el botón + Nuevo tema, así como otros botones en todo el sitio.
En la parte inferior de nuestro archivo common.scss, agreguemos lo siguiente:
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
Esto hará que nuestros botones se vean así:
Ahora que nuestros botones están estilizados, me gustaría señalar algo sobre el estilo de los botones y por qué es importante probar todos tus diseños.
Haz clic en un tema en la vista previa de tu sitio y luego presiona el botón responder en una respuesta al tema, o desde el botón de respuesta al final del flujo del tema. Verás que nuestro estilo de botones ha afectado algunas cosas que quizás no habíamos previsto.
No quiero que estos botones de edición de texto se vean afectados por mi estilo anterior. Esto requiere un poco de SASS/CSS más complejo, pero podemos hacer que nuestro código :not() no afecte a estos botones. 
Agreguemos esta línea de código, delante de nuestro objetivo actual .btn. Esto le dirá a nuestros estilos que solo se apliquen a los botones que no son hijos de .d-editor-button-bar.
:not(.d-editor-button-bar) > .btn
Bien, eso funcionó muy bien… ¡pero espera! Ahora hay este extraño rebelde haciendo su propia cosa.
Al inspeccionarlo en el navegador, puedo ver que este botón tiene una clase de .select-kit-header porque al hacer clic en este engranaje, se mostrarán más opciones.
Ahora que sabemos que NO queremos apuntar a este botón, agreguemos más funcionalidad :not() a nuestro código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
Esto seleccionará todos los botones que NO son hijos de .d-editor-button-bar y que no tienen la clase .single-select-header. Sé que esto es un poco confuso, pero dentro de Discourse hay muchas partes móviles, así que a veces el estilo necesita ser muy específico para afectar correctamente los elementos.
También he notado que nuestro estilo actual afecta de manera incómoda al botón de cerrar modal. Hacer clic en cualquier cosa que abra un modal te permitiría ver esto, o incluso más fácil, podemos navegar a la sección modal de la Guía de estilos.
Para arreglar esto, agregaré otro objetivo a nuestro código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
Continuando…
Veo un botón más que parece no haber sido afectado por nuestro código. Es el botón Seguimiento ubicado en la parte inferior de un flujo de publicaciones de un tema.
Agregaré la siguiente línea, después de una coma, a nuestro código actual .btn.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
Esto apuntará correctamente al botón que aparece en esta sección, y por ahora, hemos terminado de estilizar la parte superior de nuestro foro.
A dónde ir desde aquí
Esta guía estaba destinada a raspar la superficie de cómo puedes personalizar tu propio tema para Discourse. Espero que ahora tengas más información sobre cómo apuntar a áreas de la aplicación para tus propias personalizaciones.
Recuerda: MUCHAS cosas pueden personalizarse usando solo SCSS. Si deseas profundizar aún más en tu desarrollo, te recomendaría leer los artículos vinculados en la parte superior de esta publicación.
Siéntete libre de hacer cualquier pregunta y con gusto intentaré ayudarte o indicarte en la dirección correcta.
Este documento está controlado por versiones: sugiere cambios en GitHub.