Diseño de categoría Humanetech

Comunidad
1

Continuando la discusión de La comunidad no tiene límites: Discourse como un tejido - ideación y lluvia de ideas:

@aschrijver Me encanta cómo has organizado las categorías en una lista tan consolidada. ¡Me encantaría hacer lo mismo en nuestro foro! ¿Te importaría compartir tu configuración?

categorias-humanas
categorias-humanas159×330 8.04 KB

1 me gusta
2

Gracias @sunjam. Claro. Creo que el siguiente CSS hace el trabajo:

/* ==============================================
     Diseño de la página de inicio (Categorías + Últimos)
   ==============================================
*/

/* [custom] Mostrar subcategorías como una lista */
.categories-and-latest .subcategory {
    display: table-row;
}

/* [custom] Ocultar el recuento de 'publicaciones sin leer' */
.categories-and-latest .subcategory .new-posts {
    display: none;
}

/* [custom] Equilibrar columnas, más espacio para los títulos de los temas */
.categories-and-latest .column.categories {
    max-width: 30%;
}

/* [custom] Ocultar la columna de estadísticas de los temas */
.categories-and-latest .topics {
    display: none;
}

/* [custom] Aumentar el ancho del título del tema para llenar la columna */
.categories-and-latest .latest-topic-list-item .main-link {
    max-width: 85%;
}

/* [custom] Mostrar las etiquetas junto a la subcategoría (debajo del título del tema) */
.categories-and-latest .discourse-tags {
    position: relative;
    display: inline-flex;
    margin-left: 5px;
}

Nota: Incluye algunos elementos adicionales para ocultar ciertos elementos distractores en la interfaz de usuario.

6 Me gusta