Esta guía explica cómo personalizar la apariencia de los cuadros de subcategorías en Discourse, incluyendo el ajuste de estilos para temas destacados, la modificación del estilo “Cajas” y la gestión del recorte de las descripciones de las categorías.
Nivel de usuario requerido: Administrador
Los cuadros de subcategorías en Discourse pueden personalizarse para mejorar el atractivo visual y la organización de tu foro. Esta guía te llevará a través de varias opciones de personalización para los cuadros de subcategorías, incluyendo estilos para temas destacados, el estilo “Cajas” y el recorte de las descripciones de las categorías.
Personalización de cuadros con temas destacados
Para lograr un aspecto audaz y colorido en tus cuadros de subcategorías 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 hacer que tus cuadros de subcategorías se vean así:
- Ve al panel de administración de tu sitio.
- Navega a Personalizar > Temas.
- Crea un nuevo tema 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;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
Ajusta los selectores CSS y los colores para que coincidan con los nombres específicos de tus categorías y el esquema de color deseado.
Personalización del estilo “Cajas”
Si estás utilizando el estilo “Cajas” 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-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
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;
}
}
}
De nuevo, modifica los selectores y los colores para adaptarlos a la estructura de tu foro y a tus preferencias de diseño.
Gestión del recorte de las descripciones de las categorías
Por defecto, Discourse recorta las descripciones de las categorías a 4 líneas en los cuadros de categorías. Puedes ajustar esto usando CSS personalizado:
Para acortar la descripción a dos líneas, agrega este CSS a tu tema:
.category-boxes .description {
-webkit-line-clamp: 2;
}
Ajusta el valor de -webkit-line-clamp para lograr el número deseado de líneas visibles.
Consideraciones para dispositivos móviles
Al utilizar el estilo “Cajas con subcategorías” en escritorio, ten en cuenta que los temas pueden seguir siendo visibles en dispositivos móviles. Este comportamiento podría ser intencional en el diseño de Discourse para mantener la legibilidad en pantallas más pequeñas.
Si necesitas ajustar el diseño para móviles, es posible que debas agregar CSS específico para vistas móviles o consultar con un desarrollador de temas de Discourse para una solución más personalizada.
