Wie ändere ich die Höhe des Header-Bildes in Twenty Seventeen?

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.

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)

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Und Code, der gilt , wenn die Admin - Bar ist sichtbar momentan in Zeile (zB Sie angemeldet sind) 3646

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

Und dann Code, der derzeit in Zeile 1638 für Mobiltelefone gilt:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

Durch Kopieren dieser drei Abschnitte von CSS in die Datei style.css meines untergeordneten Themas und Ändern des heightAttributs konnte ich die Höhe für das Header-Bild auf der Startseite anpassen . Ich habe die Höhe 30vh, calc(30vh - 32px)und die 30vhjeweils in jedem Abschnitt. Ich habe den ersten height: 1200pxalleine gelassen.

Beachten Sie, dass das Höhenelement festgelegt ist, bei 100vhdem 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.

Bearbeiten Sie einfach das Thema über das Dashboard und fügen Sie die folgende CSS-Definition in den Themenbereich "Benutzerdefiniertes CSS" ein:

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

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.cssdem Bereich zwischen 3680 ~ 3670ish liegt das Header-Bild.

Originalcode:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Das Ändern der Größe (und Reihenfolge) ist gut genug, um die abgemeldete Ansicht zu erreichen:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

Ich habe das vhund das verlassen %, um die Basen abzudecken, wo max-heightes nicht erreicht ist, aber dann das max-heightauf 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)

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.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

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.)

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.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    height: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}