Tema Horizon

Tema
,
45

¿Hay alguna idea sobre hacer Horizon de ancho completo? Me parece que se siente un poco constreñido en el medio (¿corsé?), y hacerlo completamente lo relajaría muy bien.

4 Me gusta
46

No, no planeo hacerlo. Mantenemos un ancho limitado, que corresponde a una longitud de lectura óptima.

2 Me gusta
47

Hola, he intentado previsualizar el tema, pero esto es todo lo que veo:

image
image2543×1047 75.7 KB

¿Estoy haciendo algo mal?

1 me gusta
48

Acabo de probar (aunque en móvil) y funciona bien para mí. ¿Hay algo en la consola? ¿O puedes intentar con un navegador diferente para comprobar?

1 me gusta
49

¡Gracias @chapoi! Mi consola:

image
image960×953 36.2 KB

1 me gusta
50

De acuerdo, sí, definitivamente puedo reproducir el problema. Creo que es porque Horizon se ha movido al núcleo probablemente. Tendré que averiguar cómo arreglar el enlace de vista previa, si es que es posible. (Simplemente previsualizar en Meta será lo más fácil; actualicé el tema)

Dicho esto, puedes previsualizarlo aquí en Meta cambiando el tema.

2 Me gusta
51

¡Muchas gracias, ahora funciona!

1 me gusta
52

Panel: Texto del botón invisible por defecto + desalineación del diseño en “Temas Referidos Principales” y “Términos de Búsqueda Populares”

Hola

Estoy utilizando el tema Horizon y he identificado varios problemas de interfaz de usuario en el Panel de Administración, específicamente en las secciones Temas Referidos Principales y Términos de Búsqueda Populares.

:magnifying_glass_tilted_left: Problema 1: El texto del botón es invisible hasta que se pasa el ratón por encima

Ubicación: Botones en ambas secciones (ej. “Ver tema”, “Ver término de búsqueda”)

Comportamiento esperado: La etiqueta del botón debe ser visible en todo momento (estado normal).

:straight_ruler: Problema 2: Desequilibrio en el ancho de las columnas y ajuste de texto

Ubicación: Columnas de la tabla en ambos widgets

Diseño observado:

Columna Tema / Términos: demasiado estrecha → los títulos largos se ajustan verticalmente (ej. texto de varias líneas dentro de una sola fila).

Columnas numéricas (Vistas, Clics, Búsquedas, etc.): excesivamente anchas → espacio en blanco excesivo.

Problema adicional: Los valores numéricos están alineados a la derecha (predeterminado para números), pero en contextos RTL (como persa/árabe), esto crea inconsistencia visual. Para una mejor experiencia de usuario en locales RTL, las columnas numéricas deben permanecer alineadas a la derecha, pero las columnas de temas/términos deben estar alineadas a la izquierda; actualmente aparecen alineadas a la derecha en RTL, lo que provoca desalineación.

Gracias por su trabajo en el tema Horizon.

1 me gusta
53

¡Gracias por estos informes, se solucionarán!

Sin embargo, para la próxima vez: algunas capturas de pantalla son muy útiles para identificar más rápido de qué se trata que el texto.

1 me gusta
55

Desbordamiento del Contenedor de Anuncios Móviles en Anuncios Internos – Desajuste de Diseño RTL/LTR

Hola

Estoy utilizando el tema Horizon con el plugin oficial House Ads, y he creado un componente personalizado para estilizar los anuncios usando variables CSS y reglas de diseño compatibles con el sistema de diseño de Discourse.

:mobile_phone: Problema: El contenedor del anuncio se desborda de la vista en dispositivos móviles (tanto LTR como RTL)

  • Tema: Horizon (no reproducible en el tema predeterminado u otros temas como Material, etc.)
  • Plugin: House Ads + componente personalizado
  • Dispositivo: Móvil
  • Comportamiento:
    • Cuando idioma del sitio = inglés (LTR) → el borde izquierdo de .ad-container se recorta (se desborda a la izquierda).
    • Cuando idioma del sitio = persa/árabe (RTL) → el borde derecho se recorta (se desborda a la derecha).
  • Esperado: La tarjeta del anuncio debe estar completamente contenida dentro de la vista, centrada o alineada con el ancho del contenido de la publicación.

mi código css:

Resumen 
:root {
  /* Colores principales */
  --ad-bg: var(--secondary);
  --ad-border: var(--highlight);
  --ad-text: var(--primary);

  /* Etiqueta */
  --ad-label-bg: var(--highlight);
  --ad-label-text: var(--danger);
}


.house-creative {
  margin-left: 0 !important;
}


.house-creative a.between-posts-ad {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  font-family: inherit;
}

/* ===============================
   Contenedor de Tarjeta
   =============================== */

.house-creative .ad-container {
    direction: rtl !important;
    text-align: center !important;
margin-bottom: 20px;
      padding: 10px 5px;
     max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2));  background-color: var(--ad-bg);
  border: 2px solid var(--ad-border);
  border-radius: 10px;

  box-sizing: border-box;
  line-height: 1.7;

  color: var(--ad-text);

  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.house-creative a.between-posts-ad:hover .ad-container {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.house-creative .ad-label {
    display: inline-block;       
    text-align: center;   
    margin-bottom: 6px;
     padding: 4px 12px;

  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;

  background-color: var(--ad-label-bg);
  color: var(--ad-label-text);

  border-radius: 999px;
}

.house-creative .ad-container .ad-text {
  margin: 0;

  font-size: 1rem;
  line-height: 1.9;
  color: var(--ad-text);

  direction: rtl ;
  text-align: center !important ;
  unicode-bidi: isolate;
}


@media (max-width: 480px) {
  .house-creative .ad-container {
direction: rtl !important;
text-align: center !important; 
padding: 16px 12px; 
width: 100%;
max-width: 100%;

  }
}

00004
000041080×757 20.4 KB

56

Horizon no es compatible con todos los componentes y complementos (todavía).

1 me gusta