Twenty Seventeen Header auf Seiten und Beiträgen

Seit WordPress Version 4.7 gibt es nun auch das neue Standardtheme Twenty Seventeen, und das kann sich durchaus sehen lassen. Das WordPress Team betont, dass sich Twenty Seventeen vor allem für Unternehmenswebsites eigne. Denn das Theme bietet zum Beispiel eine Startseite, die bis zu vier einzelne Seiten in den Fokus rückt. Deren Beitragsbilder stellt die Startseite dabei genauso wie das Headerbild (oder Headervideo) in voller Fenstergröße dar. Das wirkt sehr repräsentativ, erfordert aber natürlich auch Bilder von entsprechender Qualität. Auf allen weiteren Seiten hingegen bleibt von dem Headerbild nur noch ein sehr schmaler Ausschnitt übrig. Tatsächlich zeigt der dann kaum noch etwas von dem Bildinhalt. Ganz übel wird es, sofern es einer wagt, mit dem Internet Explorer darauf zu schauen. Der zeigt dann nur den untersten Bildausschnitt. Statt Blumentopf gibt es nur Tisch zu sehen. Wie also lässt sich der Twenty Seventeen Header auf Seiten und Beiträgen ausblenden oder anpassen?

Twenty Seventeen Header auf Seiten und Beiträgen ausblenden

Wenn wir den Header auf Seiten und Beiträgen ausblenden, soll die Startseite davon natürlich unberührt bleiben. Twenty Seventeen unterscheidet in der Tat bereits aus sich selbst heraus unterschiedliche Darstellungsweisen. So hat es zum Beispiel Definitionen, die sich auf den Fall beziehen, dass Sie ganz auf ein Headerbild verzichten, dieses also gar nicht im Rahmen des Customizers hinterlegen. Dann zeigt das Theme nur den Seitentitel und die Seitenbeschreibung in einem entsprechend schmalen Bereich auf weißem Grund an. Für den Unterschied zwischen den Zuständen hat einen Header und hat keinen Header gibt es also schon eine passende Klasse: .has-header-image . Da der Header statt eines Bildes auch ein Video zeigen kann, existiert auch die Klasse .has-header-video . Geht es um das große Kopfzeilenbild auf der Startseite, dann heißt es .twentyseventeen-front-page.has-header-image . Im Gegensatz dazu spricht die Definition .has-header-image:not(.twentyseventeen-front-page):not(.home)  alle weiteren Seiten an.

CSS-Angaben

Wollen Sie nun also den Twenty Seventeen Header auf Seiten und Beiträgen ausblenden, braucht es nur eine Definition, die Sie im Rahmen des benutzerdefinierten CSS des Themes eingeben:

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
display: none;
}

Zudem brauchen Sie nun noch eine Definition für die Schriftfarbe des Seitentitels und der Seitenbeschreibung. Bisher waren Titel und Beschreibung weiß. Auf weißem Grund jedoch braucht es nun eine andere Farbe. Ich schlage ich einen Grauton vor, aber es wäre natürlich auch jede Farbe des Regenbogens möglich.

body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-title, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-title, body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-title a, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-title a, body.has-header-image:not(.twentyseventeen-front-page):not(.home) .site-description, body.has-header-video:not(.twentyseventeen-front-page):not(.home) .site-description  {
color: #a2a2a2;
}

 

Das Ergebnis ist dann eine sehr schlichte Seite:

Twenty Seventeen ohne Header auf Seiten und Beiträgen
Twenty Seventeen ohne Header

 

Twenty Seventeen Header auf Seiten und Beiträgen mit 50 Prozent Fensterhöhe

Überdies besteht natürlich auch die Möglichkeit, den Twenty Seventeen Header auf Seiten und Beiträgen anzupassen. Sagen wir also, das Bild soll 50 Prozent der Fensterhöhe ausmachen. Dann bleibt immer noch genug Bildinformation übrig. Andererseits müssen Besucher der Website nicht auf jeder Seite so weit nach unten scrollen, um überhaupt einen Eindruck vom Content zu erhalten.

Der übliche Verdächtige: Internet Explorer

Dieser Eingriff ist allerdings um einiges umfangreicher. Vor allem, wenn man möchte, dass das Ganze auch noch einigermaßen gut mit dem aktuellen Internet Explorer aussieht. Weil der (mal wieder) eine sehr wesentliche Eigenschaft nicht versteht, die bei anderen Browsern für die Größenanpassung des tatsächlichen Bildes sorgt, braucht er eine Extrawurst. Statt object-fit  lautet das Vorgehen nun transform: translate . Wegen der Änderungen in Hinblick auf den neuen 50 Prozent Header sind auch ein paar Anpassungen in Sachen Startseite nötig. Somit ist das schon ein relativ weitgehender Eingriff, den man sich nicht mal eben so erschließt. Letztlich gestaltet sich das Ganze derart komplex, sodass man meines Erachtens nicht mehr von einem Theme für Einsteiger sprechen kann.

CSS-Angaben

/* Setzt den Header für Archive, Beiträge und Seiten, die nicht Startseite sind, auf 50 Prozent Fensterhöhe (Desktop) */
@media screen and (min-width: 48em) {
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
height: 1200px;
height: 50vh;
max-height: 50%;
overflow: hidden;
}
} 

/* Sorgt dafür, dass der IE auf Seiten und Beiträgen den passenden Bildausschnitt zeigt*/
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
max-width: 100%;
top: 0;
left: 0;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

