Ich richte gerade meine Website ein und versuche, ein Bild im oberen Header-Bereich hinzuzufügen.
Die Anweisungen unter „Einstellungen > Branding
Laut deinem Screenshot scheint das Bild korrekt linksbündig platziert zu sein. Der Discourse-Header wird innerhalb eines wrap-Divs angezeigt, dessen Breite begrenzt ist. Das ist der Grund, warum das Logo nicht ganz am linken Rand des Bildschirms positioniert ist.
Die Anweisungen fordern dich auf, ein Bild mit einer Höhe von 120 px hochzuladen. Wenn dieses Bild jedoch in Discourse angezeigt wird, wird seine Höhe auf ungefähr 31 px reduziert. Das bedeutet, dass die Breite des hochgeladenen Bildes beim Anzeigen auf deiner Website durch 4 geteilt wird. Meiner Einschätzung nach ist das Logo in deinem Screenshot ungefähr 660 px breit, sodass es korrekt angezeigt wird.
Falls du ein schmaleres Logo zur Verfügung hast, könntest du es gerne ausprobieren und schauen, wie es aussieht.
2 „Gefällt mir“
Danke, Simon. Ich möchte, dass das Logo den Header komplett ausfüllt. Ist das möglich? Selbst bei einer reduzierten Bildbreite ist es auf eine Höhe von 31 px beschränkt und sieht nicht gut aus.
Theoretisch ist es möglich, den Großteil des Headers auszufüllen, aber es wird wahrscheinlich einige Versuche und Irrtümer erfordern, um das Richtige zu erreichen. Möglicherweise müssen Sie das CSS Ihrer Website anpassen, um dies zu tun. Wenn Sie daran interessiert sind, werfen Sie einen Blick auf Anfängerleitfaden zur Verwendung von Discourse-Themes und Entwicklerleitfaden für Discourse-Themes.
Bei Betrachtung unserer Anweisungen für die Einstellung logo denke ich, dass wir ein optimales Seitenverhältnis angeben sollten. Das Logo in Ihrem Screenshot hat zwar ein Seitenverhältnis von mehr als 3:1, aber es scheint mir, dass es zu breit ist. Wenn Sie sich das Logo ansehen, das auf dem Discourse-Meta-Forum verwendet wird, werden Sie feststellen, dass es etwa 150 x 40 Pixel groß angezeigt wird. Das scheint mir das ideale Seitenverhältnis zu sein – etwas weniger als 4:1.
Um Ihren gewünschten Effekt zu erzielen, können Sie etwas CSS verwenden.
Beispiel:
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
2 „Gefällt mir“
Ich denke, du hast mein Ziel nicht ganz verstanden. Es geht nicht um den Effekt, sondern darum, das Header-Feld mit einem Bild zu füllen, das derzeit auf eine Höhe von 31 px beschränkt ist.
Kannst du hier ein Bild verlinken?
1 „Gefällt mir“
Ich verstehe dein Problem dann. Wenn es jedoch schwierig ist, das gewünschte Bild zu erreichen, warum lädst du das Logo nicht ohne Farbverlauf hoch und fügst den Verlauf per CSS hinzu? Das scheint mir einfacher und direkter zu sein. 
Aber vielleicht lässt sich dein Endbild mit CSS nicht erreichen?
3 „Gefällt mir“
Ja, genau.
Ich habe gerade dieses Forum gefunden, das scheinbar das erreicht, was ich möchte.
Bei weiterer Suche habe ich das verwendete CSS entdeckt, aber ich bin neu hier und versuche noch zu verstehen, wie man CSS hinzufügt, um solche Änderungen vorzunehmen.
Auf Ihrer Beispielwebsite werden zwei Bilder verwendet.
Ein Logo mit transparentem Hintergrund und ein Hintergrundbild auf d.header:
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
4 „Gefällt mir“
Ja, das scheint der richtige Weg zu sein 
Ich muss jetzt nur noch verstehen, wie man dieses CSS hinzufügt.
Ich verwende das Theme ‘Shades of blue’.
Ich arbeite mich gerade durch die Discourse-Anleitungen, aber ich muss vielleicht noch etwas mehr lesen.
1 „Gefällt mir“
Um CSS hinzuzufügen, ist es meiner Meinung nach am besten, eine neue Theme-Komponente zu erstellen, damit Ihre Änderungen bei einem Update Ihres aktuellen Themes nicht überschrieben werden.
Gehen Sie in Ihr Admin-Panel → Anpassen → Themes → Komponenten → Installieren → Neu erstellen
Klicken Sie dann auf Zu allen Themes hinzufügen – oder wählen Sie manuell Theme(s) aus – und anschließend auf CSS/HTML bearbeiten:
Tragen Sie Ihr CSS im Reiter CSS ein.
4 „Gefällt mir“
Vielen Dank, ich konnte Ihr obiges Tutorial nachvollziehen und bin fast soweit!
Sie haben mir geholfen, ein wenig mehr darüber zu verstehen, wie die Dinge mit Discourse funktionieren.
Ich werde mir heute Abend etwas Zeit nehmen, um noch ein bisschen mehr zu lernen.
Nochmals vielen Dank für Ihre Hilfe
3 „Gefällt mir“
In Bezug auf den Talksurf-Header:
Ich kann sehen, wo das Hintergrundbild herkommt, aber nicht das ‚Talksurf’-Bild links, das über dem Hintergrundbild schwebt.
Wenn ich ‚Talksurf’ als Bild unter Einstellungen>Branding>logo hinzufüge, wird es viel kleiner dargestellt, da Discourse die ursprüngliche Höhe von 120px auf nur 31px verkleinert. Talksurf ist jedoch deutlich höher als 31px.
Das Talksurf-Logo ist ein Standardlogo, das im Admin-Bereich für Marken hochgeladen wurde.
Ich habe dasselbe Logo hochgeladen und erhielt ein 40 px hohes Logo ohne Anpassungen:
Daher verstehe ich nicht, wie es auf deinem Forum 31 px hoch sein könnte. Hast du einen Link dazu, damit ich mir den HTML- und CSS-Code ansehen kann?
Außerdem ist hier, wie man herausfindet, wie sie ihren Header angepasst haben:
- Öffne https://forum.talksurf.com/
- Zeige in deinem Browser (ich nehme Chrome als Beispiel) die Entwicklertools, indem du F12 drückst.
- Klicke auf den Auswahl-Pfeil:
- Klicke auf den Header:
- Schaue dir rechts in den Entwicklertools den CSS-Code an:
Die ersten Regeln sind nicht die Standardregeln, sondern benutzerdefiniert. Es gibt keine offensichtliche Möglichkeit, das zu erkennen; man merkt es eher empirisch… Indem man sich die Selektoren, den SCSS-Dateinamen usw. ansieht.
3 „Gefällt mir“
Danke für deine Hilfe. Die URL lautet https://yas-cfr.discourse.group/. Wie du sehen kannst, erhalte ich bei Verwendung desselben Logos wie du eine Höhe von 35 px, was sich von deiner (40 px) unterscheidet.
Die Größe des talksurf-Bildes beträgt 322 x 63 px.
Sie müssen diese CSS-Regel entfernen, die Sie haben:
.d-header #site-logo {
max-height: 35px !important;
}
Vielleicht ist dies in Ihrem Theme festgelegt, sodass Sie es überschreiben müssen.
Beachten Sie, dass Sie aufgrund der Verwendung von !important in der Regel auch dies in Ihrer eigenen Regel hinzufügen müssen:
.d-header #site-logo {
max-height: none !important;
}
6 „Gefällt mir“
Ja, genau!!
Ich habe die Änderung vorgenommen, und jetzt ist die Größe 40 px – das gibt mir viel mehr Spielraum, um einen künstlerischeren Header zu gestalten.
Vielen Dank für deine Hilfe (wieder einmal!)
3 „Gefällt mir“
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.