Großer Header - Kleiner Header

[tshenry (Taylor)]

Diese Theme-Komponente bietet einen stationären Header mit einem großen Logo, wenn man sich ganz oben auf der Seite befindet. Beim Scrollen nach unten erscheint die normale Discourse-Header-Leiste. So kann ein großes Seitenlogo sauber am oberen Rand der Seite dargestellt werden.

Auf Mobilgeräten wird die Header-Leiste nur dann angezeigt, wenn das Telefon im Hochformat gehalten wird. Im Querformat ist der vertikale Platz meist recht begrenzt, daher bleibt die Ansicht so übersichtlich. Um die Header-Leiste wieder zu sehen, können Sie entweder ganz nach oben scrollen oder das Telefon zurück ins Hochformat drehen.

Der beste Weg, um zu sehen, was diese Theme-Komponente leistet, ist ein Testlauf. Sie können dies tun, indem Sie folgende Seite besuchen:

'Big Header - Little Header' by @tshenry

Hier ist mein Versuch, ein kleines GIF davon in Aktion zu zeigen (ich empfehle dringend, auf den Link oben zu klicken, um eine bessere Darstellung zu erhalten )

Einstellungen:

Derzeit gibt es drei Einstellungen, die sich von selbst erklären sollten:

Installation:

WICHTIG: Sie müssen Discourse Version 2.0.0.beta4 oder höher ausführen, damit dieses Theme funktioniert.

Schauen Sie sich dieses Thema für Anweisungen zur Installation der Theme-Komponente an:

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…

Import-Link:

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

Über:

Der ursprüngliche Vorschlag dafür stammt von @ryanerwin im Marketplace. Er bat mich, das, was ich für ihn erstellt habe, zu verallgemeinern und mit dem Rest der Community zu teilen. Dieses Theme ist also sehr stark von ihm inspiriert und geht auf ihn zurück

Hinweise:

Da Benutzer ihre Header und den allgemeinen Bereich nahe dem oberen Seitenrand gerne anpassen, müssen möglicherweise einige zusätzliche Anpassungen vorgenommen werden, um Konflikte mit anderen Anpassungen zu vermeiden. Ich habe getestet, dass dies auf einem sauberen Discourse-Theme funktioniert, aber seien Sie darauf vorbereitet, je nach Anzahl Ihrer anderen Anpassungen daran herumzudoktern. Es wäre ideal, so viele Änderungen wie möglich als separate untergeordnete Theme-Komponente vorzunehmen, damit Sie den Überblick über Ihre Änderungen nicht verlieren, falls das Theme aktualisiert wird.

Bekannte Probleme:

Da dies Padding zu div#main-outlet hinzufügt, kann die Themen-Timeline je nach Größe Ihres Logos beeinträchtigt werden. Es gibt fest codierte Möglichkeiten, damit umzugehen, aber das ist nicht ideal. Ich werde höchstwahrscheinlich einen Beitrag in Dev veröffentlichen, in dem ich alles aufliste, was ich versucht habe, und schauen, ob jemand Ideen hat, wie man das zusätzliche Padding ausgleichen kann.

Repository:

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

Wie immer können Sie gerne einen Beitrag verfassen, falls Sie Fragen, Probleme oder Vorschläge haben! Meine Zeit ist derzeit etwas knapp, aber ich werde versuchen, alles so schnell wie möglich zu beantworten

[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 Warum hat sich die Hintergrundfarbe meines Headers von meiner im Theme eingestellten Farbe auf Weiß geändert, als ich „Big Header - Little Header

[tshenry (Taylor)]

Es sieht so aus, als hätte ich es auf die Verwendung der $secondary-Farbvariablen eingestellt, die in der Farbschema Ihres Sites definiert ist. Im Nachhinein hätte ich $header_background verwenden sollen, da dies einem Benutzer ermöglichen würde, es über sein Farbschema sehr einfach auszutauschen. Geändert via:

Use header-background color variable

[Denis_Heraud]

@tshenry Bei dem „Little“-Logo funktioniert es für mich (danke!), aber beim „Big“-Logo nicht, er ist immer noch weiß.

[tshenry (Taylor)]

Ah ja, der „Big

[Denis_Heraud]

Ja, ich konnte es mit folgendem Code überschreiben:

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

[Denis_Heraud]

Ein weiteres Problem, auf das ich stoße, ist, dass ich benutzerdefiniertes CSS verwendet habe, um eine größere Höhe für meine Kopfzeile mit einem größeren Logo als dem Discourse-Standard festzulegen.

Ich finde, es wäre hilfreich, wenn wir in den Plugin-Einstellungen eine große und eine kleine Logohöhe festlegen könnten, um den gewünschten Look zu erzielen.

Wie könnte ich andernfalls die Höhe der „kleinen

[tshenry (Taylor)]

Ich werde beim nächsten Mal versuchen, die Einstellungen etwas flexibler zu gestalten, aber bis dahin musst du am CSS und Ähnlichem herumspielen, um die beste Lösung zu finden, die zu deinen anderen Anpassungen passt.

[Denis_Heraud]

Danke! Ich musste dein Plugin vorübergehend deaktivieren, da ich im /admin-Bereich nicht auf die Navigationslinks oben (Dashboard, Einstellungen, Benutzer usw.) klicken konnte. Ich konnte nicht feststellen, ob es sich um eine Interaktion mit meinem CSS handelte, werde das aber weiter untersuchen.

UPDATE: Es lag tatsächlich an meinem CSS. Ich habe mich irgendwo vertan; das hat nichts mit deinem Plugin zu tun.