Wie ändere ich die Höhe des Header-Bildes (im Abschnitt Header-Medien angegeben) im Thema Twenty Seventeen Theme?
Insbesondere möchte ich es auf der Homepage ändern, da es hier fast die gesamte Seite ausfüllt. Ich möchte, dass es viel kürzer ist. Die Art und Weise, wie es auf anderen Seiten wie der integrierten Info-Seite angezeigt wird, hat eine gute Höhe. Wenn ich das auf der Startseite nachahmen könnte, wäre ich zufrieden. Obwohl es großartig wäre, zu wissen, wie man präzise steuert.
theme-twenty-seventeen
Tag gibt, wenn es für die letzten Jahre entsprechende Tags zu geben scheint.Antworten:
Ich habe (einen Teil) des CSS-Codes gefunden, der die Höhe in steuert
wp-content/themes/twentyseventeen/style.css
.Es gibt Code, der angewendet wird, wenn die Admin-Leiste derzeit in Zeile 3629 nicht sichtbar ist (typischer anonymer Benutzer)
Und Code, der gilt , wenn die Admin - Bar ist sichtbar momentan in Zeile (zB Sie angemeldet sind) 3646
Und dann Code, der derzeit in Zeile 1638 für Mobiltelefone gilt:
Durch Kopieren dieser drei Abschnitte von CSS in die Datei style.css meines untergeordneten Themas und Ändern des
height
Attributs konnte ich die Höhe für das Header-Bild auf der Startseite anpassen . Ich habe die Höhe30vh
,calc(30vh - 32px)
und die30vh
jeweils in jedem Abschnitt. Ich habe den erstenheight: 1200px
alleine gelassen.Beachten Sie, dass das Höhenelement festgelegt ist, bei
100vh
dem die Höhe relativ zur Höhe des Ansichtsfensters angepasst wird. 100vh macht also 100% des Ansichtsfensters aus, während 50vh 50% des Ansichtsfensters ausmacht.Eine seltsame Sache ist, dass auf der Startseite der Zoom und die Position des Header-Bildes anders sind als auf anderen Seiten.
Ich bin mir nicht sicher, ob dies der beste Weg ist. Ich bin offen für bessere Optionen, aber bisher funktioniert es auf einer grundlegenden Ebene.
quelle
Bearbeiten Sie einfach das Thema über das Dashboard und fügen Sie die folgende CSS-Definition in den Themenbereich "Benutzerdefiniertes CSS" ein:
quelle
Aus einem Kommentar, den ich in der Antwort von @ User gemacht habe (das ist ein cooler Name);) Ich dachte, ich würde es versuchen.
Ich bearbeite die Themendatei direkt, weil ich in einem wegwerfbaren Docker-Container arbeite. Dies ist ein besserer Proof of Concept. Das Anpassen an ein untergeordnetes Thema erfordert einige Anpassungen.
In
content/themes/twentyseventeen/style.css
dem Bereich zwischen 3680 ~ 3670ish liegt das Header-Bild.Originalcode:
Das Ändern der Größe (und Reihenfolge) ist gut genug, um die abgemeldete Ansicht zu erreichen:
Ich habe das
vh
und das verlassen%
, um die Basen abzudecken, womax-height
es nicht erreicht ist, aber dann dasmax-height
auf das eingestellt , wonach Sie suchen.All dies hat eine Einschränkung:
Es ist der oberste Abschnitt der Pixel. Also, es sei denn, Sie haben einen schönen Teil des Bildes in diesem Bereich ... Es sieht beschissen aus (viele Köpfe abgeschnitten)
Weitere werden folgen (wenn ich es aussortiere)
quelle
Sie können es ändern, indem Sie das Bild zuschneiden. In WordPress gibt es eine Option als Customizer. Sie müssen die folgenden Schritte ausführen, um das Bild zuzuschneiden.
quelle
Sie können Firebug verwenden (oder den Quellcode der Seite anzeigen), um das CSS zu finden, mit dem das Header-Bild angezeigt wird. Fügen Sie dann das CSS hinzu, um die Änderung vorzunehmen. Das genaue CSS, das Sie verwenden, hängt vom Thema ab.
Mit Firebug können Sie das CSS vorübergehend ändern, um es nach Ihren Wünschen zu erhalten, und dann das neue CSS auf die CSS-Seite des Themas kopieren (sofern diese Option verfügbar ist).
Wenn Ihr Thema keine benutzerdefinierte CSS-Option enthält, erstellen Sie am besten ein untergeordnetes Thema (viele Tutorials dazu) und fügen Sie Ihr benutzerdefiniertes CSS zur Seite styles.css dieses untergeordneten Themas hinzu. (Ändern Sie niemals das übergeordnete Thema. Ihre Änderungen werden beim nächsten Thema-Update überschrieben.)
quelle
Ich näherte mich dem, indem ich zuerst ein untergeordnetes Thema einrichtete (empfohlener Schritt von WP). Dann habe ich in der Datei style.css des untergeordneten Themas das folgende CSS hinzugefügt. Der erste Abschnitt steuert die Höhe des Bildes auf der Startseite. Der zweite Abschnitt steuert die Höhe des Platzes für das Bild auf der Startseite. Beide müssen übereinstimmen, damit dies funktioniert. Ich habe einige Linien auskommentiert, die mein Bild mit fester Höhe beeinträchtigten. Jetzt ist mein Header auf der Homepage genau der gleiche wie auf allen anderen Seiten.
quelle