Макет категории Humanetech

Создание сообщества
1

Продолжаем обсуждение из темы Сообщество не имеет границ: Discourse как ткань — идейный обмен и мозговой штурм:

@aschrijver Мне очень нравится, как вы оформили категории в таком сводном списке. Я бы с радостью сделал то же самое на нашем форуме! Не могли бы вы поделиться своей конфигурацией?

humane-categories
humane-categories159×330 8.04 KB

1 лайк
2

Спасибо @sunjam. Конечно. Думаю, следующий CSS справится с задачей:

/* ==============================================
     Макет главной страницы (Категории + Последние)
   ==============================================
*/

/* [custom] Отображать подкатегории в виде списка */
.categories-and-latest .subcategory {
    display: table-row;
}

/* [custom] Скрыть счетчик «непрочитанных сообщений» */
.categories-and-latest .subcategory .new-posts {
    display: none;
}

/* [custom] Сбалансировать колонки, выделить больше места для заголовков тем */
.categories-and-latest .column.categories {
    max-width: 30%;
}

/* [custom] Скрыть колонку со статистикой тем */
.categories-and-latest .topics {
    display: none;
}

/* [custom] Увеличить ширину заголовка темы, чтобы заполнить колонку */
.categories-and-latest .latest-topic-list-item .main-link {
    max-width: 85%;
}

/* [custom] Отображать теги рядом с подкатегорией (под заголовком темы) */
.categories-and-latest .discourse-tags {
    position: relative;
    display: inline-flex;
    margin-left: 5px;
}

Примечание: В нём есть дополнительные стили для скрытия некоторых отвлекающих элементов в интерфейсе.

6 лайков