Intestazione grande - Intestazione piccola

Questo componente del tema fornirà un’intestazione fissa con un logo grande quando si è in cima alla pagina. Man mano che si scorre verso il basso, apparirà la normale barra dell’intestazione di Discourse. Questo permette di visualizzare in modo pulito un logo di grandi dimensioni nella parte superiore della pagina.

Su mobile, la barra dell’intestazione verrà visualizzata solo quando il telefono è in modalità verticale. Lo spazio verticale è solitamente piuttosto limitato in modalità orizzontale, quindi questo mantiene l’interfaccia aperta. Per vedere di nuovo l’intestazione, puoi scorrere fino in cima alla pagina o ruotare il telefono nuovamente in modalità verticale.

Il modo migliore per vedere cosa fa questo componente del tema è provarlo, cosa che puoi fare visitando:

Ecco il mio tentativo di un piccolo GIF che lo mostra in azione (consiglio vivamente di cliccare sul link sopra per una visualizzazione migliore :slight_smile:)

Impostazioni:

Attualmente ci sono tre impostazioni che dovrebbero essere abbastanza chiare:

Installazione:

IMPORTANTE: Devi eseguire Discourse Version 2.0.0.beta4 o versioni successive affinché questo tema funzioni.

Dai un’occhiata a questo argomento per le istruzioni su come installare il componente del tema:

Link di importazione:

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

Informazioni:

La proposta originale per questo è arrivata da @ryanerwin su Marketplace. Mi ha chiesto di generalizzare ciò che avevo creato per lui e condividerlo con il resto della comunità. Quindi questo tema è fortemente ispirato e portato a voi da lui :slightly_smiling_face:

Note:

Dato che gli utenti amano personalizzare le loro intestazioni e l’area generale vicino alla parte superiore della pagina, potrebbero essere necessari ulteriori aggiustamenti per gestire conflitti con altre personalizzazioni. Ho testato che funzioni su un tema Discourse pulito, ma preparati a fare delle modifiche in base a quante altre personalizzazioni hai già fatto. Sarebbe ideale apportare quante più modifiche possibili a questo componente come un componente del tema figlio separato, in modo da non perdere traccia delle tue modifiche se/quando il tema viene aggiornato.

Problemi noti:

Poiché questo aggiunge spaziatura al div#main-outlet, la timeline degli argomenti può essere influenzata a seconda delle dimensioni del tuo logo. Esistono modi codificati per gestirlo, ma non è l’ideale. Molto probabilmente farò un post su Dev per delineare tutto ciò che ho provato e vedere se qualcuno ha idee su come compensare lo spazio aggiuntivo.

Repository:

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

Come sempre, sentiti libero di pubblicare se hai domande, problemi o suggerimenti! Il mio tempo è un po’ limitato in questo momento, ma cercherò di rispondere a tutto il più rapidamente possibile :slight_smile:

24 Mi Piace

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 Mi Piace

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 Mi Piace

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 Mi Piace

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

3 Mi Piace

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

5 Mi Piace

Ok, it should be fixed now :slightly_smiling_face:

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

7 Mi Piace

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 Mi Piace

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

5 Mi Piace

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

4 Mi Piace

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 Mi Piace

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 Mi Piace

@tshenry Perché il colore di sfondo del mio header è cambiato dal colore impostato nel mio tema al bianco quando ho attivato Big Header - Little Header? Devo sovrascriverlo? Sembra che il plugin dovrebbe rispettare lo schema di colori che ho già impostato nel tema.

1 Mi Piace

Sembra che avessi impostato l’uso della variabile di colore $secondary, definita nella palette colori del tuo sito. Ripensandoci, avrei dovuto usare $header_background, poiché ciò avrebbe permesso all’utente di modificarla facilmente tramite la propria palette colori. Modifica effettuata tramite:

3 Mi Piace

@tshenry Funziona per me sul logo “Piccolo” (grazie!), ma non su quello “Grande”, è ancora bianco.

1 Mi Piace

Sì, l’intestazione “Big” era sempre pensata per fondersi con lo sfondo del sito. Se vuoi cambiare questo, ti consiglio di provare a scrivere un po’ di CSS per aggiungere lo sfondo. Potrei valutare l’idea di aggiungere un interruttore quando rifattorizzo questo componente, ma prevedo che sarà una cosa che accadrà tra molto tempo.

Sì, sono riuscito a sovrascriverlo con:

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

Un altro problema che riscontro è che ho utilizzato CSS personalizzato per specificare un’altezza maggiore per l’intestazione con un logo più grande rispetto a quello predefinito di Discourse.

Penso che sarebbe utile poter impostare un’altezza per il logo grande e una per il logo piccolo nelle impostazioni del tuo plugin, in modo da poter ottenere l’aspetto che stiamo cercando.

In alternativa, come potrei impostare l’altezza dell’intestazione “Piccola”?

La prossima volta che ci lavorerò, cercherò di rendere le cose un po’ più flessibili tramite le impostazioni, ma fino ad allora dovrai smanettare con il CSS e altro per trovare la soluzione migliore che si adatti alle tue altre personalizzazioni.

1 Mi Piace

Grazie! Ho dovuto disabilitare temporaneamente il tuo plugin perché, nella sezione /admin, non riuscivo a cliccare sui link di navigazione in alto (Dashboard, Impostazioni, Utenti, ecc…). Non sono sicuro se fosse un conflitto con il mio CSS, ma lo indagherò.

AGGIORNAMENTO: Era effettivamente il mio CSS, ho commesso un errore da qualche parte; non c’entra nulla con il tuo plugin.

1 Mi Piace