# ¿Cómo lograr un diseño lado a lado para las publicaciones del tema como esta?
**URL:** https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672
**Category:** Support
**Created:** [10 Marzo, 2025 18:18 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672 "2025-03-10T18:18:30Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@lilstranded](https://meta.discourse.org/u/lilstranded)
#### Post date: [10 Marzo, 2025 18:18 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/1 "2025-03-10T18:18:30Z")
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!
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [10 Marzo, 2025 23:10 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/3 "2025-03-10T23:10:23Z")
¿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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [11 Marzo, 2025 00:05 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/4 "2025-03-11T00:05:09Z")
¿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:
---
### Author:  [@lilstranded](https://meta.discourse.org/u/lilstranded)
#### Post date: [11 Marzo, 2025 17:13 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/5 "2025-03-11T17:13:08Z")
He probado un poco de ajuste básico de flexbox, pero solo rompió el diseño.
---
### Author:  [@lilstranded](https://meta.discourse.org/u/lilstranded)
#### Post date: [11 Marzo, 2025 17:14 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/6 "2025-03-11T17:14:29Z")
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.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [11 Marzo, 2025 17:24 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/7 "2025-03-11T17:24:00Z")
> [@Canapin](#):
>
> no se puede hacer solo con css.
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:
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [11 Marzo, 2025 17:39 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/8 "2025-03-11T17:39:07Z")
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.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12 Marzo, 2025 00:08 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/9 "2025-03-12T00:08:50Z")
Puedes probar este componente de tema básico: [GitHub - Arkshine/discourse-topic-avatar-vertical-layout](https://github.com/Arkshine/discourse-topic-avatar-vertical-layout).
- Solo vista de escritorio
- Es compatible con otras modificaciones \[1\]
- El recuento de publicaciones no está incluido. Necesitas un plugin, como este: [GitHub - Arkshine/discourse-user-post-count](https://github.com/Arkshine/discourse-user-post-count).
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.
---
### Author:  [@lilstranded](https://meta.discourse.org/u/lilstranded)
#### Post date: [13 Marzo, 2025 15:28 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/10 "2025-03-13T15:28:07Z")
¡Eso funcionó a la perfección! Muchas gracias, amigo.
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [12 Abril, 2025 15:28 UTC](https://meta.discourse.org/t/how-to-achieve-a-side-by-side-layout-for-topic-posts-like-this/356672/11 "2025-04-12T15:28:49Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.