🌅 Presentamos Horizon, nuestro tema más reciente

Durante los últimos meses, hemos estado trabajando arduamente en nuestro tema más reciente de Discourse, Horizon, y hoy estamos emocionados de compartir nuestro trabajo con ustedes e invitarlos a probar Horizon en su comunidad.



En este tema, hablaremos sobre Horizon y te guiaremos a través de la instalación.

:sun: Todo sobre Horizon

Horizon es un tema simple y hermoso diseñado para proporcionar una excelente experiencia de usuario para las comunidades sin esfuerzo adicional por parte del administrador. El nombre refleja nuestra esperanza de que este tema exprese una visión más expansiva de quién puede usar Discourse y cómo pueden verse las comunidades de Discourse.

Modo claro

Modo oscuro

:woman_shrugging: ¿Por qué construimos Horizon?

Construimos Horizon para que sea más fácil para cualquiera iniciar una comunidad de Discourse y compartirla con orgullo con sus miembros.

Al hablar con los administradores de Discourse, hemos aprendido que una de las partes más importantes de iniciar una comunidad es modificar su apariencia para asegurarse de que sea un espacio acogedor y agradable para los miembros de la comunidad. Horizon hace posible tener una comunidad atractiva sin esfuerzo o personalización adicional.

:mirror: ¿Para quién es Horizon?

Horizon está diseñado para comunidades que no tienen la experiencia o los recursos para personalizar la apariencia de Discourse.

Estamos orgullosos de la flexibilidad y personalización de Discourse, ¡y eso no va a cambiar! Pero creemos que más Discourse en el mundo es algo bueno, y que la mejor manera de lograrlo es facilitando que las comunidades con menos conocimientos técnicos prosperen con nuestro producto.

:magic_wand: ¿Qué hace especial a Horizon?

Donde Default es una pizarra en blanco, Horizon tiene sus propias ideas. Valora la amplitud, la simplicidad y la estética de diseño moderno.

Para ver la diferencia, usa el selector de temas en la parte inferior de la barra lateral aquí en Meta para cambiar a Horizon:

Aquí hay algunas de las diferencias que notarás en Horizon:

  • Menor densidad de información. La característica más notable de Horizon es la tarjeta de tema, que se ha reducido desde la vista de tabla estándar para que se sienta más accesible y simple. Cierta información, como detalles extensos sobre los participantes del tema, etiquetas y usuarios asignados, no es visible.
  • Texto más grande y más espacio. Más allá de la tarjeta de tema, hemos incorporado un mayor grado de espacio en Horizon al aumentar los tamaños de fuente base en el área de lectura e incorporar una estructura de ancho completo.
  • Construido para ser usado tal cual. Las comunidades que desean un control extenso sobre la apariencia del sitio o que tienen requisitos de diseño muy particulares pueden y deben continuar trabajando con nuestro tema Predeterminado o crear su propio tema para satisfacer mejor sus necesidades. Si bien hemos probado Horizon con los componentes de temas oficiales más populares y solo hemos encontrado incompatibilidades menores, no recomendamos agregar componentes no oficiales u otro código personalizado a Horizon.

:gear: Usando Horizon

Puedes habilitar Horizon para tus miembros en solo unos pocos pasos:

  1. Ve al área de :wrench: Administración, ve a la sección Apariencia y haz clic en Temas y componentes.
  2. Busca la tarjeta del tema Horizon, haz clic en el botón y selecciona Establecer como activo para hacer de Horizon el nuevo tema predeterminado de tu comunidad. (Es posible que necesites actualizar tu pantalla para ver este cambio).

Opcionalmente, puedes habilitar cualquiera de las nuevas paletas de colores, que están diseñadas específicamente para funcionar bien con Horizon.

> :warning: Nota: puedes reemplazar las paletas usadas en Horizon, pero solo las paletas llamadas Clover, Horizon, Lily, Marigold, Royal y Violet aparecerán en el selector de colores en la barra lateral.

Instrucciones para configurar paletas de colores.
  1. Haz clic en Paletas de colores en la barra lateral de administración.
  2. Selecciona la paleta de colores deseada (por ejemplo, Horizon).
  3. Marca la configuración La paleta de colores puede ser seleccionada por los usuarios y luego haz clic en la marca de verificación para confirmar.
  4. Repite los pasos 2-3 para cualquier paleta que desees usar.

Después de actualizar, verás un pincel en la parte inferior de la barra lateral. Puedes hacer clic en él para elegir tu paleta de colores específica para Horizon (que se muestra en la captura de pantalla anterior). Tus miembros pueden hacer lo mismo para elegir entre las paletas que hayas habilitado. Para establecer la nueva paleta predeterminada para Horizon (es decir, cómo se ve Horizon antes de que los miembros hayan realizado algún cambio y para los visitantes anónimos):

  1. Ve a Temas y componentes en el área de administración.
  2. Busca la tarjeta Horizon y haz clic en Editar.
  3. Cambia el campo Paleta de colores a tu opción deseada.

:crystal_ball: Próximos pasos para Horizon

