Este es un tutorial no técnico que te guiará por la personalización de la marca y la apariencia de tu sitio Discourse.
Nivel de usuario requerido: Administrador
¿Quieres personalizar la marca de tu sitio, pero no sabes por dónde empezar? ¡Sigue leyendo para descubrirlo!
El Asistente de Configuración
¡Discourse es muy personalizable! Un buen lugar para comenzar con las personalizaciones del sitio es iniciar sesión en tu cuenta de administrador del sitio y ejecutar el asistente de configuración del sitio. ![]()
El asistente de configuración te permite configurar el título del sitio, la configuración regional predeterminada y los ajustes de acceso (público vs. privado, registro vs. solo invitaciones, y si los usuarios deben ser aprobados). Estos son los primeros pasos esenciales para poner en marcha tu sitio.
Una vez completado el asistente, puedes personalizar aún más la apariencia de tu sitio —logos, colores, fuentes y más— desde el panel de administración.
Puedes previsualizar las opciones disponibles directamente en esta página. Haz clic en el botón «Siguiente» cuando hayas encontrado la configuración que te convenga. No te preocupes, siempre puedes cambiar esta configuración más adelante si decides que no es lo que buscas.
Temas del Sitio
Una vez que tengas una configuración básica, ¡es hora de personalizar aún más tu sitio! ![]()
Los temas son personalizaciones expansivas que cambian múltiples elementos del estilo del diseño de tu foro y, a menudo, también incluyen características adicionales de front-end. Los temas tienen la capacidad de cambiar significativamente la apariencia y la disposición de tu foro.
La categoría Customization > Theme en Meta aloja una variedad de temas precreados que puedes usar en tu sitio para personalizar la apariencia de tu sitio. Este es el mejor lugar para buscar un tema que usar en tu sitio. Adelante, elige un tema que te gustaría usar para tu sitio de esta categoría.
Una vez que hayas decidido qué tema usar para tu sitio, puedes añadir el tema a tu sitio desde la página Admin -> Personalizar -> Temas (ubicada en /admin/config/customize/themes). También puedes realizar cambios en el tema de tu sitio o incluso crear un tema completamente nuevo desde esta página.
La Guía para principiantes sobre el uso de Temas de Discourse es un curso intensivo sobre los conceptos básicos de los temas de Discourse y proporciona una visión general de cómo instalar temas en tu sitio Discourse. Lee esta guía para obtener instrucciones sobre cómo instalar el tema que has elegido.
También puedes encontrar más información sobre cómo usar, crear y compartir tus propios temas en:
Paletas de Colores
Puedes personalizar aún más tu sitio ajustando su paleta de colores desde la página Admin -> Config -> Colores (ubicada en /admin/config/colors). ![]()
Desde aquí puedes crear una nueva paleta de colores, seleccionar una paleta existente para personalizar y asignar paletas como el esquema predeterminado claro u oscuro para tu tema.
Selecciona un esquema de color existente para basar tu nuevo esquema de color y, a continuación, personaliza los colores de tu nuevo esquema haciendo clic en el color junto a cada sección de color:
¡No olvides nombrar tu nuevo esquema de color y guardar los cambios una vez que hayas terminado!
¿Necesitas ayuda para decidir los colores? ¡Una herramienta de selección de colores como Paletton - The Color Scheme Designer puede ser muy útil para esto!
Para obtener información adicional sobre cómo puedes usar las paletas de colores dentro de Discourse, consulta:
Componentes del Tema
Al igual que los temas, Discourse también tiene «Componentes del Tema» que puedes usar para cambiar los elementos superficiales del diseño de tu foro o añadir características adicionales de front-end. Más pequeños y más específicos que los temas completos, generalmente (aunque no siempre) se pueden combinar con otros componentes del tema para crear un diseño de foro personalizado adaptado a tu comunidad. ![]()
La categoría Customization > Theme component en Meta contiene todos los componentes del tema oficiales y no oficiales de Discourse. Revisa los componentes del tema listados allí y, si deseas instalar alguno de ellos en tu sitio, simplemente sigue las instrucciones aquí: La Interfaz de Temas de Discourse y Cómo Instalar Componentes del Tema
Algunos de los Componentes del Tema de Discourse más populares incluyen:
Discourse también tiene un interruptor integrado para el modo oscuro/claro controlado por la configuración del sitio
interface_color_selector, que se puede configurar para mostrar el interruptor en el pie de página de la barra lateral o en el encabezado.
La etiqueta theme-guides en Meta también tiene muchas guías de cómo-hacer con ideas para personalizar aún más tu sitio con Componentes del Tema.
Marca del Sitio
Discourse tiene una página de configuración dedicada para el logotipo en Admin -> Apariencia -> Logotipo (ubicada en /admin/config/logo) donde puedes gestionar todos los logotipos e iconos de tu sitio.
Logotipo principal- Aparece en la navegación superior del sitio, así como en la parte superior de las Notificaciones por correo electrónico del sitio. El tamaño recomendado es de 600 × 80 píxeles.Logotipo principal oscuro- Alternativa en modo oscuro para el logotipo principal. El tamaño recomendado es de 600 × 80 píxeles.Icono cuadrado- Una versión cuadrada de la imagen del logotipo que aparece en la parte superior del sitio y también es el logotipo de la aplicación móvil. El tamaño recomendado es de 512 × 512 píxeles.Favicon- El logotipo aparecerá como el icono en la pestaña del navegador y en los favoritos/marcadores del navegador.Logotipo pequeño- La imagen del logotipo pequeño en la parte superior izquierda de tu sitio, visible al desplazarse hacia abajo. Si se deja en blanco, se mostrará un glifo de inicio. El tamaño recomendado es de 120 × 120 píxeles.Logotipo pequeño oscuro- Alternativa en modo oscuro para el logotipo pequeño. El tamaño recomendado es de 120 × 120 píxeles.
Bajo la sección Móvil:
Logotipo móvil- El logotipo utilizado en la versión móvil de tu sitio. Si se deja en blanco, se utilizará la imagen de la configuraciónlogo. Utiliza una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor que 3:1.Logotipo móvil oscuro- Alternativa en modo oscuro para el logotipo móvil. Utiliza una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor que 3:1.Icono de manifiesto- Imagen utilizada como logotipo/imagen de presentación en Android. Si se deja en blanco, se utilizarálarge_icon. El tamaño recomendado es de 512 × 512 píxeles.Capturas de pantalla del manifiesto- Capturas de pantalla que muestran las características y funcionalidades de tu instancia en su página de solicitud de instalación (mostrada al usar «Añadir a la pantalla de inicio» en Android). Todas las imágenes deben ser cargas locales y tener las mismas dimensiones.Icono de toque Apple- Icono utilizado para dispositivos táctiles de Apple. Si se deja en blanco, se utilizarálarge_icon. El tamaño recomendado es de 180 × 180 píxeles. No se recomienda un fondo transparente.
Bajo la sección Correo electrónico:
Logotipo del resumen- La imagen del logotipo alternativo utilizada en la parte superior del resumen por correo electrónico de tu sitio. Si se deja en blanco, se utilizará la imagen de la configuraciónlogo. Utiliza una imagen rectangular ancha. No uses una imagen SVG.
Bajo la sección Redes sociales:
Imagen OpenGraph- Imagen opengraph predeterminada, utilizada por muchas aplicaciones y plataformas para previsualizaciones de enlaces web cuando una página no tiene otra imagen adecuada. Si se deja en blanco, se utilizarálarge_icon.Imagen grande de resumen de X- Imagen grande de resumen de la tarjeta de X. Si se deja en blanco, se genera metadatos de tarjeta regular utilizandoOpenGraph_image, siempre que este no sea también un archivo .svg. El tamaño recomendado es de al menos 280 × 150 píxeles. No uses una imagen SVG.
Para obtener los mejores resultados, recomendamos seguir las pautas de tamaño enumeradas anteriormente para cada tipo de logotipo e icono.
Personalizaciones Adicionales
Ahora que has añadido un tema personalizado, una paleta de colores, algunos logotipos de marca y quizás algunos componentes del tema a tu sitio, ¡has terminado con todas las personalizaciones básicas del sitio! ![]()
Si aún estás buscando más formas de personalizar tu sitio Discourse, te recomendamos leer cualquiera de los siguientes temas que puedan interesarte:





