Este es un tutorial no técnico que te guiará a través de 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? ¡Lee más para descubrirlo!
El Asistente de Configuración
¡Discourse es muy personalizable! Un buen lugar para empezar 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.
La opción “Configurar más” del asistente de configuración te permite seleccionar un logotipo, un esquema de color, una fuente y un estilo de página de inicio para el sitio:
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 funciona. No te preocupes, siempre puedes cambiar estas configuraciones más tarde si decides que no son 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 amplias que cambian múltiples elementos del estilo de 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 el aspecto y la disposició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 para 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 un tema para usar en tu sitio, puedes agregarlo a tu sitio desde la página
Admin -> Personalizar -> Temas(ubicada en.../admin/customize/themes). También puedes hacer 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 descripción general de cómo instalar temas en tu sitio de 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:
Esquemas de Color
Puedes personalizar aún más tu sitio ajustando el esquema de color desde la página “Admin → Personalizar → Colores” (ubicada en
/admin/customize/colors).Creemos un nuevo esquema de color para usar en tu sitio haciendo clic en el botón “+Nuevo” en esta página:
Selecciona un esquema de color existente para basar tu nuevo esquema de color, 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 color y guardar tus cambios una vez que hayas terminado!
Una vez que estés satisfecho con tu esquema de color, puedes asignarlo a tu tema actual y previsualizarlo para ver los cambios reflejados en vivo en tu sitio.
Tus cambios también se aplicarán automáticamente al sitio una vez que actualices la página.
Para obtener información adicional sobre cómo puedes usar esquemas de color dentro de Discourse, consulta:
Create and share a color scheme
Componentes de Tema
Similar a 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 de 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 a medida para tu comunidad.
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:
- Dark/Light Mode Toggle
- Brand Header
- DiscoTOC - automatic table of contents
- Custom Header Links
- Versatile Banner
Marca del Sitio
Además de los logotipos que elegiste en el asistente de configuración del sitio, Discourse también tiene varias configuraciones relacionadas con la marca del sitio en la página “Admin → Configuración → Marca” (ubicada en
/admin/site_settings/category/branding) que puedes usar para agregar imágenes y logotipos personalizados a tu sitio.Desde esta página, puedes agregar los siguientes tipos de logotipos a tu sitio:
logo- La imagen del logotipo en la parte superior izquierda de tu sitio. Usa una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor que 3:1. Si se deja en blanco, se mostrará el texto del título del sitio.logo small- La imagen pequeña del logotipo en la parte superior izquierda de tu sitio, que se ve al desplazarse hacia abajo. Usa una imagen cuadrada de 120 × 120. Si se deja en blanco, se mostrará un glifo de inicio.digest logo- La imagen alternativa del logotipo utilizada en la parte superior del resumen de correo electrónico de tu sitio. Usa una imagen rectangular ancha. No uses una imagen SVG. Si se deja en blanco, se usará la imagen de la configuraciónlogo.mobile logo- El logotipo utilizado en la versión móvil de tu sitio. Usa una imagen rectangular ancha con una altura de 120 y una relación de aspecto mayor que 3:1. Si se deja en blanco, se usará la imagen de la configuraciónlogo.logo dark- Alternativa de esquema oscuro para la configuración del sitiologo.logo small dark- Alternativa de esquema oscuro para la configuración del sitiologo small.large icon- Imagen utilizada como base para otros iconos de metadatos. Idealmente debería ser mayor que 512 x 512. Si se deja en blanco, se usarálogo_small.manifest icon- Imagen utilizada como logotipo/imagen de presentación en Android. Se redimensionará automáticamente a 512 × 512. Si se deja en blanco, se usarálarge_icon.manifest screenshots- Capturas de pantalla que muestran las características y la funcionalidad de tu instancia en su página de solicitud de instalación. Todas las imágenes deben ser cargas locales y de las mismas dimensiones.favicon- Un favicon para tu sitio, consulta Favicon - Wikipedia. Para que funcione correctamente sobre una CDN, debe ser un png. Se redimensionará a 32x32. Si se deja en blanco, se usarálarge_icon.apple touch icon- Icono utilizado para dispositivos táctiles de Apple. Se redimensionará automáticamente a 180x180. Si se deja en blanco, se usarálarge_icon.opengraph image- Imagen predeterminada de opengraph, utilizada por muchas aplicaciones y plataformas para previsualizaciones de enlaces web cuando una página no tiene otra imagen adecuada. Idealmente debería ser cuadrada. Si se deja en blanco, se usarálarge_icon.twitter summary large image- Tarjeta de Twitter ‘summary large image’ (debe tener al menos 280 de ancho y al menos 150 de alto, no puede ser .svg). Si se deja en blanco, se generan metadatos de tarjeta normales utilizando laopengraph_image, siempre que esta tampoco sea una .svg.
Personalizaciones Adicionales
Ahora que has agregado un tema personalizado, un esquema de color, algunos logotipos de marca y quizás algunos componentes de tema a tu sitio, ¡has terminado con todas las personalizaciones básicas del sitio!
Si todavía buscas más formas de personalizar tu sitio de 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.
1 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:
2 Me gusta