Das Header-Bild hat im Theme Twenty Seventeen nur illustrativen Charakter und ist vom Theme-Entwickler nicht so vorgesehen gewesen, dass es immer in voller Größe dargestellt wird. Das merken vor allem Benutzer/-innen, die den Titel ausblenden und statt dessen einen Schriftzug auf dem Bild platzieren, der dann sehr unschön abgeschnitten wird. Änderst du die Darstellung des Bildes mit der CSS-Regel
.has-header-image .custom-header-media img {
object-fit: contain;
}
, wird das Bild zwar hübsch in seiner vollständigen Größe dargestellt, erzeugt dann aber leere Bereiche, weil sich die Höhe des Header nicht entsprechend mit anpasst. Tatsächlich fällt die komplette Anpassung des Themes deshalb recht umfangreich aus. Probier mal, ob du mit der Lösung in dieser Antwort zurecht kommst:
https://wordpress.com/forums/topic/replace-header-w-mobile-specific-header/#post-3072982
Grundsätzlich bekommst du Themes im Theme-Verzeichnis kostenlos und so wie sie sind zur Verfügung gestellt. Du kannst sie dann zwar entsprechend deinen eigenen Wünschen anpassen, bekommst aber für die Anpassung keinen Anwender-Support. Wenn du selber nicht über die nötigen Kenntnisse verfügst, solltest du einen Dienstleister beauftragen.
Danke @pixolin für deine Antwort, die mir leider noch nicht weiterhilft.
Der kleine Code sowie der große Abschnitt aus der verlinkten Antwort ändern den Bildausschnitt auch auf Desktop-Browsern. Bzw hat die verlinkte Lösung zu Leerbereichen, einem völlig deplatzierten Logo und einer zu weit nach unten gerutschten Menü-Leiste geführt.
Mit dem Bildausschnitt bin ich am Desktop erst mal grundsätzlich so zufrieden, wie er ist. Auch mit allem außen herum, auch auf anderen Geräten.
Nur habe ich das Problem, dass das Headerbild bei Seitenaufruf über Desktop schön querkant und breit, also [ ], dargestellt wird, aber auf Handys und Tablets (außer im Panorama-Modus) in hochkant, also []. Automatisch wird dafür nur der Mittelteil des eigentlichen Bilds dargestellt, die Seiten fallen weg, was nicht schön aussieht.
Ich frage mich also, ob es die Möglichkeit gibt…
– das Headerbild mobil auch querkant darzustellen wie auf dem Desktop. Wenn dafür Menü und Co etwas weiter nach oben rutschen, wäre mir das egal
– den Bildausschnitt, der mobil gezeigt wird, zumindest selbst zu bestimmen, das wäre auch noch okay
– oder mobil ein anderes Bild darzustellen als auf dem Desktop?
Da das anscheinend etwas untergegangen ist, hier nochmal in Kurzform:
- Im Theme ist die Verwendung des Header-Bildes so nicht vorgesehen.
- Du kannst das Theme gerne nach deinen Wünschen anpassen.
- Dafür bieten wir hier allerdings keinen Support an.
Ok, danke.
Ich hatte nur gehofft, dass hier jemand Schlaues eine Idee hat oder sich auch schon damit beschäftigt hat.
Bego hatte dir doch bereits einen Link gesendet. Wenn du die dort genannten CSS-Regeln unter Design > Customizer > Zusätzliches CSS erfasst, dann hast du schon eine Lösung, die außerordentlich brauchbar ist. Das habe ich gerade mal auf einer Testinstanz getestet.
Hi, danke für die Erinnerung. Wie geschrieben hat die unter dem Link vorgestellte Lösung bei mir leider dazu geführt, dass zwischen Header-Bild und Menü-Leiste ein leerer Raum entsteht, die Menü-Leiste viel zu weit nach unten rutscht und mein Logo deplatziert im Raum hängt.
Für mich war es also leider keine praktikable Lösung, weswegen ich weiter auf der Suche bin.
Hallo,
die unter dem Link vorgestellte Lösung bei mir leider dazu geführt, dass zwischen Header-Bild und Menü-Leiste ein leerer Raum entsteht, die Menü-Leiste viel zu weit nach unten rutscht und mein Logo deplatziert im Raum hängt.
auch das kann man mittels CSS entsprechend anpassen, z. B. bekommst du eine Verringerung zwischen Foto und Content über die folgende CSS-Regel hin, die natürlich im Rahmen einer Media Query noch angepasst werden müsste:
div#content {
padding-top: 30px;
}
Aber das ist dann wohl jetzt schon eher off topic, weil wir ja hier Support bezogen auf Anwendungsprobleme bei WordPress-Seiten leisten.
Viele Grüße
Hans-Gerd
Soviel zu
… wird das Bild zwar hübsch in seiner vollständigen Größe dargestellt, erzeugt dann aber leere Bereiche, weil sich die Höhe des Header nicht entsprechend mit anpasst. Tatsächlich fällt die komplette Anpassung des Themes deshalb recht umfangreich aus.
Wir helfen WordPress-Anwender/-innen in unserer freien Zeit und ohne einen Cent dafür zu verlangen, aber das hat irgendwo Grenzen. Wenn sich jemand ein Theme aussucht, „genau das, aber ganz anders“ haben möchte und selber nicht mit der Programmierung zurecht kommt, können wir kaum den Job eines Dienstleisters übernehmen und auf Wunsch kostenlos so lange Lösungen präsentieren, bis es dem/der Anwender/-in gefällt. Wenn du „nur gehofft [hast], dass hier jemand Schlaues eine Idee hat oder sich auch schon damit beschäftigt hat“ (auch gerne als „Schwarmintelligenz“ bezeichnet), möchte ich nochmal freundlich daran erinnern, dass sich hier aktuell sieben Teilnehmende regelmäßig mit Antworten beteiligen. Ob ich schlau bin, dürfen andere beurteilen, aber … ja, klar, hab ich schon mal gemacht, als individuelle Dienstleistung im Kundenauftrag. Trotzdem sprengt es (zumindest für mich) den Rahmen, auf Zuruf fertige Lösungen zu präsentieren, die dann womöglich auch noch nicht zusagen (siehe oben).
Aber, hey, der Thread ist noch offen und vielleicht meldet sich noch jemand mit einer Komplett-Lösung?
Hallo @lucas11
trag das Folgende im Adminbereich unter Design -> Customizer -> Zusätzliches CSS ein (ganz ans Ende packen):
.has-header-image .custom-header-media img {
height: auto;
min-height: auto;
min-width: auto;
}
.custom-header-media:before {
background: transparent;
}
body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
max-height: 80px;
}
.site-header {
background-color: #fff;
}
@hage
Danke für die weiterführende Erklärung. Mir scheint, da muss ich mich noch mal genauer mit den Wegen und Möglichkeiten beschäftigen.
@pixolin
Auch hier noch mal danke für die Hinweise und Erklärungen. Kein Grund, gleich beleidigt zu reagieren. Ich hatte in diesem Forum bereits sehr viel zum Theme gefunden und mich daher extra für diese Frage angemeldet. Über die Zahl der Teilnehmer oder die Vergütung der Moderatoren zu diskutieren, habe ich nicht im Sinn. Ich habe auf den richtigen Tipp per Zufall gehofft. Schwarmintelligenz, das stimmt. Vielleicht gibt es ja auch schon eine Lösung für Laien wie mich und ich habe sie nur noch nicht finden können, dann reicht mir auch der Link. Wenn mir gesagt wird, meine Ideen sind so nicht machbar oder müssten aufwendig erstellt und bezahlt werden, dann ist das auch okay und ich überlege mir etwas Anderes. Wenn dieses Forum nicht dieserart funktioniert, dann bin ich offen für den entsprechenden Hinweis. Ich nötige niemanden zu Lösungen auf Zuruf oder seine/ihre Zeit über Gebühr dafür zu investieren, alles gut. Ich stelle nur eine Frage, denn ich kenne mich offensichtlich nicht aus. Wer in welchem Rahmen darauf antworten möchte, liegt nicht in meiner Hand.
Und was heißt genau das, aber ganz anders – das Theme hat oben genau diesen Platz für Medien (bei Videos hatte ich im Übrigen dasselbe Problem wie bei Bildern), das sehe ich zumindest auf der WordPress-Seite des Themes mit diesem Blumentopfbild, daneben steht es zusätzlich im Text beschrieben inklusive Hinweis auf die Kompatibilität zu allen Geräten und die Tags heißen sogar flexible, Barrierefreiheit, custom und so weiter. Auch alle anderen 2017-Seiten, die ich gesehen habe, haben oben ein Bild. Da bin ich entsprechend davon ausgegangen, dass es mobil so funktioniert wie beschrieben. Wenn das Theme das doch nur eingeschränkt kann, von professionellen Lösungen abgesehen, dann okay.
@la-geek
Herzlichen Dank, damit funktioniert es schon mal richtig gut! Das ist ganz nah an dem, was ich gesucht habe, ich freue mich. Es ist mobil nur noch eine recht große Lücke zwischen Bild und Logo+Menüleiste geblieben. Da suche ich mir noch eine Lösung, ob/wie ich die kleiner bekommen kann.
Hallo @lucas11
freut mich, war kein Hexenwerk. Den Abstand zwischen Bild und Logo-Menüleiste zu verringern, ist nicht mit 2 oder 3 Zeilen Code erreichbar, zumal dort auch noch ein JavaScript mitmischt.
Du müsstest den Browser verschmälern und bei jeder Unstimmigkeit per Media Query regulieren. Nicht einfach, da du für .has-header-image.twentyseventeen-front-page .custom-header mit der Höhe jonglieren musst und für .site-branding mit Padding-Bottom.
Da wirst du dir wohl professionelle Hilfe suchen müssen oder du versuchst selbst dein Glück.
Wenn das Problem damit gelöst ist, dann bitte
Da wirst du dir wohl professionelle Hilfe suchen müssen oder du versuchst selbst dein Glück.
Besser hätte ich es nicht formulieren können. 😉
@la-geek
Alles klar, mache ich, sonst bleibt es erstmal so.
Weiterhin alles Gute.
