1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Flexible Header-Grafik?

Dieses Thema im Forum "Design" wurde erstellt von philine, 24. August 2017.

  1. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Ich habe immer noch ein Problem mit meiner Header-Grafik und hoffe, dass mir auch diesmal hier geholfen werden kann :)
    Hab über den Customizer ein Bild eingebunden und hatte eigentlich erwartet, dass es sich der jeweiligen Bildschirmbreite anpasst.
    Leider wird es bei Monitoren mit anderen Maßen/Auflösung abgeschnitten oder es entstehen weiße Flächen links und rechts.
    Ich will aber, dass das Bild immer bildschirmfüllend angezeigt wird.
    Hab leider kaum Ahnung von php, dachte dass "flex-width' => true" die Lösung wäre, aber nein :(

    So sieht die header.php aus:

    function education_hub_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'education_hub_custom_header_args', array(
    'default-image' => 'http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/HP-Neuer-Header3d.jpg',
    'default-text-color' => '666666',
    'header-text' => false,
    'width' => 1420,
    'height' => 550,
    'flex-height' => true,
    'flex-width' => true,
    ) ) );

    Was mache ich falsch? :(

    Danke und LG
    philine

    PS: geht um neu.lessing-gymnasium.eu
     
    #1 philine, 24. August 2017
    Zuletzt bearbeitet: 24. August 2017
  2. maxe

    maxe Well-Known Member
    Ehrenmitglied

    Registriert seit:
    1. Mai 2008
    Beiträge:
    19.581
    Zustimmungen:
    277
    wie sieht denn der img Tag im Header aus?
     
  3. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Ääähm..was genau meinst du? :oops:
    In der custom-header.php gibt es nur 'default-image', siehe oben.
    Dann gibt es eine header.php, da ist aber kein img Tag drin.
    In der style.css gibt es zwei img Tags :?:,
    einmal unter #elements:
    img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    }
    und dann unter
    .wp-caption img[class*="wp-image-"] {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    }
    Meinst du irgendwas davon? :confused:
     
  4. Azrael_0815

    Azrael_0815 Well-Known Member

    Registriert seit:
    7. Juli 2015
    Beiträge:
    591
    Zustimmungen:
    35
    Dein Theme setzt das Image als Background-image.

    url("http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/HP-Neuer-Header3d.jpg");

    Also probiere mal:

    #masthead {

    }

    zu ändern, indem du

    background-size: 100% auto

    einfügst.
     
  5. Wenn Dein Banner für alle (oder zumindest die meisten) Bildschirmgrößen monitordeckend sein soll, würde ich die Bannerbreite auf 1920 px vergrößern. Ich habe jetzt keine Farbanpassung für den Hintergrund gemacht. Ich würde auch die Höhe etwas verringern und insgesamt internetmäßig komprimieren. Deine Headergrafik hat 633 KB, meine etwas über 60 KB.

    LessingGym.jpg
     
    #5 Gast 100035, 25. August 2017
    Zuletzt von einem Moderator bearbeitet: 25. August 2017
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Versuche es doch mal mit...

    #masterhead {
    ...
    ...
    background-size: cover;
    }
     
  7. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Danke für die Tipps, aber leider klappt es nicht :(
    Habe die Bannerbreite auf 1920px vergrößert, dann wird bei mir das Bild links und rechts abgeschnitten.
    Hab sowohl "
    background-size: cover" als auch "background-size: 100% auto" ausprobiert, aber es tut sich nichts.
    Hat noch irgendwer eine schlaue Idee? :???::???:

     
  8. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Sorry, aber dann ist irgendetwas anders bei dir nicht richtig!
    Mit 'background-size: cover;' sieht das bei mir so aus:
    lessing-gym.jpg

    Oder wie soll es aussehen?

    PS: das ist die Ansicht mit FireFox Webentwickler Tool 'Inspektor'. Im unteren Bereich links (blau hinterlegt) das gewählte Element - im unteren Bereich rechts das dazugehörige CSS.
    Kann man da auch direkt zum testen ändern und schauen, wie es sich auswirkt.
     
    #8 Sailor56, 26. August 2017
    Zuletzt bearbeitet: 26. August 2017
  9. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Ja, genau so soll es aussehen..
    Aber bei mir und an einem anderen Monitor mit kleinerer Bildschirmbreite als 1920 sieht es so aus: Screemshot_LG.jpg
    (hab 'background-size: cover;' eingefügt)

    Irgendwo versteckt sich wohl ein Fehler, aber ich finde ihn einfach nicht :cry:
     
  10. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ahhhh.... jetzt kommen wir der Sache näher. Ich sehe, was das Problem ist.
    Das Bild hat vorgegebene Proportionen in Höhe und Breite - ebenso hat dein Header Proportionen, die allerdings variabel sind. Zumindest die Breite richtet sich immer nach der Bildschirmauflösung.
    Solange die Proportionen von Bild und Bildschirm passen, sieht es gut aus, aber in dem Moment, wo (wie in deinem Fall) der Platz in der Breite nicht ausreicht, fängt die Webseite/ der Browser an es zu korrigieren... na ja, er versucht sein Bestes.
    Folgende Idee: Mit dem jetzigen Layout als Hintergrundbild im Header werden wir das Problem so leicht nicht lösen können - aber, wäre es möglich das Bild als <img..> in den Header einzufügen.
    Dem Bild kann man einen 'width: 100%;' geben und dem Header müsste man alles Größenangaben (auch 'padding') wegnehmen. Seine Größe richtet sich dann nach dem Inhalt (dem Bild).
    Hätte den Nachteil, dass die Höhe deines Headers dann nicht mehr fixed ist - aber das Bild sollte immer vollständig zu sehen sein.
     
  11. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ich habe das jetzt mal getestet (mit FireFox 'Inspektor')!
    Was habe ich gemacht?
    1. IMG Tag in
    <header id="masterhead" class="site-header"...>
    <img src="http://neu.lessing-gymnasium.eu/wp-content/uploads/2017/08/cropped-HP-Neuer-Header3d_1920.jpg" style="width: 100%; margin-bottom: -5px;">
    ...
    </header>

    2. Custom CSS für class="site-header" padding auf 0px gesetzt:
    .site-header {
    padding: 0px !important;
    }

    und so sieht es dann bei mir mit dem FireFox aus:
    280 Pixel breit (Handy)
    lessing-gym_280.jpg

    680 Pixel breit (noch Handy - fast Tablet)
    lessing-gym_680.jpg

    1024 Pixel breit (Standard VGA)
    lessing-gym_1024.jpg

    1600 Pixel breit (Desktop / Laptop) sieht genau so gut aus - kann aber hier leider nur jeweils 3 Bilder hochladen.
     
  12. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Juhuu, das sieht schonmal super gut aus, Danke! Mir ist nur noch nicht ganz klar, wo ich den img Tag einfügen muss? In der style.css oder der custom-header.php (oder ganz woanders?)
     
  13. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    header.php ist der richtige Ort... und zwar direkt hinter dem '<header id="masterhead"....> Tag.
    Dann müsstest du noch deine Formatierung mit der Einfügung der Hintergrundgrafik (siehe dein erster Post) entfernen... am besten auskommentieren.
    im php durch:
    /* .. auskommentierter Inhalt.. */
    im html durch
    <!-- .. auskommentierter Inhalt.. -->
    löschen würde ich es nicht, denn das ist eine Rückfallposition, die man vielleicht irgendwann mal wieder braucht.
    Die Formatanweisung mit dem
    .site-header {
    padding: 0px !important;
    }
    gehört dann natürlich in das Custom CSS.

    Du solltest, falls du es nicht noch nicht gemacht hast, dir ein 'Child-Theme' anlegen und die Änderungen dort durchführen, denn sonst kann es dir passieren, dass mit dem nächsten Update deines Themes alles wieder auf Anfang gesetzt wird... das Child-Theme würde aber erhalten bleiben.
     
  14. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Also irgendwie bin ich zu blöd die richtige Stelle zu finden. In meiner header.php gibt es keinen '<header id="masterhead"....> Tag. Auch nicht in der custom-header.php.
    :confused:

    Die einzigen Stellen wo ich überhaupt die id #masthead finde ist in der functions.php:

    if ( has_header_image() ) {
    $custom_css = '#masthead{ background-image: url("' . esc_url( get_header_image() ) . '"); background-repeat: no-repeat; background-position: center center; }';
    wp_add_inline_style( 'education-hub-style', $custom_css );
    }

    Jetzt bin ich ehrlich gesagt wieder komplett verwirrt :confused:
     
  15. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Leider kenne ich dein Theme überhaupt nicht, da ich mit WP nur lokal und mit den Standardthemes 'rumspiele'! Aber da sieht das so aus... (z.B. header.php für twentyseventeen)
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    In deinem Theme muss es auch sowas geben - da wo die <!DOCTPE HTML> Angabe steht, der <head>.. </head> Bereich eingefügt wird - und dann, der interessante Teil, der <body> Tag steht... dahinter muss dann der <header> zu finden sein.

    Aber vielleicht gibt es hier ja auch jemanden, der dein spezielles Theme kennt.
     
  16. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Ich habe mal den Herrn 'Google' gefragt und glaube, ich habe die Stelle zum Einfügen des Bildes in den Header gefunden.
    In deinem Themen Ordner gibt es einen Unterordner 'inc' und darin einen Ordner 'hook' und in diesem Ordner eine Datei 'structure.php'!
    Wenn du da so etwa 100 Zeilen runter scrollst, dann findest du folgenden Eintrag:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn du diese Passage wie folgt ergänzt, dann sollte es klappen:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Viel Erfolg... wie gesagt, ich kann es selber nicht testen - aber ich bin zuversichtlich :)!
     
  17. philine

    philine Member

    Registriert seit:
    1. April 2017
    Beiträge:
    17
    Zustimmungen:
    0
    Yeeeeaaaaaah! Es hat geklappt! Du bist super, tausend Dank :D
     
  18. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Uhhh... da bin ich aber froh! So im Dunkeln herumtappen und es selber nicht testen zu können, ist normalerweise nicht so mein Ding! Aber wenn es jetzt klappt, dann bin ich gerne mal meinen sonstigen 'Gewohnheiten' untreu geworden.
     
  19. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Du solltest das unbedingt in einem Child-Theme ändern, sonst sind bei einem Theme-Update diese Änderungen wieder weg.
     
  20. rafael_

    rafael_ Well-Known Member

    Registriert seit:
    26. Juli 2017
    Beiträge:
    68
    Zustimmungen:
    0
    Hallo :)

    Ich stehe vor dem gleichen Problem wie @philine.
    Ich habe das Theme Chosen und die Wordpress Version 4.8.1 installiert. Jetzt wollte ich den
    Header anpassen, so dass das Hintergrundbild bis zum Seitenrand geht. Leider ohne Erfolg, so
    wie im Screenshot zu sehen ist. HeaderSeiten.jpg

    So sieht die Header.php vom Theme Chosen aus:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wenn ich dort den Code
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    im <header> </header> Bereich einfüge, wird das Bild oberhalb des Headers eingefügt und danach kommt erst der eigentliche Header.
    Einmal als Screenshot dazu: header1.jpg

    Füge ich das Bild im <head> </head> Bereich ein:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ist das Bild bis zum Seitenrand, aber der Header befindet sich unterhalb des Bildes. header2.jpg

    Ich habe irgendwie einen Denkfehler. Vielleicht hat jemand einen Tipp für mich ;)

    Gruß Rafael
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden