it-swarm.com.de

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

Wie ändere ich die Höhe des Header-Bildes (angegeben im Abschnitt "Header-Medien") im Design "Twenty Seventeen"?

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 wird. Die Art und Weise, wie sie auf anderen Seiten wie der eingebauten About-Seite angezeigt wird, hat eine gute Höhe. Wenn ich das auf der Homepage nachahmen könnte, wäre ich zufrieden. Obwohl es großartig wäre, zu wissen, wie man eine präzise Steuerung durchführt.

9
User

Ich habe (einen Teil) des CSS-Codes gefunden, der die Höhe in wp-content/themes/twentyseventeen/style.css steuert.

Es gibt Code, der angewendet wird, wenn die Admin-Leiste nicht sichtbar ist (typischer anonymer Benutzer) und sich derzeit in Zeile 3629 befindet

.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 angewendet wird, wenn die Admin-Leistesichtbar ist (z. B. wenn Sie angemeldet sind) und sich derzeit in Zeile 3646 befindet

.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 aktuell für Mobiltelefone in Zeile 1638 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 style.css meines untergeordneten Themas und Ändern des Attributs height konnte ich die Höhe für das Header-Bild auf der Homepage optimieren. Ich stelle die Höhe in jedem Abschnitt auf 30vh, calc(30vh - 32px) und 30vh ein. Ich habe den ersten height: 1200px alleine gelassen.

Beachten Sie, dass das Element height auf 100vh festgelegt ist, wodurch die Höhe im Verhältnis zur Höhe des Ansichtsfensters angepasst wird. 100 vh sind also 100% des Ansichtsfensters, während 50 vh 50% des Ansichtsfensters sind.

Eine seltsame Sache ist, dass auf der Homepage Zoom und 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.

2
User

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;
}
2
Ralph

Aus einem Kommentar in @ Users Antwort (das ist ein cooler Name);) Ich dachte, ich würde es versuchen.

Ich bearbeite die Designdatei direkt, weil ich in einem Einweg-Docker-Container arbeite. Dies ist eher ein Proof-of-Concept. Die Anpassung an ein untergeordnetes Thema erfordert einige Anpassungen.

In content/themes/twentyseventeen/style.css im Bereich zwischen 3680 ~ 3670ish liegt das Header-Bild.

ursprünglicher Code:

.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 erhalten:

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

Ich habe die vh und den % belassen, um die Basen abzudecken, bei denen max-height nicht erreicht wird, aber dann setze den max-height auf das, wonach du suchst.

All dies hat eine Einschränkung:

Dies ist der oberste Pixelbereich. Es sei denn, Sie haben einen schönen Teil des Bildes in diesem Bereich ... Es sieht beschissen aus (viele Köpfe abgeschlagen)

weitere werden folgen (wenn ich es kläre)

1
Madivad

Sie können Firebug verwenden (oder sich den Quellcode der Seite ansehen), 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 so ändern, wie Sie es möchten, und dann das neue CSS in die CSS-Seite des Themas kopieren (sofern diese Option verfügbar ist).

Wenn in Ihrem Design keine benutzerdefinierte CSS-Option vorhanden ist, erstellen Sie am besten ein untergeordnetes Design (viele Tutorials dazu) und fügen Sie Ihr benutzerdefiniertes CSS zur Seite styles.css dieses untergeordneten Designs hinzu. (Ändern Sie niemals das übergeordnete Thema. Ihre Änderungen werden beim nächsten Thema-Update überschrieben.)

0
Rick Hellewell

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 zu beschneiden.

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