В этом руководстве объясняется, как настроить внешний вид блоков подкатегорий в Discourse, включая изменение стилей для избранных тем, модификацию стиля «Блоки» и управление усечением описания категории.
Требуемый уровень пользователя: Администратор
Блоки подкатегорий в Discourse можно настроить для улучшения визуальной привлекательности и организации вашего форума. В этом руководстве мы рассмотрим различные варианты настройки блоков подкатегорий, включая стили для избранных тем, стиль «Блоки» и усечение описания категории.
Настройка блоков с избранными темами
Чтобы создать смелый и красочный вид для блоков подкатегорий с избранными темами, вы можете использовать пользовательский CSS. Этот метод удаляет логотипы и применяет различные фоновые цвета к каждой подкатегории.
Вот как сделать ваши блоки подкатегорий похожими на этот пример:
- Перейдите в панель администратора вашего сайта.
- Перейдите в раздел Настроить > Темы.
- Создайте новую тему или отредактируйте существующую.
- Добавьте следующий CSS в вашу тему:
.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;
}
}
}
Отрегулируйте селекторы CSS и цвета в соответствии с названиями ваших категорий и желаемой цветовой схемой.
Настройка стиля «Блоки»
Если вы используете стиль «Блоки» для подкатегорий, вы можете настроить его аналогичным образом:
В CSS вашей темы добавьте следующий код:
.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;
}
}
}
Снова измените селекторы и цвета, чтобы они соответствовали структуре и дизайнерским предпочтениям вашего форума.
Управление усечением описания категории
По умолчанию Discourse усекать описания категорий до 4 строк в блоках категорий. Вы можете изменить это с помощью пользовательского CSS:
Чтобы сократить описание до двух строк, добавьте этот CSS в вашу тему:
.category-boxes .description {
-webkit-line-clamp: 2;
}
Измените значение -webkit-line-clamp, чтобы получить желаемое количество видимых строк.
Особенности для мобильных устройств
При использовании стиля «Блоки с подкатегориями» на рабочем столе имейте в виду, что темы могут оставаться видимыми на мобильных устройствах. Такое поведение может быть намеренным в дизайне Discourse для обеспечения читаемости на небольших экранах.
Если вам нужно изменить макет для мобильных устройств, возможно, потребуется добавить специфический CSS для мобильных представлений или обратиться к разработчику тем Discourse для более индивидуального решения.
