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 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
Schreibe einen Kommentar