/* Lösung für Browser, zum Beispiel den Internet Explorer, die kein object-fit verstehen */
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
bottom: auto;
position: absolute;
top: 40%;
left:0;
-moz-transform: translate(0, -40%);
-webkit-transform: translate(0, -40%);
transform: translate(0, -40%);
}

/* Sorgt dafür, dass der IE das Startseiten-Headerbild nicht verzerrt */
.twentyseventeen-front-page.has-header-image .custom-header-media img,
.twentyseventeen-front-page.has-header-video .custom-header-media video,
.twentyseventeen-front-page.has-header-video .custom-header-media iframe {
position: fixed;
left: 50%;
max-width: 250%;
min-height: 100%;
min-width: 100%;
min-width: 100vw; 
width: auto;
top: 50%;
padding-bottom: 1px; 
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

 

Wenn Google Chrome oder Internet Explorer 11 darauf schauen, sieht das Ganze dann so aus:

Twenty Seventeen Header Video

Wenn Sie als Header ein mp4-Video hochladen oder ein Youtube-Video einbinden, zeigt Twenty Seventeen diese sowieso nur auf der Startseite. Auf allen allen Seiten nutzt das Theme entweder das gewählte Bild oder – sofern Sie keins hinterlegt haben – die Variante ohne Bild, sprich: nur Seitentitel und Seitenbeschreibung. Ähnliches gilt für die Mobilansicht: Sofern Sie ein Video als Header nutzen und ein Bild hinterlegt haben, zeigt das Smartphone auf der Startseite das Bild. Ohne hinterlegtes Bild bleibt die mobile Ansicht schlicht.

 


Beitragbilder: Britta Kretschmer

Schlagwörter: , , , , , ,

Teilen Sie diesen Artikel mit anderen:

8 Anmerkungen zu “Twenty Seventeen Header auf Seiten und Beiträgen

  • 19. Januar 2017 um 6:56
    Permalink

    Hallo Britta,
    ein sehr interessanter Artikel. Besten Dank !

    Ich würde gerne die Eigenschaften der Startseite (FullScreen oder Video und 4 einzelne Seiten anhängen) auch auf weitere Seiten des Internetauftritts ausweiten.

    Hälst Du das für realisierbar ?
    Über eine Rückinfo würde ich mich freuen

  • 19. Januar 2017 um 10:11
    Permalink

    Hallo Andreas,

    spontan halte ich es durchaus für machbar, andere Seiten wie die Startseite aussehen zu lassen. Das bräuchte zuerst einmal ein eigenes Template, das sich an dem orientiert, das für die Startseite zuständig ist. Und das findest du im Unterordner /pages. Im Detail sind da aber sicher einige Anpassungen nötig, damit das Ganze in deinem Sinne funktioniert.

    LG, bk

  • 21. Januar 2017 um 10:21
    Permalink

    Hallo Britta,

    ein sehr guter Artikel. Vielen Dank für die vielen Tipps.
    Eine Frage hätte ich noch. Ich möchte beim Twenty Seventeen die Breite der Texte vergrößern (also breiter machen) und die Breite der Überschrift deutlich reduzieren.

    Mir geht es darum, dass der Platz der Überschrift (links) viel zu groß ist und der ganze Text rechts daneben sehr gequestscht wird.

    Haben Sie hier einen Tipp, wie ich das am besten bearbeiten kann?

    Vielen Dank und beste Grüße
    Peter S.

  • 1. März 2017 um 20:37
    Permalink

    Hallo,
    sehr schöner und hilfreicher Beitrag. Ist es auch möglich, auf allen “Nicht-Startseiten” die oberen 50% des headers anzuzeigen? (möglichst bei allen Browsern)

    (habe gar keine Erfahrung mit CSS …)

    Vielen Dank und beste Grüße
    Tim

  • 2. März 2017 um 18:21
    Permalink

    Hallo Britta,

    sehr gut und verständlich geschrieben. Hat mir sehr geholfen! Ich wollte, bis auf der statischen Startseite nämlich komplett auf das Headerbild verzichten. Hat gut geklappt.

    Nur habe ich nun, nachdem ich den Code entsprechend geändert habe, wohl das Problem, dass das benutzerdefinierte Logo auf der Startseite beim scrollen innerhalb des Headerbildes nicht mehr “mitläuft”, sondern fixiert ist. Wie kann ich das denn wieder entsprechend der ursprünglichen Logo-Positionierung der Startseite anpassen?

    Herzlichen Dank für die Hilfe!
    Kristin

  • 5. März 2017 um 15:28
    Permalink

    Hallo Tim,

    selbst mit ein bisschen CSS-Erfahrung ist dieser Twenty Seventeen Header echt mal eine Herausforderung… Bitte nicht fragen, warum – aber mit folgender Angabe zusätzlich zu den im Beitrag genannten CSS-Definitionen sollte es funktionieren (getestet mit Chrome und IE 11):

    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media, .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media
    {
    max-width: 100%;
    left: 0;
    top:-100%;
    -ms-transform: translate(0, 50%);
    -moz-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    }

    LG, bk

  • 5. März 2017 um 15:39
    Permalink

    Hallo Kristin,

    hm, das Problem bekomme ich gar nicht dargestellt. An sich sollte alles gut sein mit dem Logo.

    LG, bk

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.