Humanetech category layout

Community
1

Continuing the discussion from Community has no boundary: Discourse-as-a-Fabric - ideation & brainstorm:

@aschrijver I really like how you’ve laid out the categories in such a consolidated list. I’d love to do the same on our forum! Would you mind sharing your configuration?

humane-categories

1 Like
2

Thanks @sunjam. Sure. I think the following CSS does the job:

/* ==============================================
     Landing Page Layout (Categories + Latest)
   ==============================================
*/

/* [custom] Display sub-categories as a list */
.categories-and-latest .subcategory {
    display: table-row;
}

/* [custom] Hide 'unread posts' count */
.categories-and-latest .subcategory .new-posts {
    display: none;
}

/* [custom] Balance columns, more space for topic titles */
.categories-and-latest .column.categories {
    max-width: 30%;
}

/* [custom] Hide topics statistics column */
.categories-and-latest .topics {
    display: none;
}

/* [custom] Increase topic title width to fill column */
.categories-and-latest .latest-topic-list-item .main-link {
    max-width: 85%;
}

/* [custom] Display tags next to sub-category (below topic title) */
.categories-and-latest .discourse-tags {
    position: relative;
    display: inline-flex;
    margin-left: 5px;
}

Note: It has some extra’s to hide certain distracting elements in the UI.

6 Likes