Создание баннера для отображения в верхней части вашего сайта

Discourse · 17.Август.2020 21:16:00

Это руководство объясняет различные методы создания и настройки баннеров на вашем сайте Discourse — от простых закрываемых баннеров до более продвинутых вариантов.

Требуемый уровень доступа пользователя: Модератор (закрываемый баннер), Администратор

Баннеры — это эффективный способ сообщить важную информацию посетителям вашего сайта. В этом руководстве мы подробно разберем различные методы создания и настройки баннеров на вашем сайте Discourse.

Приветственный баннер

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

Чтобы включить и настроить приветственный баннер, перейдите в административную панель и выберите ссылку Внешний вид > Приветственный баннер в боковом меню.

В этом разделе вы найдете следующие настройки:

Включено для тем…: Позволяет указать, какие из ваших активных тем должны отображать приветственный баннер.
Фоновое изображение: Загрузите изображение, которое будет служить фоном для вашего приветственного баннера.
Цвет текста: Если цвет текста по умолчанию, управляемый вашей цветовой палитрой, конфликтует с фоновым изображением, вы можете выбрать здесь новый цвет. Обратите внимание, что эта настройка применяется только при наличии загруженного фонового изображения.
Видимость на страницах: Определяет, на каких страницах отображается приветственный баннер. По умолчанию он показывается на Страницах верхнего меню (то есть на страницах, выбранных в настройке сайта Верхнее меню), но вы можете изменить это на:
- Только главная страница: Приветственный баннер отображается только на главной странице сайта (то есть на первой странице, указанной в настройке сайта Верхнее меню).
- Страницы обнаружения: Приветственный баннер отображается на всех страницах Верхнего меню, даже если они не отображаются в фактическом верхнем меню вашего сайта (то есть не выбраны в настройке).
- Все страницы: Приветственный баннер отображается на всех страницах вашего сайта. Это обычно не рекомендуется, так как может создать визуальный шум на страницах тем, отвлекая участников от чтения и участия в обсуждениях.
Расположение: Определяет, где на странице отображается приветственный баннер. По умолчанию он показывается Над содержимым темы, но вы также можете выбрать Под заголовком сайта. Разница довольно тонкая и показана на скриншотах ниже:

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

Заголовок для новых участников: Основное приветствие, показываемое новым участникам при их первом входе на сайт.
Заголовок для авторизованных участников: Основное приветствие, показываемое возвращающимся участникам.
Заголовок для анонимных посетителей: Основное приветствие, показываемое анонимным (то есть не авторизованным) пользователям.
Подзаголовок для авторизованных участников: Дополнительная строка текста под заголовком, показываемая возвращающимся участникам.
Подзаголовок для анонимных посетителей: Дополнительная строка текста под заголовком, показываемая анонимным (то есть не авторизованным) пользователям.
Текст-заполнитель поиска: Текст-заполнитель, отображаемый в поле поиска приветственного баннера.

Закрываемый баннер

Закрываемый баннер — это временное уведомление, которое пользователи могут закрыть. Вот как его создать:

Создайте или перейдите к теме в любой публичной категории. Первый пост (OP) вверху темы станет источником вашего баннера.
Откройте административные опции, нажав на значок гаечного ключа справа или внизу темы.
Выберите «Закрепить тему…»
В новом окне выберите Сделать тему баннером

Теперь баннер появится в верхней части вашего сайта. Пользователи увидят закрываемый баннер. Сотрудники также увидят ссылку для редактирования исходной темы.

Советы по созданию эффективных закрываемых баннеров:

Держите текст четким и лаконичным
Максимальная высота составляет 20vh (настраивается через CSS)
Для более длинного текста пользователи могут прокручивать его внутри баннера
Рассмотрите возможность добавления ссылки на соответствующую публичную тему для получения дополнительной информации
Если вы хотите скрыть тему, используемую в качестве баннера, вы можете исключить её из списка, используя административное меню темы

Постоянный баннер

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

В настройках вашего сайта найдите global_notice.
Введите текст баннера или HTML-код в это поле.

Советы по постоянным баннерам:

Этот тип баннера обычно используется для срочных сообщений сайта, но может применяться для любого постоянного сообщения
Этот баннер виден всем, включая анонимных пользователей на сайтах с требованием login_required
Баннер можно удалить, сбросив настройку сайта global notice

Продвинутые баннеры

Вы можете создавать более сложные баннеры с помощью компонентов тем. Обратите внимание, что эти компоненты тем могут конфликтовать с основной функцией приветственного баннера.

