Category Banners

Можно исправить с помощью CSS.

Создайте новый #theme-component и добавьте это в общий CSS:

// Настройка Who's Online
.discovery-list-container-top-outlet.online_users_widget {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
}

Также можно добавить собственный цвет фона, границы и т. д.

3 лайка

Спасибо большое!

2 лайка

При желании вы можете выделить это так:

Используйте следующий код:

// Настройка виджета «Кто онлайн»
.discovery-list-container-top-outlet.online_users_widget {
      padding-top: 0.45em;
      padding-bottom: 0.05em;
      background-color: var(--secondary);
      border: 2.0px solid rgba(var(--primary-rgb), 0.2);
      border-radius: 0.65em;
      margin-top: 0.75em;
      margin-bottom: 0.75em;
}
  • margin регулирует пространство над и под блоком «Кто онлайн».
  • padding увеличивает внутреннее пространство внутри рамки.
  • border регулирует толщину контура рамки.
2 лайка

Немного не по теме, но какая пара шрифтов здесь используется, @bekircem? Мне нравится, как они сочетаются!

1 лайк

У меня есть небольшая просьба по функционалу, которая, как мне кажется, значительно улучшит этот компонент. Мне бы очень хотелось добавить ссылку «Читать далее…», ведущую на описание категории. Это очень элегантное решение для размещения подробного описания, не загромождая при этом страницу категории. Я могу добавить эту ссылку вручную, но тогда она будет отображаться на странице категорий, что выглядит не слишком аккуратно.

3 лайка

В этом коде не хватает ; на строке 5, а также отсутствует последующий пример.

Мне помогло следующее решение:

.discovery-list-container-top-outlet.online_users_widget {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  display: block !important;
}

Результат:

3 лайка

Отлично. К сожалению, мой пост слишком старый, чтобы я мог исправить код. Спасибо, что сообщили, что я забыл «;».

3 лайка

Та же проблема возникает и для ссылок на теги и категории. Не могли бы вы включить класс .hashtag-cooked в это исправление?

По какой-то причине у меня это работает неправильно. Некоторые категории и подкатегории показывают баннер, а некоторые — нет. Дело не в описании (или его отсутствии), так как у некоторых оно есть, но баннер всё равно не отображается. Не знаю, не сломал ли что-то новое обновление Discourse?

Вы указали идентификаторы категорий в настройке categories?

1 лайк

Да, я добавил их в редактор настроек объектов.
Кажется, есть какая-то ошибка, связанная с опцией скрытия, когда отсутствует описание.

Я проведу ещё несколько тестов и посмотрю, как всё получится.

Я только что заметил ошибку.
Я нахожусь в родительской категории Tiago | Music и нажимаю на подкатегорию Sir Giant. Появляется баннер. Затем я нажимаю одну из ссылок «Документация» в боковой панели, чтобы перейти на страницу тегов Announcements. Когда я нажимаю ссылку General Discussion, которая возвращает меня в корень подкатегории Sir Giant, баннер исчезает.

В первый раз, когда я заходил на Announcements, баннера не было. Когда я перешёл на страницу тегов Music, а затем обратно на Announcements, баннер появился.

Я также только что заметил ещё кое-что: если я нахожусь на странице Announcements и баннера нет, то при повторном нажатии на ту же ссылку (Announcements) баннер появляется — это явно ошибка.

3 лайка

Ещё две проблемы:

1 — Я нахожусь в категории с описанием. Описание отображается в баннере. В этом описании есть внешняя ссылка на мой интернет-магазин. При клике на неё, несмотря на то, что у меня включена настройка открывать все внешние ссылки в новой вкладке, ссылка открывается в той же вкладке. Я могу подтвердить, что настройка работает, потому что сама тема, определяющая описание баннера, открывает ссылку в новой вкладке.

2 — Теперь, когда я нахожусь на сайте внешней ссылки (которая открылась в той же вкладке), мне нужно нажать кнопку «Назад» в браузере, чтобы вернуться в подкатегорию. На этот раз описание полностью исчезло. Баннер и его заголовок на месте, но описания нет. Даже если обновить страницу или принудительно обновить браузер, оно не возвращается. Единственный способ увидеть его снова — вернуться в основную категорию, а затем снова зайти в подкатегорию.


РЕДАКТИРОВАНИЕ: Хорошо, я кое-что понял. Конечно, я не знаю, что происходит за кулисами, но проблема вызвана красной опцией. Зелёная опция работает как ожидалось (всегда на экране, независимо от того, куда я кликаю, нет необходимости дважды кликать по меню боковой панели, чтобы вернуть баннер):

3 лайка

Мне удалось воспроизвести вашу проблему, но объяснить её не могу. :sweat_smile:

Технически (игнорируйте меня), вот что я наблюдаю с этим элементом header-list-container-bottom:

  • Если выбрать подкатегорию → тег, компонент вставляется, и сразу после этого вызывается teardownComponent (?). Однако компонент не уничтожается. Поскольку из функции очистки удаляется класс category-header из <body>, некоторые стили CSS скрывают баннер. Вы можете выбрать другой тег, чтобы снова вставить компонент.

    • На той же странице, если нажать на ссылку документации в боковой панели, наблюдается то же поведение.
    • Это не происходит, если, например, выбрать категорию из выпадающего списка.

Запутанно то, что после вставки сразу вызывается will-destroy.

2 лайка

Что ж, по крайней мере, я знаю, что не только я сталкиваюсь с этим… это хорошо.

Даже если бы я и хотел, я понятия не имею, о чём вы говорите в своём объяснении, ха-ха. Но хорошо, что вы знаете: то, что должно работать определённым образом, не работает. Это, вероятно, шаг в правильном направлении для её исправления.

Похоже, проблема связана с расположением баннера, потому что, как я уже сказал, один из вариантов (по крайней мере, я не пробовал остальные два) работает.

1 лайк

Когда я выбираю «Показывать логотип категории», логотип отображается дважды: один раз из настроек категории и один раз из этого компонента темы. Я что-то делаю не так?

Также возможно ли разместить заголовок и/или описание раздела «О нас» под логотипом?

Нет, это известная ошибка. В той теме также есть CSS, который можно добавить, чтобы скрыть один из логотипов:

Спасибо, Мойн! CSS исправил изображение для меня.

Чтобы разместить название категории под изображением, мне помогло следующее:

.category-title-contents,
.category-title-header.category-banner-1slug .category-title-contents {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;}
.category-logo,
.category-title-header.category-banner-1slug .category-logo {
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0;}
.category-title,
.category-title-header.category-banner-1slug .category-title {
    width: 100%;
    margin-top: 20px;
    text-align: left;}

Привет! Может, кто-то поможет мне решить довольно странную проблему, которая возникла внезапно.

Ранее все заголовки в баннерах были белыми, но теперь в некоторых категориях они стали чёрными. Это известный баг, или мне стоит что-то проверить на своей стороне?

Например:

Ссылка на наше сообщество, на всякий случай: https://community.elfsight.com/

1 лайк