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 Development 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개의 좋아요

I have installed this theme, but my logo is not showing up. It was before I installed this theme.

Is there a solution for this? Thanks!

1개의 좋아요

I’ve been meaning to take a look at this component and make sure everything is still working as expected. I’ll take a look either today or tomorrow and let you know.

Edit: I tested it out and all seems to be working correctly. Make sure you add the large logo image to the theme setting. I have a few improvements in mind for this component, but I’m not sure when I’ll get to them.

2개의 좋아요

@tshenry 제가 테마에서 설정한 배경색이 왜 Big Header - Little Header를 활성화했을 때 흰색으로 바뀌었나요? 오버라이드가 필요한 건가요? 플러그인이 이미 테마에서 설정한 색상 스킴을 존중해 주는 게 맞을 것 같은데, 그렇게 느껴집니다.

1개의 좋아요

사이트 색상 스킴에서 정의된 $secondary 색상 변수를 사용하도록 설정되어 있었던 것 같습니다. 사후에 생각해보면 $header_background를 사용했어야 했는데, 이렇게 하면 사용자가 색상 스킴을 통해 매우 쉽게 해당 값을 변경할 수 있기 때문입니다. 다음을 통해 변경했습니다:

3개의 좋아요

@tshenry “Little” 로고에서는 잘 작동해요(고마워요!), 그런데 “Big” 로고에서는 여전히 흰색이에요.

1개의 좋아요

아, 맞다. “Big” 헤더는 원래 사이트 배경과 자연스럽게 어우러지도록 의도된 거야. 그걸 바꾸고 싶다면, 배경을 추가하기 위해 CSS를 조정해 보는 게 좋겠어. 이 컴포넌트를 리팩터링할 때 토글 기능을 추가하는 방법을 살펴볼 수 있지만, 아마도 그건 좀 더 시간이 걸릴 거야.

네, 다음과 같이 오버라이드할 수 있었습니다:

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

제가 겪고 있는 또 다른 문제는, Discourse 기본값보다 큰 로고를 가진 헤더의 높이를 더 크게 설정하기 위해 커스텀 CSS를 사용했다는 점입니다.

플러그인 설정에서 큰 로고 높이와 작은 로고 높이를 설정할 수 있다면, 우리가 원하는 스타일을 구현하는 데 유용할 것 같습니다.

그렇지 않으면 “Little” 헤더의 높이를 어떻게 설정해야 할까요?

다음에 이 작업을 진행할 때 설정을 통해 좀 더 유연하게 만들도록 하겠습니다. 하지만 그때까지는 CSS 등을 직접 조정해서 다른 커스터마이징과 가장 잘 어울리는 최적의 해결책을 찾아보셔야 합니다.

1개의 좋아요

감사합니다! /admin에서 상단의 내비게이션 링크(대시보드, 설정, 사용자 등…)를 클릭할 수 없어서 일단 플러그인을 비활성화해야 했습니다. 제 CSS와의 상호작용 문제인지 확신할 수 없지만, 직접 조사해 보겠습니다.

업데이트: 결국 제 CSS의 문제였습니다. 어딘가에서 실수를 했고, 플러그인과는 전혀 무관했습니다.

1개의 좋아요