Esta guía explica cómo personalizar la apariencia de los cuadros de subcategoría en Discourse, incluyendo el ajuste de estilos para temas destacados, la modificación del estilo “Boxes” y la gestión del truncamiento de descripciones de categorías.
Nivel de usuario requerido: Administrador
Los cuadros de subcategoría en Discourse se pueden personalizar para mejorar el atractivo visual y la organización de tu foro. Esta guía te guiará a través de varias opciones de personalización para los cuadros de subcategoría, incluyendo estilos para temas destacados, el estilo “Boxes” y el truncamiento de descripciones de categorías.
Personalización de cuadros con temas destacados
Para crear un aspecto audaz y colorido para tus cuadros de subcategoría con temas destacados, puedes usar CSS personalizado. Este método elimina los logotipos y aplica colores de fondo distintos a cada subcategoría.
Así es como puedes hacer que tus cuadros de subcategoría se vean así:
- Ve al panel de administración de tu sitio
- Navega a Personalizar > Temas
- Crea un tema nuevo o edita uno existente
- Agrega el siguiente CSS a tu tema:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Ajusta los selectores CSS y los colores para que coincidan con los nombres de tus categorías específicas y el esquema de color deseado.
Personalización del estilo “Boxes”
Si estás utilizando el estilo “Boxes” para las subcategorías, puedes personalizarlo de manera similar:
En el CSS de tu tema, agrega el siguiente código:
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > h3 {
color: white;
}
}
}
Nuevamente, modifica los selectores y los colores para que se ajusten a la estructura y las preferencias de diseño de tu foro.
Gestión del truncamiento de descripciones de categorías
Por defecto, Discourse trunca las descripciones de las categorías a 4 líneas en los cuadros de categoría. Puedes ajustar esto usando CSS personalizado:
Para acortar la descripción a dos líneas, agrega este CSS a tu tema:
.category-boxes .description .overflow {
max-height: 3em;
}
Ajusta el valor de max-height para lograr el número deseado de líneas visibles.
Consideraciones para dispositivos móviles
Al usar el estilo “Boxes with subcategories” en el escritorio, ten en cuenta que los temas aún pueden ser visibles en dispositivos móviles. Este comportamiento puede ser intencional en el diseño de Discourse para mantener la legibilidad en pantallas más pequeñas.
Si necesitas ajustar el diseño móvil, es posible que debas agregar CSS específico para vistas móviles o consultar con un desarrollador de temas de Discourse para obtener una solución más personalizada.