Entonces, ¿estás interesado en diseñar tu propio tema para Discourse? Has llegado al tema adecuado 
Esta guía se centrará más en los aspectos de SCSS/CSS al trabajar con temas en Discourse. Si también tienes conocimientos de JS/EmberJs/Handlebars, puedes profundizar aún más consultando esta guía.
Te describiré mi método personal para el diseño y la creación de temas en Discourse. Como en la mayoría de las cosas, hay MUCHAS formas de implementar tus propios diseños. Me gusta usar 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 la creación de temas
Por favor, lee el Guía para principiantes sobre el uso de temas de Discourse, así como la Estructura de los temas… antes de continuar. No es necesario un conocimiento profundo en este punto, pero estos artículos te darán un poco más de familiaridad antes de comenzar.
Para trabajar mejor con la creación de temas en Discourse, sugiero configurar lo siguiente para ofrecerte el proceso de diseño más rápido y fluido. Estos pasos te permitirán ver tus cambios a medida que los haces, sin tener que ‘guardar’ y actualizar desde un panel de administración de un sitio de Discourse.
Es totalmente posible trabajar a través de 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 lo que 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 la ventana emergente, haz clic en Generar clave API y copia la clave generada para ti (la usaremos en un momento)
Ejecutando la Discourse Theme CLI
Con la Discourse Theme CLI instalada y tu clave API lista, abre tu editor de texto o ventana de terminal preferida y cambia tu directorio de trabajo a donde deseas que se configure tu carpeta de tema.
Una vez allí, ejecuta el siguiente comando discourse_theme new your_theme_name y completa los prompts 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 este nombre de 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 tema hijo
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 luego, en la parte inferior del área de información, haz clic en Vista previa
La Theme CLI 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
La Discourse Theme CLI ha creado un andamiaje de tema para nosotros dentro del nombre de carpeta que especificamos en el comando que ejecutamos anteriormente. Se generan muchos archivos que no utilizaremos, así que avanzaremos y eliminaremos 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 control de versiones de git, no será necesario para esta guía.
Tu directorio de tema debería verse ahora así:
Vale la pena señalar que los estilos que agregamos a estos archivos se renderizarán en su caso de uso respectivo. 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 aquellos en mobile.scss solo se aplicarán a las vistas móviles.
Hola Mundo (con color)
Discourse usa SCSS para su estilizado, por lo que, para aprovechar al máximo los estilos, puede que quieras familiarizarte con SASS, pero si no, aún podrás seguir esta guía.
Bien, ahora a lo que todos hemos estado esperando… ¡CREAR TEMAS!
En este momento, nuestro about.json actualmente no tiene ningún color_schemes definido, así que pega el siguiente código en esa sección y luego guarda.
{
"name": "my theme",
"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ás visto ningún cambio que se hiciera efectivo, porque este es el esquema de color predeterminado que se usa cuando no hay ningún esquema presente.
Resumen del tema
Para tener algo con lo que trabajar en esta guía, te guiaré a través de la creación de un tema simple basado en esta paleta de colores.
Cambio del color de fondo + color de texto primario
Hagamos algo muy simple. Cambiaremos el valor de "Secondary" de nuestro esquema de color actual. Cambiémoslo a "secondary": "EEF4F7" (esto cambia el color de fondo). También cambiemos el valor de "primary" a "203243".
Con solo esa línea, ya hemos cambiado la apariencia y sensación de nuestro foro. Se puede hacer mucha personalización 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 de la cabecera del sitio |
| header_primary | Texto e iconos en la cabecera 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 fue exitosa |
| love | El color del botón de me gusta |
Cada una de estas variables está disponible para su uso 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) se pueden usar para obtener diferentes tonos del mismo color.
Cambiemos 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 estilo mientras previsualizas tu tema en theme creator, y luego haces clic en Colores en el menú izquierdo.
La Guía de estilo 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 en lo que se puede hacer en Discourse con solo SCSS. (Pista: ¡MUCHO!)
Estilizado de la cabecera
Notarás que nuestros cambios anteriores al esquema de color han dejado algo que desear en nuestra cabecera. ¡Los iconos apenas son visibles!
La cabecera de Discourse incluye un contenedor (con un color de fondo) para mantener un logotipo del sitio, así como los iconos de navegación a la derecha. Todos estos se pueden personalizar.
La clase objetivo para personalizar la cabecera 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 la cabecera, le dará un poco más de altura, así como establecer un borde inferior para darnos algo de 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 la altura aumentada de la cabecera nos ha dado menos espacio entre ella y el resto de los elementos del foro de Discourse.
El espaciado entre el área principal y la cabecera lo controla el objetivo #main-outlet. Aumentemos este espaciado un poco 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 piezas.
El área más a la izquierda son los menús desplegables de filtro de categoría/etiqueta, seguidos por los enlaces de navegación, terminando con el botón de Nuevo Tema.
Menú desplegable de Categoría / Etiqueta
Hagamos algunos cambios en esta área. Para hacerlo, 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í dirigimos el objetivo a .select-kit-header para darles a cada uno un radio de borde idéntico, así como un color de fondo más claro.
Haciendo clic en cualquiera de estos, se 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 la cabecera.
.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 miras de cerca, puedes ver que nuestros cambios han dejado un pequeño borde visible en la parte superior derecha del área de búsqueda.
Corrijamos esto mirando en el inspector de nuestro navegador. Esta es siempre una herramienta súper útil para aprender qué clases/IDs necesitamos dirigir para aplicar estilos correctamente.
Con el menú desplegable visible, haz clic derecho en el área de búsqueda e ‘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 están aplicando a este selector, podemos ver que actualmente tiene un borde superior e inferior, así como algo de relleno aplicado. Queremos cambiar solo 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 de nuevo para descubrir qué deberíamos dirigir 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 dirigirá 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 extendiera solo hasta el texto. Para hacer esto, por encima de la línea &.active {, agreguemos lo siguiente, que afectará a todos los enlaces A dentro de las etiquetas <li> de la 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 de “paso del ratón” para que sea el mismo que el efecto “activo”.
Debajo de nuestro &.active anterior, agreguemos
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
Entonces, todo nuestro código de navegación debería verse ahora 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 estilo en la sección de Botones.
Me gustaría cambiar la mayoría de los botones en este tema para que sean redondeados con algunos estilos personalizados. Esto cambiará el botón + Nuevo Tema, así como otros botones en todo el sitio.
Al final 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 estilizado de botones y por qué es importante probar todos tus diseños.
Adelante y haz clic en un Tema en tu vista previa del sitio, luego presiona el botón responder en una respuesta de tema, o desde el botón de respuesta en la parte inferior del flujo del tema. Verás que nuestro estilizado de botones ha afectado algunas cosas que quizás no hubiéramos tenido en mente.
No quiero que estos botones de edición de texto se vean afectados por mi estilizado anterior. Esto requiere un poco de SASS/CSS más complejo, pero podemos hacer que nuestro código no afecte a estos botones con :not(). 
Agreguemos esta línea de código, delante de nuestro objetivo actual .btn. Esto le dirá a nuestros estilos que solo se apliquen a botones que no sean hijos de .d-editor-button-bar.
:not(.d-editor-button-bar) > .btn
Ok, eso funcionó muy bien… ¡pero espera! Ahora hay este extraño rebelde haciendo lo suyo.
Inspeccionando esto en el navegador, puedo ver que este botón tiene una clase de .select-kit-header porque al hacer clic en este engranaje, aparecerán más opciones.
Ahora que sabemos que NO queremos dirigirnos a este botón, agreguemos más funcionalidad de :not() a nuestro código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
Esto seleccionará todos los botones que NO sean hijos de .d-editor-button-bar y no tengan 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 estilizado necesita ser muy específico para afectar los elementos correctamente.
También he notado que nuestro estilizado actual afecta de manera torpe al botón de cerrar del 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 de modales de la Guía de estilo.
Para corregir esto, agregaré otro objetivo a nuestro código.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
Siguiendo adelante…
Veo un botón más que no parece haber sido afectado por nuestro código. Es el botón de Seguimiento ubicado en la parte inferior de un flujo de publicación de tema.
Agregaré la siguiente línea, después de una coma, a nuestro código actual de .btn.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
Esto dirigirá correctamente el botón que aparece en esta sección, y por ahora, hemos terminado con el estilizado del área superior de nuestro foro.
A dónde ir desde aquí
Esta guía tenía la intención de raspar la superficie de cómo puedes personalizar tu propio tema para Discourse. Espero que ahora tengas más conocimiento sobre cómo dirigir áreas de la aplicación para tus propias personalizaciones.
Recuerda MUCHAS cosas se pueden personalizar usando solo SCSS. Si te gustaría profundizar aún más en tu desarrollo, recomiendo leer los artículos enlazados al inicio de esta publicación.
Siéntete libre de hacer cualquier pregunta y con gusto intentaré ayudarte, o apuntarte en la dirección correcta.
Este documento está bajo control de versiones - sugiere cambios en github.