¿Cómo lograr un diseño lado a lado para las publicaciones del tema como esta?

Me encantaría lograr una disposición lado a lado para mi instancia de Discourse (ver imagen adjunta). ¿Alguien podría guiarme sobre cómo hacerlo? ¡Agradezco cualquier ayuda que puedan brindarme!

2 Me gusta

¿Flexboxes de CSS, quizás? Solo de lo primero que me vino a la cabeza. Luego, quizás, usando la API/requests para obtener otros datos como el conteo de publicaciones.

¿Lo que quieres es básicamente reemplazar las barras horizontales por barras verticales?
Podrían hacerse con un componente de tema, y no se pueden hacer solo con CSS.
Requeriría cuidado para no romper nada, y podría no ser trivial de hacer :pensando:

1 me gusta

He probado un poco de ajuste básico de flexbox, pero solo rompió el diseño.

Hola @Canapin! básicamente quiero los detalles del autor de la publicación a la izquierda y el contenido de la publicación a la derecha en lugar de que estén uno encima del otro como el diseño de stock de discourse.
Sería útil si hay mods para ello.

1 me gusta

Estoy de acuerdo, no puedes reposicionar estos elementos de forma limpia con CSS. El avatar y los metadatos predeterminados se organizan por separado en la plantilla:

Me pregunto cómo se hace realmente en los foros de Epic. ¿Es una anulación de plantilla? No veo ninguna salida de plugin en esta ubicación:

1 me gusta

Por lo que veo, volveron a añadir los datos (nombre de usuario, etc.) después del contenido del widget post-avatar, añadieron algo de ancho a .topic-avatar, y ocultan todo lo demás con CSS excepto la fecha. Déjame ver si puedo reproducirlo.

1 me gusta

Puedes probar este componente de tema básico: GitHub - Arkshine/discourse-topic-avatar-vertical-layout.

Avísame si ves algún problema.


  1. Mueve el widget poster-name debajo del widget post-avatar. No hay otros cambios aparte de ajustes de CSS. ↩︎

9 Me gusta

¡Eso funcionó a la perfección! Muchas gracias, amigo.

2 Me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.