Я только что настраиваю свой сайт и пытаюсь добавить изображение в верхнюю шапку.
В инструкциях в разделе «Настройки > Брендинг» сказано:
Используйте широкое прямоугольное изображение высотой 120 пикселей и соотношением сторон более 3:1
Поэтому я использую PNG-изображение размером 120 пикселей на 2000 пикселей и ожидал, что оно будет расположено слева и полностью заполнит контейнер шапки, но этого не происходит!! Что я сделал не так?
Судя по вашему скриншоту, изображение правильно установлено слева. Заголовок Discourse отображается внутри div-контейнера с классом wrap, ширина которого ограничена. Именно поэтому логотип не находится полностью слева на экране.
В инструкциях указано загружать изображение высотой 120 пикселей, но при отображении на Discourse его высота уменьшается примерно до 31 пикселя. Это означает, что ширина загруженного вами изображения будет делиться на 4 при отображении на вашем сайте. Судя по скриншоту, ширина логотипа составляет примерно 660 пикселей, поэтому, похоже, он отображается корректно.
Если у вас есть более узкий логотип, стоит попробовать загрузить его и посмотреть, как он будет выглядеть.
Спасибо, Саймон. Я бы хотел, чтобы логотип полностью заполнял шапку, это возможно? Даже при уменьшенной ширине изображения оно по-прежнему ограничено высотой 31 пиксель и выглядит не очень хорошо.
Теоретически можно заполнить большую часть заголовка, но, скорее всего, потребуется метод проб и ошибок, чтобы добиться нужного результата. Возможно, вам придётся внести корректировки в CSS вашего сайта. Если вас это интересует, ознакомьтесь с руководством для начинающих по использованию тем Discourse и руководством разработчика по темам Discourse.
Изучив наши инструкции по настройке logo, я считаю, что стоит указать оптимальное соотношение сторон. Логотип на вашем скриншоте имеет соотношение сторон больше 3:1, но, на мой взгляд, он слишком широкий. Если посмотреть на логотип, используемый на форуме Discourse Meta, можно увидеть, что он отображается примерно в размере 150 x 40 пикселей. На мой взгляд, это идеальное соотношение сторон — чуть меньше 4:1.
Чтобы добиться нужного эффекта, возможно, стоит использовать CSS.
Пример:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
Кажется, вы не совсем поняли мою задачу. Речь не об эффекте, а о том, чтобы заполнить заголовок изображением, которое в настоящее время ограничено высотой 31 пиксель.
Можешь дать ссылку на своё изображение здесь?
Тогда я понял вашу проблему. Однако, если добиться желаемого с помощью изображения сложно, почему бы не загрузить логотип без градиента и добавить его через CSS? Мне кажется, это проще и понятнее. 
Но, возможно, конечный результат невозможно достичь с помощью CSS?
Да, верно.
Я только что нашёл этот форум, который, похоже, реализует то, что мне нужно.
При дальнейшем поиске я обнаружил используемый ими CSS, но я новичок здесь и всё ещё пытаюсь понять, как добавить CSS, чтобы внести такие изменения.
На вашем примере сайта используются два изображения.
Логотип с прозрачным фоном и фоновое изображение на d.header:
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
Да, похоже, это правильный путь 
Теперь мне нужно понять, как добавить этот CSS.
Я использую тему «Оттенки синего».
Я изучаю руководства Discourse, но, возможно, мне нужно прочитать ещё немного.
Чтобы добавить CSS, я считаю, что лучший способ — создать новый компонент темы. Это предотвратит потерю ваших изменений при обновлении текущей темы.
Перейдите в панель администратора → Настроить → Темы → Компоненты → Установить → Создать новый
Спасибо, я смог следовать вашему руководству выше, и я почти добрался до цели!
Вы помогли мне немного лучше понять, как всё работает в Discourse.
Я проведу сегодня вечер за изучением дополнительных материалов.
Ещё раз спасибо за вашу помощь.
В связи с обсуждением заголовка talksurf;
Я вижу, откуда берётся фоновое изображение, но не могу найти изображение «talksurf» слева, которое плавает поверх фона.
Добавление «talksurf» как изображения в Настройки > Брендинг > Логотип приводит к тому, что изображение становится намного меньше: Discourse уменьшает его с исходной высоты 120 пикселей до всего 31 пикселя. Talksurf значительно выше 31 пикселя.
Логотип Talksurf — это обычный логотип, загруженный в разделе «Бренд» панели администратора.
Я загрузил точно такой же логотип и получил изображение высотой 40 пикселей без каких-либо настроек:
Поэтому я не понимаю, как на вашем форуме он может быть высотой 31 пиксель. У вас есть ссылка на него, чтобы я мог посмотреть HTML и CSS?
Кроме того, вот как можно узнать, как они настроили свой заголовок:
Спасибо за помощь. URL-адрес: https://yas-cfr.discourse.group/. Как вы видите, используя тот же логотип, что и вы, я получаю высоту 35 пикселей, что отличается от вашей (40 пикселей).
Размер изображения talksurf составляет 322 x 63 пикселя.
Вам нужно удалить следующее правило CSS:
.d-header #site-logo {
max-height: 35px !important;
}
Возможно, это прописано в вашей теме, поэтому вам нужно переопределить это значение.
Обратите внимание, что поскольку в правиле используется !important, вам также нужно добавить это в своём правиле:
.d-header #site-logo {
max-height: none !important;
}
