Cómo personalizar la apariencia de las secciones como Amazon?

¡Hola, comunidad!

Recientemente instalé Discourse y quiero personalizar su apariencia.

Sin embargo, no sé cómo seleccionar grupos de secciones con sangría respecto a otras secciones, ni cómo crear una lista de subsecciones en una sola columna.

Revisé la configuración en el panel de administración, pero no encontré nada similar que pudiera ayudarme.

Agradeceré cualquier ayuda.
Recientemente empecé a estudiar esta plataforma.

¡Gracias!

Por ejemplo, para convertir una lista de subsecciones en una sola columna, necesito cambiar los valores aquí (category-list.scss)

A estos valores

Pero, ¿cómo puedo hacer esto correctamente a través del panel de administración sin modificar los archivos directamente en el servidor?

display: block;
align-items: baseline;
margin-right: 0;

1 me gusta

¿Entendí correctamente que esto es lo que debe hacerse así?
¿Es esta la forma correcta de resolver el problema?

Ese es el CSS predeterminado para las subcategorías. Simplemente asigna una “Categoría padre” en el cuadro de diálogo de edición de categorías y establece que la subcategoría y la categoría padre tengan el mismo color.

1 me gusta

Realmente no entiendo qué tiene que ver el color con esto.

Por defecto, las subcategorías se muestran de la siguiente manera: una tras otra, en horizontal

Después de aplicar el CSS que especificé anteriormente, las subsecciones se alinean en posición vertical, como quería.

Solo quería saber: ¿es correcto agregar CSS en la forma que indiqué, a través del panel de administración?

Y la segunda pregunta principal es: ¿cómo hacer que las secciones estén separadas entre sí por sangrías, como en el ejemplo de la captura de pantalla del foro de Amazon?

1 me gusta

¡Ah, ya veo!

Lo correcto es colocar este CSS en un componente de tema, lo cual es solo ligeramente diferente de lo que estás haciendo.

Si editas el tema Claro, los cambios no serán visibles en el tema Oscuro.

¡Crea un único componente de tema para todas las personalizaciones locales de tu sitio!

4 Me gusta

Gracias por el consejo sobre qué es mejor asignar como componentes.

Si hablamos de un ejemplo concreto Amazon, no se trata solo de CSS; su marcado también difiere del estándar (HTML).

¿Cómo organizar rápidamente la misma visualización?

Desafortunadamente, tengo un conocimiento superficial del diseño de maquetación, ya que soy desarrollador backend, por lo que la maquetación me resulta difícil.

¿Puedo trasladar este diseño sin modificar el código de los archivos fuente en sí?

He revisado muchas plantillas prefabricadas diferentes, pero la mayoría son similares entre sí y no he encontrado ninguna tan concisa como Amazon. ¿Podríamos hacerlo juntos con la comunidad? Se ve más conciso con espacios entre secciones.

Su marcado es diferente parcialmente porque no han actualizado su sitio en bastante tiempo.

Agregar este CSS te lleva casi hasta el final con el estilo de subcategoría…

.category-list .subcategories .subcategory {
  display: flex;
}

Si deseas realizar cambios en el marcado, tendrás que empezar a investigar cómo funcionan las sobrescrituras de plantillas en Discourse… eso se encuentra en la sección avanzada de la Guía del desarrollador para temas de Discourse.