¡Estamos apenas comenzando! Hemos trabajado duro en esta primera versión del tema, pero esperamos seguir invirtiendo en Horizon y mejorándolo con el tiempo. Buscaremos activamente comentarios de los sitios que usan Horizon para seguir mejorándolo, y esperamos pronto convertirlo en el tema predeterminado que se envía con los sitios de Discourse.

:folded_hands: Gracias

Estamos muy agradecidos con todos los que apoyaron a Horizon (¡y al equipo de Discourse!) al probar Horizon aquí en Meta o al participar en nuestras pruebas beta. Estos comentarios fueron invaluables para ayudarnos a encontrar errores, hacer ajustes y pulir la experiencia general de Discourse en este tema. ¡Muchas gracias por su tiempo, comentarios y apoyo!

39 Me gusta

¡Esto parece increíble! Tengo muchas ganas de probarlo.

Pero no hay una ruta para la personalización customization de /admin/customize/themes/1/common/*/edit. ¿Podrías añadirla? La estoy usando para proporcionar encabezados especiales y otras personalizaciones independientemente del tema elegido.

¡Gracias!

1 me gusta

¿Por qué no creas un nuevo componente de tema donde haces cambios y lo añades al tema horizon?

1 me gusta

¿Me lo he perdido o Horizon aún no se ha añadido a Crowdin para su traducción? ¿Debo crear una pull request con las traducciones en su lugar?

Horizon se creó principalmente para usarse tal cual, por lo que no se recomiendan personalizaciones directas ni personalizaciones a través de componentes no oficiales. Dicho esto, me encantaría saber más sobre lo que te gustaría cambiar de Horizon para ver si podría ser un buen candidato para que lo incorporemos más directamente en el tema.

Lo estoy investigando, ¡te informaré pronto!

1 me gusta

En realidad, es solo un encabezado para vincular el foro a una cuenta de Fediverse (y una etiqueta <noscript> para hacer lo mismo en el pie de página).

Puse el código del componente temático aquí: https://git.z7l.eu/ps/discourse-lire.im

Ver la justificación para Mastodon.

¡Esto se ve genial! Supongo que el tema no será compatible con los componentes personalizados que estamos utilizando actualmente. Por ejemplo:

1 me gusta

Continuando la discusión de Ayúdanos a probar Horizon, nuestro tema más reciente:

Esto no me funcionó en el móvil (iPhone 11 Pro Max). Supongo que podría ser porque he aumentado el tamaño de la fuente en la configuración de mi teléfono.

¡Este tema es maravilloso, gracias por tu trabajo!

Me pregunto cómo mantener actualizadas las bifurcaciones de Horizons. Tenemos algunas modificaciones personalizadas que conservar :slight_smile:

1 me gusta

Crear componentes y añadir al tema para personalizar

4 Me gusta

A largo plazo nuestro objetivo es que todos nuestros componentes oficiales funcionen bien en Horizon, para trabajos personalizados como cliente, no dude en ponerse en contacto con @team para ver si podemos ayudarle (puede requerir algo de trabajo personalizado de pago)

2 Me gusta

Quiero crear una opción seleccionable por el usuario para este tema para poder añadir el componente del tema que modificará este tema. Quiero que los usuarios puedan seleccionar el tema Horizon tal cual o seleccionar su variación.

La variación de este tema será de ancho completo. También estilizará el CSS de las filas de publicaciones individuales para elevar el contenido en la jerarquía visual por encima de otros elementos de la página como la barra de desplazamiento, los temas nuevos y no leídos en la parte inferior, etc.

Horizon se ve muy bien, pero aún no resuelve el problema de la densidad de información en la página de temas. Resulta visualmente abrumador para las personas que vienen de otro software de foros tradicional.

Mis comentarios pueden no ser relevantes para los usuarios nativos de Discourse, pero estoy aportando una visión externa. Tengo que hacer estos cambios al menos para mi comunidad.

1 me gusta

Encontré un pequeño error aquí, en la visualización de grupos, donde puede haber un desbordamiento:

Se puede aliviar agregando CSS:

.group-box-inner {
	overflow: auto;
}
1 me gusta

¿Es intencional que haya tanto espacio entre la barra de navegación y el contenido?

2 Me gusta

No, no creo que eso sea lo esperado. ¿Quizás un componente está interfiriendo con esto :thinking:?

Creo que sí, mi suposición es que es una captura de pantalla recortada de un navegador ultrapanorámico a pantalla completa

2 Me gusta

Me encanta este tema, pero parece que el componente Search Banner no se lleva muy bien con él. El texto de search_banner.subhead no se muestra, lo que hace que se vea desalineado. También hay una línea gris tenue.

Actualización:
Desactivé el Search Banner y la bienvenida+búsqueda integrada se ve mejor. Sin embargo, obtengo este texto de encabezado secundario en la captura de pantalla a continuación.

Además, el enlace de marcadores en la página de inicio dice que aún no tengo marcadores, aunque sí los tengo. Enlaza a /bookmarks en lugar de /u/johndoe/activity/bookmarks

En efecto, es una pantalla panorámica. Sin embargo, la gran cantidad de espacio en blanco distrae. ¿Es posible ajustar esto?

Gracias por informarnos sobre esto. He pedido a alguien del equipo de diseño que examine el problema.

4 Me gusta

Lo había informado hace casi un mes, pero…