Grand En-tête - Petit En-tête

Ce composant de thème fournira un en-tête fixe avec un grand logo lorsque vous êtes en haut de la page. Au fur et à mesure que vous descendez dans la page, la barre d’en-tête normale de Discourse apparaîtra. Cela permet d’afficher proprement un grand logo de site en haut de la page.

Sur mobile, la barre d’en-tête ne s’affichera que lorsque le téléphone est en mode portrait. L’espace vertical est généralement assez limité en mode paysage, ce qui permet de garder l’interface dégagée. Pour voir à nouveau l’en-tête, vous pouvez soit faire défiler la page jusqu’en haut, soit tourner le téléphone pour le remettre en mode portrait.

La meilleure façon de voir ce que fait ce composant de thème est de l’essayer, ce que vous pouvez faire en visitant :

Voici ma tentative d’un petit GIF montrant son fonctionnement (je recommande vivement de cliquer sur le lien ci-dessus pour une meilleure illustration :slight_smile:)

Paramètres :

Il existe actuellement trois paramètres qui devraient être assez clairs :

Installation :

IMPORTANT : Vous devez exécuter Discourse Version 2.0.0.beta4 ou une version ultérieure pour que ce thème fonctionne.

Consultez ce sujet pour des instructions sur la façon d’installer le composant de thème :

Lien d’importation :

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

À propos :

La proposition originale pour cela provient de @ryanerwin sur le Marketplace. Il m’a demandé de généraliser ce que j’avais créé pour lui et de le partager avec le reste de la communauté. Ce thème est donc très inspiré et vous est présenté par lui :slightly_smiling_face:

Notes :

Étant donné que les utilisateurs adorent personnaliser leurs en-têtes et la zone générale près du haut de la page, il peut être nécessaire d’apporter des ajustements supplémentaires pour gérer les conflits avec d’autres personnalisations. J’ai testé cela pour qu’il fonctionne avec un thème Discourse propre, mais soyez prêt à le modifier en fonction du nombre d’autres personnalisations que vous avez effectuées. Il serait idéal d’effectuer autant de modifications que possible dans un composant de thème enfant séparé afin de ne pas perdre la trace de vos modifications si le thème est mis à jour.

Problèmes connus :

Puisque cela ajoute du remplissage au div#main-outlet, la chronologie des sujets peut être affectée selon la taille de votre logo. Il existe des méthodes codées en dur pour y remédier, mais ce n’est pas idéal. Je publierai probablement un message dans Dev pour décrire tout ce que j’ai essayé et voir si quelqu’un a des idées sur la façon de compenser le remplissage supplémentaire.

Dépôt :

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

Comme toujours, n’hésitez pas à poster si vous avez des questions, des problèmes ou des suggestions ! Mon temps est un peu limité en ce moment, mais je ferai de mon mieux pour répondre à tout aussi rapidement que possible :slight_smile:

24 « J'aime »

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 « J'aime »

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 « J'aime »

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 « J'aime »

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

3 « J'aime »

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

5 « J'aime »

Ok, it should be fixed now :slightly_smiling_face:

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

7 « J'aime »

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 « J'aime »

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

5 « J'aime »

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

4 « J'aime »

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 « J'aime »

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 « J'aime »

@tshenry Pourquoi la couleur d’arrière-plan de mon en-tête a-t-elle changé de la couleur définie dans mon thème au blanc lorsque j’ai activé Big Header - Little Header ? Dois-je la remplacer ? J’ai l’impression que le plugin devrait respecter la palette de couleurs que j’ai déjà configurée dans mon thème.

1 « J'aime »

Il semble que j’aie configuré l’utilisation de la variable de couleur $secondary définie dans la palette de couleurs de votre site. En y réfléchissant, j’aurais dû utiliser $header_background, car cela aurait permis à un utilisateur de la modifier facilement via sa propre palette de couleurs. Modification effectuée via :

3 « J'aime »

@tshenry Ça fonctionne pour moi avec le logo « Little » (merci !), mais pas avec le « Big », il est toujours blanc.

1 « J'aime »

Ah oui, l’en-tête « Big » était toujours destiné à se fondre dans le fond du site. Si vous souhaitez modifier cela, je vous suggère d’élaborer un peu de CSS pour ajouter un arrière-plan. Je peux envisager d’ajouter un interrupteur lorsque je refactoriserai ce composant, mais je m’attends à ce que cela prenne encore un certain temps.

Oui, j’ai pu le remplacer par :

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

Un autre problème que je rencontre est que j’ai utilisé du CSS personnalisé pour spécifier une hauteur plus grande pour mon en-tête avec un logo plus grand que celui par défaut de Discourse.

Je pense qu’il serait utile de pouvoir définir une hauteur pour le grand logo et une hauteur pour le petit logo dans les paramètres de votre plugin, afin que nous puissions obtenir l’apparence que nous visons.

Autrement, comment pourrais-je définir la hauteur de l’en-tête « Petit » ?

Je vais essayer de rendre les choses un peu plus flexibles via les paramètres la prochaine fois que je travaillerai là-dessus, mais en attendant, vous devrez bricoler le CSS et autres pour trouver la meilleure solution qui s’intègre à vos autres personnalisations.

1 « J'aime »

Merci ! J’ai dû désactiver votre plugin pour le moment, car lorsque j’étais dans /admin, je ne pouvais pas cliquer sur les liens de navigation en haut (Tableau de bord, Paramètres, Utilisateurs, etc.). Je ne sais pas si c’est une interaction avec mon CSS, mais je vais enquêter.

MISE À JOUR : C’était en effet mon CSS, j’ai fait une erreur quelque part, cela n’avait rien à voir avec votre plugin.

1 « J'aime »