Баннер приветствия со ссылками

Этот компонент позволяет добавлять на баннер пользовательский текст и от 1 до 4 ссылок. Он предлагает различные варианты настройки, включая:

Выбор места отображения баннера (главная страница, списки тем или все страницы)
Добавление ссылок с иконками Font Awesome
Ограничение видимости в зависимости от уровня доверия пользователя
Настройка фоновых изображений или цветов
Изменение цветов текста и иконок

Универсальный баннер

Один из самых популярных и хорошо поддерживаемых компонентов, Универсальный баннер предлагает обширные возможности настройки через интерфейс, включая:

Ограничение отображения баннера только для:
- авторизованных или анонимных пользователей
- мобильных или настольных устройств
- главной страницы, списка тем или всех страниц
Варианты: закрываемый, расширяемый или постоянный
Настройка на полную ширину браузера
Управление цветами
Настройка заголовков и колонок с использованием HTML

Настройка баннеров с помощью CSS

Вы можете настроить все типы баннеров с помощью CSS. Для получения дополнительной информации о использовании CSS для настройки вашего сайта Discourse см. Руководство для начинающих по использованию тем Discourse.

leopedrini · 22.Август.2025 11:11:52

I could not find this option… Is it a new feature in Beta version?

leopedrini · 22.Август.2025 12:57:01

Update: after updating from 3.4.6 to 3.5.0, it was visible:

RBoy · 24.Август.2025 22:28:34

There’s a bug in the build 3.6.0.beta1-dev (e44347414a)

Changing this Site text has no effect on the text in the Search bar, it still always shows Search. Tested on Windows 10 x64 running Chrome

awesomerobot · 25.Август.2025 16:26:15

Working on a fix for this here: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

RBoy · 26.Август.2025 04:12:11

Amazing, thank you - that fixed it!

tknospdr · 03.Октябрь.2025 14:42:44

Having an issue with my background image for the welcome banner.
I’m using Cloudflare R2 S3 buckets for object storage on the site in question.
When I upload a background image in the admin section it shows up correctly, if I click to show it full size it works. And if I right click and show image in new tab it works and using the public bucket URL:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

What it injects into the CSS though, is this URL:

https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

I have another site that uses local storage and the banner background image works correctly.

Is this a bug in the code, or am I doing something wrong?

After digging around some more it looks like this CSS controls the background image:

If I manually replace the URL in the inspector it works.
I tried overriding that with:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

But that’s not working. Still feels like a bug though.

yuriy · 30.Октябрь.2025 14:43:23

@tknospdr, I am not quite following what issue are you experiencing?

I checked your site https://eu.technospider.com, and I see that the background image is rendered as expected:

tknospdr · 30.Октябрь.2025 14:49:01

I think I finally got the CSS override working. The issue is that it shouldn’t need an override.

It appears the banner code is using the wrong asset if you’re hosting with Cloudflare S3.

yuriy · 30.Октябрь.2025 15:17:00

Which exactly is your override?

On our side, we could make sure we apply only a URL pathname /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

I believe, this rule would work for you without requiring any overrides?

tknospdr · 30.Октябрь.2025 15:26:38

My entire override is:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

On our side, we could make sure we apply only a URL pathname /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS:
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
I believe, this rule would work for you without requiring any overrides?

In the UI, all I can do is upload an image, so I believe that a code change is needed to be able to remove my CSS override statement.
Would be happy to try out whatever fixes you care to implement.

Frenky · 07.Январь.2026 13:50:35

Hello everyone,

With the latest Discourse update, the theme component Advanced Search Banner is no longer supported and apparently no longer maintained. Instead, there is now the official Welcome Banner plugin.

The problem is that the new component currently only allows you to select a single background image. With the old Advanced Search Banner component, it was possible to define different background images for Light and Dark Mode, which was naturally ideal for different layouts and themes.

My question to the community:

Is there a way to replicate this functionality in the Welcome Banner?
Has anyone already implemented an extension or a workaround to use different background images for Light and Dark Mode?
Is it planned that the developers might implement this in the future?

I would appreciate any hints, tips, or ideas!

Thanks in advance!

Тема		Ответов	Просм.
What Theme Component is Discourse using for this? Support	2	99	05.10.2024
Custom banner or Some component (Help Needed) Support	2	95	25.10.2024
Setup custom Welcome banner on the homepage Support	2	920	31.08.2023
Name of component discourse top forum General	1	86	11.02.2025
I want add photo for download my app Support	2	73	18.09.2024