# Creando un diseño más agradable

**URL:** https://meta.discourse.org/t/creating-a-nicer-layout/200681
**Category:** Support
**Created:** [17 Agosto, 2021 06:47 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681 "2021-08-17T06:47:03Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Periphery](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/periphery/32/231237_2.png) [@Periphery](https://meta.discourse.org/u/Periphery)
#### Post date: [17 Agosto, 2021 06:47 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/1 "2021-08-17T06:47:03Z")

</div>

Hola a todos, soy nuevo por aquí y no estaba seguro de dónde publicar esto, ya que las preguntas sobre CSS/HTML estaban fuera del alcance de la categoría de soporte. En fin, me desvío del tema. Conocí Discourse a través de otra plataforma que uso frecuentemente y trasladé mi foro a Discourse. La disposición que se usa en la plataforma se ve muy bien y estoy tratando de hacer algo similar. ¿Alguien tiene alguna idea de cómo hacer este tipo de cosas?

 ![Screenshot](https://global.discourse-cdn.com/meta/original/3X/1/f/1f7e99c276828368f39f33b3793b022bee18ddf2.png) ¿Es solo una edición básica de HTML/CSS o necesito usar un plugin?

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [17 Agosto, 2021 20:15 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/2 "2021-08-17T20:15:05Z")

</div>

¿Te refieres a un diseño como este?

> [@Way to view latest topics by category on desktop?](https://meta.discourse.org/t/way-to-view-latest-topics-by-category-on-desktop/162976/2?u=th21):
>
> We have multiple category page styles available on desktop (in the admin site setting called desktop category page style) the option called Categories with Featured Topics is the most similar to the mobile layout.

Para el banner verde, se puede lograr editando el CSS o consultando el [componente de banner existente](https://meta.discourse.org/search?q=banner%20tags%3Atheme-component).

Además, oculta la imagen de perfil de la lista de temas mediante CSS.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [17 Agosto, 2021 22:47 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/3 "2021-08-17T22:47:14Z")

</div>

Este diseño utiliza plantillas personalizadas de Handlebars y CSS; puedes encontrar más información en este tema:

> [@How do I add category banners?](https://meta.discourse.org/t/how-do-i-add-category-banners/136898/10?u=nolo):
>
> So now I have got it fixed for my self at least So first of all download this file [discourse-misc-html-css (2).zip](https://meta.discourse.org/uploads/short-url/nyEFxTT01syXreTir6NaY9FQKai.zip) (2.5 KB) So if you are not sure how to add that file to your site then check this guide out first So in the Misc/HTML+CSS Common and then in CSS You have to tweak some settings So first you need to copy this line &.fivem \> .category-list { &:before { content: 'FiveM'; } background-image…

Aunque es posible que llegues allí sin necesidad de añadir nuevas plantillas. Tendrías que usar `fixed category positions` en la configuración de administración y luego simplemente añadir espacios y estilos de banners con CSS. Publiqué este enfoque aquí:

> [@How to split the categories into sections with titles?](https://meta.discourse.org/t/how-to-split-the-categories-into-sections-with-titles/199494/2?u=nolo):
>
> You can select categories with their ids and inject your title texts before, e.g.: body [data-category-id="1"]:before { content: "Projects"; } Alternatively, you could use this new component, it comes with backend settings to add category sections:

---

<div class="post-metadata">

### Author: ![Periphery](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/periphery/32/231237_2.png) [@Periphery](https://meta.discourse.org/u/Periphery)
#### Post date: [17 Agosto, 2021 23:05 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/4 "2021-08-17T23:05:42Z")

</div>

Gracias. Lo probaré. Por ejemplo, ¿la estructura del banner de CFX.RE son estas categorías con subcategorías? ¿Es CFX.Re la categoría principal y Anuncios, Cookbook y FxDK son subcategorías, o todas estas son simplemente una sola categoría?

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [18 Agosto, 2021 07:04 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/5 "2021-08-18T07:04:24Z")

</div>

En tu captura de pantalla, ‘Anuncios’, ‘Recetario’ y ‘FxDK’ son las categorías.  
‘Documentos de diseño’ y ‘Anotaciones de confirmación’ son, por ejemplo, subcategorías del Recetario.  
Y el banner de CFx.re es un elemento de diseño personalizado.

---

<div class="post-metadata">

### Author: ![Periphery](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/periphery/32/231237_2.png) [@Periphery](https://meta.discourse.org/u/Periphery)
#### Post date: [18 Agosto, 2021 17:25 UTC](https://meta.discourse.org/t/creating-a-nicer-layout/200681/6 "2021-08-18T17:25:55Z")

</div>

¡De acuerdo, gracias! Creo que tengo suficiente para empezar a diseñar 😃
