Cabeçalho Grande - Cabeçalho Pequeno

[tshenry (Taylor)]

Este componente de tema fornecerá um cabeçalho fixo com um logotipo grande quando a página estiver no topo. À medida que você rola para baixo, a barra normal do cabeçalho do Discourse aparecerá. Isso permite que um logotipo grande do site seja exibido de forma limpa no topo da página.

No celular, a barra do cabeçalho só será exibida quando o telefone estiver em orientação retrato. O espaço vertical costuma ser bastante limitado na orientação paisagem, então isso manterá tudo mais aberto. Para ver o cabeçalho novamente, você pode rolar até o topo da página ou girar o telefone de volta para a orientação retrato.

A melhor maneira de ver o que este componente de tema faz é experimentá-lo, o que você pode fazer visitando:

'Big Header - Little Header' by @tshenry

Aqui está minha tentativa de um pequeno GIF dele em ação (altamente recomendado clicar no link acima para uma ilustração melhor )

Configurações:

Atualmente, há três configurações que devem ser bastante autoexplicativas:

Instalação:

IMPORTANTE: Você deve estar executando a Versão 2.0.0.beta4 do Discourse ou posterior para que este tema funcione.

Dê uma olhada neste tópico para instruções sobre como instalar o componente de tema:

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Link de Importação:

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

Sobre:

A proposta original para isso veio de @ryanerwin no Marketplace. Ele pediu que eu generalizasse o que criei para ele e compartilhasse com o resto da comunidade. Então, este tema é muito inspirado e trazido a você por ele

Notas:

Como os usuários adoram personalizar seus cabeçalhos e a área geral perto do topo da página, pode ser necessário fazer alguns ajustes adicionais para lidar com conflitos com outras personalizações. Testei para funcionar em um tema Discourse limpo, mas esteja preparado para mexer nele, dependendo de quantas outras personalizações você fez. Seria ideal fazer a maioria das modificações neste tema como um componente de tema filho separado, para que você não perca o controle de suas alterações se/quando o tema for atualizado.

Problemas conhecidos:

Como isso adiciona preenchimento ao div#main-outlet, a linha do tempo do tópico pode ser afetada dependendo do tamanho do seu logotipo. Existem maneiras codificadas para lidar com isso, mas isso não é ideal. Provavelmente farei uma postagem no Dev para detalhar tudo o que tentei e ver se alguém tem ideias sobre como compensar o preenchimento extra.

Repositório:

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

Como sempre, sinta-se à vontade para postar se houver dúvidas, problemas ou sugestões! Meu tempo está um pouco apertado agora, mas tentarei resolver tudo o mais rápido possível

[ryanerwin]

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!

[featheredtoast (Jeff Wong)]

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

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!)

[tshenry (Taylor)]

No problem!

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

[robmc (Robert McIntosh)]

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

[tshenry (Taylor)]

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

[tshenry (Taylor)]

Ok, it should be fixed now

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

[YTPMania_Forums (david)]

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.

[tshenry (Taylor)]

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

[YTPMania_Forums (david)]

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

[Ashley_N_Moses]

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!

[tshenry (Taylor)]

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.

[Denis_Heraud]

@tshenry Why did the background color of my header change from my set color in my theme to white when I activated Big Header - Little Header? Do I need to override it? It feels like the plugin should respect whatever color scheme I have already set in my theme.

[tshenry (Taylor)]

It looks like I had it set to use the $secondary color variable that’s defined in your site’s color scheme. In hindsight, I should have used $header_background since that would allow a user to swap it out through their color scheme very easily. Changed via:

Use header-background color variable

[Denis_Heraud]

@tshenry Works for me on the “Little” logo (thanks!), but not on the “Big” one, it’s still white.

[tshenry (Taylor)]

Ah yeah, the “Big” header was always intended to blend into the site’s background. If you want to change that, I would try to work out some CSS to add the background. I can look into adding a toggle when I refactor this component, but I expect that’s going to be a while down the road.

[Denis_Heraud]

Yes I was able to override it with:

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

[Denis_Heraud]

Another issue I’m running into is that I have used custom CSS to specify a larger height for my header with a larger logo than the Discourse default.

I feel like it would be useful if we could set a big logo height and a small logo height in your plugin settings so that we can achieve the look that we are aiming for.

Otherwise how would I set the height of the “Little” header?

[tshenry (Taylor)]

I’ll try to make things a little more flexible through the settings the next time I work on this, but until then you’ll need to tinker with the CSS and such to find the best solution that fits with your other customizations.

[Denis_Heraud]

Thanks! I had to disable your plugin for now because when in /admin I could not click on the navigation links at the top (Dashboard, Settings, Users, etc…). I can’t tell if it’s an interaction with my CSS but I’ll investigate.

UPDATE: It was indeed my CSS, I made a mistake somewhere, had nothing to do with your plugin.