¿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
No, no planeo hacerlo. Mantenemos un ancho limitado, que corresponde a una longitud de lectura óptima.
2 Me gusta
1 me gusta
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
¡Gracias @chapoi! Mi consola:
1 me gusta
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
¡Muchas gracias, ahora funciona!
1 me gusta
2 publicaciones se dividieron en un nuevo tema: Texto de botón invisible en el tema Horizon
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.
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-containerse recorta (se desborda a la izquierda). - Cuando idioma del sitio = persa/árabe (RTL) → el borde derecho se recorta (se desborda a la derecha).
- Cuando idioma del sitio = inglés (LTR) → el borde izquierdo de
- 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%;
}
}
Horizon no es compatible con todos los componentes y complementos (todavía).
2 Me gusta
mientras participa en un grupo
Cuando no participa en un grupo
El diseño del encabezado y la barra lateral parecen haber cambiado debido a la modernización del tema Foundation.
No sé si este es el lugar correcto para publicar esto, pero me gusta la forma en que Horizon en Meta muestra un par de líneas de cada tema en la vista de categoría. No logro reproducirlo de mi lado y no estoy seguro por dónde empezar a buscar. ¡¡Gracias!!
4 Me gusta
puede leer sobre ello aquí
6 Me gusta
9 publicaciones se dividieron en un nuevo tema: Problema de RTL con la colocación de @ en los nombres de usuario
2 publicaciones se dividieron en un nuevo tema: La vista compacta/expandida no funciona en Horizon
Los temas fijados globalmente tienen su extracto alineado a la derecha (esto es en mi foro gratuito):
2 publicaciones se dividieron en un nuevo tema: Interacción de Horizon con el encabezado de marca
Una publicación fue dividida en un nuevo tema: Problemas con las insignias en Horizon
Una publicación fue dividida en un nuevo tema: Problema de visualización de subcategorías de dos niveles
No estoy seguro de si esto es sobre Horizon o el componente Header Categories Navbar. Me señalaron que la barra de menú en Horizon comienza muy a la izquierda, a diferencia de otros temas (Foundation para comparar), lo cual es extraño en monitores anchos.
Horizon:
Foundation:
¿Es esto intencional? ¿O algo que podría necesitar una corrección? Tengo que decir que si el ancho del contenido está restringido, me parecería lógico no tener la barra de menú comenzando tan a la izquierda.