Big Header - Little Header

This theme component will provide a stationary header with a large logo when scrolled at the top of the page. As you scroll down the page, the normal Discourse header bar will appear. This allows a large site logo to be cleanly displayed at the top of the page.

On mobile, the header bar will only display when the phone is in portrait orientation. Vertical space is usually fairly limited when you are in landscape orientation, so this will keep things open. To see the header again, you can either scroll to the top of the page or rotate the phone back to portrait orientation.

The best way to see what this theme component does is to try it out, which you can do by visiting:

Here is my attempt at a small GIF of it in action (highly recommend clicking on the link above for a better illustration :slight_smile:)

Settings:

There are currently three settings that should be pretty self-explanatory:

Installation:

IMPORTANT: You must be running Discourse Version 2.0.0.beta4 or later for this theme to work.

Take a look at this topic for instructions on how to install the theme component:

Import Link:

https://github.com/tshenry/discourse-big-header-little-header.git

About:

The original proposal for this came from @ryanerwin on the Marketplace. He asked that I generalize what I created for him and share it with the rest of the community. So this theme is very much inspired and brought to you by him :slightly_smiling_face:

Notes:

Being that users love to customize their headers and the general area near the top of the page, there may need to be some additional adjustments made to handle conflicts with other customizations. I have tested this to work on a clean Discourse theme, but be prepared to tinker with it depending on how many other customizations you’ve done. It would be ideal to do as many of the modifications to this as a separate child theme component so that you do not lose track of your changes if/when the theme is updated.

Known issues:

Since this adds padding to the div#main-outlet, the topic timeline can be affected depending on how large your logo is. There are hard-coded ways to handle it, but that’s not ideal. I will most likely make a post in Dev to outline all that I’ve tried and see if anyone has ideas on how to compensate for the extra padding.

Repo:

GitHub - tshenry/discourse-big-header-little-header

As always, please feel free to post if there are any questions, problems, or suggestions! My time is a little tight right now, but I will try address everything as quickly as possible :slight_smile:

24 лайка

Awesome work on this @tshenry.

For anyone who wants to use a BIG LOGO at the top of their Discourse site, particularly if their logo is not rectangular, this is a great theme plugin!

1 лайк

Oh dang, that’s a pretty rad component you’ve got there, thanks for sharing back with us! :heart_eyes:

Any chance of an animated sample, just so those interested in something similar can git the gist of how it feels? (Or better yet, link to a live sample you can share on theme creator so they can play with it themselves!)

6 лайков

No problem! :slightly_smiling_face:

I will most definitely add a sample to theme creator. Thanks for the reminder! I need to update my other themes with the links to their demos on there as well. I’ll try to get a GIF in the post as well.

Edit: I’ve added both an animated image and a demo link to the topic post :grin:

9 лайков

I believe that recent logo changes may have broken this component - if you look at the theme creator version it is not working

3 лайка

Yep, very broken! I’ll get that fixed up ASAP.

5 лайков

Ok, it should be fixed now :slightly_smiling_face:

If anyone reading this notices issues after updating the component, please report them!

7 лайков

There’s just a slight dead zone under the little header where you can’t interact with certain things. Highlighting text, entering a topic, interacting with the timeline. I’m sorry, I don’t really know how to describe my problem, but you can reproduce it by just having text or the timeline below the little header. Try to highlight the text, or interact with the timeline.

Does anybody have any suggestions to fix this? It’s not a super huge problem in general, but it does make the Table of Contents theme component wonky to work with. I’m not sure if this is something to tell you or them.

I love this component, by the way @tshenry.

3 лайка

Thanks for reporting! This should be fixed once you update the component. Let me know if you ever find any other issues.

5 лайков

My goodness, that was quick! Works fantastic, thank you so much!

4 лайка

Я установил эту тему, но мой логотип не отображается. До установки темы он был виден.

Есть ли решение этой проблемы? Спасибо!

1 лайк

Я давно хотел взглянуть на этот компонент и убедиться, что всё работает как положено. Посмотрю сегодня или завтра и дам знать.

Редакция: Я протестировал, и всё работает корректно. Убедитесь, что добавили изображение крупного логотипа в настройки темы. У меня есть несколько идей по улучшению этого компонента, но пока не уверен, когда смогу к ним приступить.

2 лайка

@tshenry Почему цвет фона моего заголовка изменился с заданного мной в теме на белый после активации плагина Big Header - Little Header? Нужно ли мне переопределить его? Казалось бы, плагин должен уважать цветовую схему, которую я уже настроил в теме.

1 лайк

Похоже, я установил использование переменной цвета $secondary, которая определена в цветовой схеме вашего сайта. В ретроспективе я должен был использовать $header_background, так как это позволило бы пользователю легко заменить её через свою цветовую схему. Изменено через:

3 лайка

@tshenry У меня работает с логотипом «Little» (спасибо!), но не с логотипом «Big» — он всё ещё белый.

1 лайк

Ага, заголовок “Big” изначально задумывался так, чтобы сливаться с фоном сайта. Если вы хотите это изменить, попробуйте подобрать CSS-стили для добавления фона. Я могу рассмотреть возможность добавления переключателя, когда буду рефакторить этот компонент, но, скорее всего, это произойдёт не скоро.

Да, мне удалось переопределить это с помощью:

.d-header { background-color: #000 !important; }

Ещё одна проблема, с которой я столкнулся, заключается в том, что я использовал пользовательские стили CSS, чтобы задать большую высоту для моего заголовка с логотипом большего размера, чем стандартный в Discourse.

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

В противном случае, как мне установить высоту заголовка «Little»?

В следующий раз, когда я займусь этим, я постараюсь сделать настройки чуть более гибкими, но до тех пор вам придётся повозиться с CSS и подобными вещами, чтобы найти лучшее решение, которое будет сочетаться с вашими другими кастомизациями.

1 лайк

Спасибо! Мне пришлось временно отключить ваш плагин, потому что в разделе /admin я не мог кликать по ссылкам навигации вверху (Панель управления, Настройки, Пользователи и т. д.). Я не мог понять, связано ли это с моим CSS, но я разберусь.

ОБНОВЛЕНИЕ: Действительно, проблема была в моём CSS — я где-то ошибся, и к вашему плагину это не имеет никакого отношения.

1 лайк