Header-Bild in der Höhe ändern

Eine neue Frage ist eingetrudelt:

Wie kann ich im Twenty Thirteen Theme die Höhe des Kopfbildes ändern?

Im WordPress-Theme Twenty Thirteen kann man über das Backend ein Header- bzw. Kopfbild hochladen. Dieses soll in der Höhe 220 Pixel hoch sein. Möchte man ein Bild mit anderen Abmessungen, dann kann man dieses zwar hochladen, doch der Rest der Seite passt sich dem Bild nicht an. Man muss dafür also die Höhe im CSS bzw. in der style.css-Datei ändern. In Zeile 1489 findet man den dazugehörigen Eintrag unter min-height:220px. Diesen Wert muss man dann in die Höhe des Bildes ändern, welche man beabsichtigt einzusetzen.

.site-header .home-link {
    color: #141412;  
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 220px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
}

 

Vielen Dank an WalterD für die Frage!

Sie haben auch ein Problem? Nur zu – ich werde versuchen eine Antwort zu finden und hier zu veröffentlichen..

 

10 Gedanken zu „Header-Bild in der Höhe ändern“

    • Hallo Mohamed,
      leider ist das nicht ganz so einfach.
      Ich versuche es mal grob zu erklären:
      1. Lade das kleine Bild über den Medienmanager hoch und merke Dir die URL dazu.
      2. Suche Dir die Datei header.php (über Design – Editor und dann rechts in der Liste)
      3. In dieser Datei suchst Du nach dem header
      4. Dort kommt dein Bild rein.
      5. Benutze dafür den img-Befehl und verweise auf die URL von 1.
      6. Nun musst du das Bild noch über CSS an die richte Stelle bringen.

      Das ist sich nicht einfach..
      Am besten hat es bei mir innerhalb a und h1 h2 des Banners geklappt.
      Leider kann ich im Kommentarbereich keinen Code posten – er wird immer gleich interpretiert 🙁

      Normalerweise würde ich dir noch zu einem childtheme raten, damit deine Änderungen bei einem Update nicht verloren gehen..

      Viel Erfolg!

      Antworten
  1. Hallo! Im Twenty Thirteen Header wird das Kopfbild auf breiten Bildschirmen gut angezeigt. Auf kleineren Displays, z. B. mobilen Geräten, fällt das Kopfbild aber plötzlich raus. Wie kann ich das denn ändern?

    Danke!

    Mathias

    Antworten
  2. hallo phillip,
    ich habe auch eine frage zur header-höhe, vielleicht hast du ja die zeit, dir das anzusehen und hast eine antwort und kannst mir helfen:

    1. theme: Twenty Thirteen
    — wenn ich das theme „Eins“,childtheme Twenty Thirteen benutze ,habe ich die gleichen probleme
    – aktuell bin ich wieder im Twenty Thirteen

    2. themevorgabe beim header unter design/headerbild:
    …Dein Theme empfiehlt jedoch eine Größe von 1600 × 230 Pixel für den Header.
    3.
    meine header grafik umgebaut auf diese groesse (1600 × 230 px) : der header zoomt sich total hoch und wird verzerrt dargestellt
    4.
    okay, neuer versuch, wie du das vorgeschlagen hattest:
    von meiner ursprünglichen headergrafik ausgegangen, 1262 × 230 Pixel Groesse, die einstellungen im style.css geändert auf aktuell:

    .site-header .home-link {
    color: #555555;
    display: block;
    margin: 0 auto;
    max-width: 1262px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }

    bild hochgeladen – wieder die gleiche kiste – alles verzerrt/gezoomt dargestellt

    5.
    nach lösungen gesucht, das hier gefunden:
    https://en.forums.wordpress.com/topic/twenty-thirteen-custom-header-is-too-wide

    —The header in Twenty Thirteen is actually a background image. So if you want all the text and images of your header to appear over the content on a computer screen, then you must use an image editing program to make it 1040 px by 230px centered on a plain background (for example: #FFBF49; which is the color of the background of your image).

    –It would be like this:
    (230px for the height)
    280px by 230px, 1040px by 230px, 280px by 230px
    equals a total width of 1600px

    — hab das genauso gemacht, eine grafik in dieser groesse erstellt ,
    1040 px by 230px )wird immer noch verzerrt im twenty thirteen

    grundsätzlich:
    das kann doch nicht sein, dass twenty thirteen mir vorschlägt, ein headerbild mit den massen von 1600×230 px hochzuladen und das dann so dargestellt wird

    vielleicht kannst du mir da helfen,
    gruss karsten

    Antworten
  3. Hallo Kartsten,
    vielleicht kannst Du mir helfen.
    Theme: Baskerville 2. Das scheinst Du auch zu nutzen. Die Seite ist noch nicht live. Ich würde gerne den Header ohne Bild nutzen. Plain schwarz.
    Wie kann ich Ihn kleiner machen? Habe Premium Accout mit CSS Editor.
    Hast Du eine Idee?
    Beste Grüße
    Eric

    Antworten
    • Hallo Eric, sorry für die späte Rückmeldung! Irgendwie bin ich ganz drüber weg gekommen.. Rufe den Customizer vom Theme auf und trage unter zusätzlichem CSS das ein:
      .bg-image {
      background-size: 1px;}
      Das ist zwar eher eine „Krücke“ als gut programmiert, aber so geht es am schnellsten..
      Grüße
      Philipp

      Antworten
    • Hallo Beat,

      das Theme hat bestimmt auch einen Customizer, oder? Rufe den auf und trag unter zusätzlichem CSS das ein:
      .header-container {
      height: 300px;
      }

      Die 300px sind dann die neue Höhe – falls es nicht klappt hänge noch ein !important dran (300px !important;)
      Viel Erfolg
      Philipp

      Antworten

Schreibe einen Kommentar