Personaliza la identidad de tu sitio

:bookmark: Esta es una guía no técnica que te ayudará a personalizar la marca y la apariencia de tu sitio Discourse.

:person_raising_hand: 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 con tu cuenta de administrador en el sitio y ejecutar el asistente de configuración del sitio. :mage:

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 por invitación, y si los usuarios deben ser aprobados). Estos son los primeros pasos esenciales para poner tu sitio en funcionamiento.

Una vez completado el asistente, puedes personalizar aún más la apariencia de tu sitio: logotipos, 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 funcione. No te preocupes, siempre podrás cambiar estos ajustes más tarde si decides que no son lo que buscabas.

Temas del Sitio

Una vez que tengas una configuración básica en su lugar, ¡es hora de personalizar aún más tu sitio! :sparkles:

Los temas son personalizaciones extensas que modifican múltiples elementos del estilo del diseño de tu foro y, a menudo, también incluyen características adicionales del front-end. Los temas tienen la capacidad de cambiar significativamente la apariencia y la distribución de tu foro.

La categoría #theme en Meta alberga una variedad de temas precreados que puedes usar en tu sitio para personalizar su apariencia. Este es el mejor lugar para buscar un tema que usar en tu sitio. Ve y elige un tema que te gustaría usar para tu sitio desde esta categoría.

Una vez que hayas decidido qué tema usar para tu sitio, puedes agregarlo 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.

:woman_tipping_hand: 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 -> Configuración -> Colores (ubicada en /admin/config/colors). :art:

Desde aquí, puedes crear una nueva paleta de colores, seleccionar una existente para personalizarla y asignar paletas como el esquema claro u oscuro predeterminado para tu tema.

Selecciona un esquema de colores existente como base para tu nuevo esquema y luego 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 colores y guardar los cambios cuando termines!

:woman_tipping_hand: ¿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 paletas de colores dentro de Discourse, consulta:

Componentes de Tema

Al igual que los temas, Discourse también tiene “Componentes de Tema” que puedes usar para cambiar elementos superficiales del diseño de tu foro o agregar características adicionales del front-end. Más pequeños y específicos que los temas completos, generalmente (aunque no siempre) se pueden combinar con otros componentes de tema para crear un diseño de foro personalizado adaptado a tu comunidad. :gear:

La categoría #theme-component en Meta contiene todos los componentes de tema oficiales y no oficiales de Discourse. Revisa los componentes de tema listados allí y, si deseas instalar alguno en tu sitio, simplemente sigue las instrucciones aquí: La interfaz de temas de Discourse y cómo instalar componentes de tema

Algunos de los componentes de tema de Discourse más populares incluyen:

:woman_tipping_hand: Discourse también tiene un interruptor integrado de 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 la cabecera.

:woman_tipping_hand: La etiqueta theme-guides en Meta también tiene muchas guías paso a paso con ideas para personalizar aún más tu sitio con Componentes de Tema.

Marca del Sitio

Discourse tiene una página dedicada de configuración de logotipos 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. Tamaño recomendado: 600 × 80 píxeles.
  • Logotipo principal oscuro - Alternativa en modo oscuro para el logotipo principal. Tamaño recomendado: 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. Tamaño recomendado: 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 hacer scroll hacia abajo. Si se deja en blanco, se mostrará un glifo de inicio. Tamaño recomendado: 120 × 120 píxeles.
  • Logotipo pequeño oscuro - Alternativa en modo oscuro para el logotipo pequeño. Tamaño recomendado: 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ón logo. Usa una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor a 3:1.
  • Logotipo móvil oscuro - Alternativa en modo oscuro para el logotipo móvil. Usa una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor a 3:1.
  • Icono del manifiesto - Imagen utilizada como logotipo/imagen de bienvenida en Android. Si se deja en blanco, se utilizará large_icon. Tamaño recomendado: 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 “Agregar a la pantalla de inicio” en Android). Todas las imágenes deben ser cargas locales y tener las mismas dimensiones.
  • Icono de toque de Apple - Icono utilizado para dispositivos táctiles de Apple. Si se deja en blanco, se utilizará large_icon. Tamaño recomendado: 180 × 180 píxeles. No se recomienda un fondo transparente.

Bajo la sección Correo electrónico:

  • Logotipo del resumen - La imagen de logotipo alternativa 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ón logo. Usa 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 vistas previas 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 utilizando OpenGraph_image, siempre que este tampoco sea un archivo .svg. Tamaño recomendado: al menos 280 × 150 píxeles. No uses una imagen SVG.

:woman_tipping_hand: Para obtener los mejores resultados, recomendamos seguir las pautas de tamaño listadas anteriormente para cada tipo de logotipo e icono.

Personalizaciones Adicionales

Ahora que has agregado un tema personalizado, una paleta de colores, algunos logotipos de marca y quizás algunos componentes de tema a tu sitio, ¡has terminado con todas las personalizaciones básicas del sitio! :tada:

Si aún buscas más formas de personalizar tu sitio Discourse, te recomendamos leer cualquiera de los siguientes temas que puedan interesarte:

8 Me gusta

Entonces, ¿qué hace realmente Manifest screenshots? ¿Dónde se utilizan estas capturas de pantalla? ¿Es cuando alguien instala tu comunidad como una aplicación local a través de su navegador? ¿Son las imágenes las que aparecen si haces que tu comunidad sea detectable con Discourse Discover?

Veo esas capturas de pantalla cuando uso la opción “añadir a pantalla de inicio” en Chrome en mi dispositivo Android

2 Me gusta

¡Interesante! Pensé que eso era lo que hacían, pero no los vi cuando instalé en mi escritorio (Chrome, Windows). Pero puede que no les haya dado suficiente tiempo para cargarse/propagarse en algún lugar.

¡Me alegra saber que tenía razón sobre lo que hacen!

1 me gusta

Parece que esta sección se omitió por error,

1 me gusta

Después de leerlo dos veces, creo que lo entendí. Las pautas de tamaño se incluyen arriba. Por ejemplo:

Creo que, en general, esta guía está bastante desactualizada. Ya no puedes añadir un logo ni configurar el aspecto en el asistente. La página de administración de temas es totalmente diferente ahora, y los esquemas de color se renombraron a paletas de colores.
El componente de tema para alternar el modo oscuro/claro se trasladó al núcleo. Y la marca tiene una nueva página de configuración en /admin/config/logo.
Solo me pregunto por qué el tamaño mencionado en la página de configuración es diferente de la descripción cuando miro la configuración del sitio.


600x80 es diferente de un mínimo de 360x120.

2 Me gusta

Este tema está un poco desactualizado ya que estas cosas han sido recientemente revisadas.

Aquí están mis pensamientos sobre algunas sugerencias menores (pero valiosas) para mejoras:

4 Me gusta