Support » Themes » Bild im Header

  • Gelöst girolfe

    (@girolfe)


    Hallo,

    weiß jemand zu sagen, wie ich auf meiner Website im Theme twenty-seventeen den blauen Bereich im Header ersetzen kann durch ein Bild?

    Wie ich ein Header-Bild einfüge, weiß ich.
    Was mir bislang nicht daran gefällt, ist, dass der User scrollen muss, um die Menüs zu sehen.

    Ich suche eine Lösung, wo das Bild quasi fest verankert und nur in dem Bereich liegt, wo jetzt das Blau zu sehen ist.

    Viele Grüße,
    Andreas

    • Dieses Thema wurde geändert vor 1 Monat von girolfe.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 23)
  • bscu

    (@bscu)

    Hilft dir Design/Customer/Website-Informationen/Logo weiter?

    Thread-Ersteller girolfe

    (@girolfe)

    Mmh, Danke für den Hinweis.
    Allerdings stelle ich mir es anders vor.

    In etwa, wie hier zu sehen:
    https://imgur.com/OPMycZ9

    Der obere Rand, dort, wo das Bild mit Vase und Blumen zu sehen ist, dorthin würde ich gerne ein eigenes Bild platzieren.
    Muss ich vielleicht dafür ein anderes Theme verwenden?

    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von girolfe.
    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von girolfe.
    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von girolfe.

    Das hier ist das Problem:

    .site-branding {
      background-color: #c8d4f7;
    }

    Nimm das mal raus, dann sieht man auch die Grafik

    Thread-Ersteller girolfe

    (@girolfe)

    Danke für die Info, bscu.

    Ähem, ich würde jetzt nur gerne wissen, *wo* ich das rauszunehmen habe.

    … Brauche was Nachsicht, mein Wissen ist noch kleiner, als ich mir manchmal wünschen würde…

    Andreas

    Ich vermute, das steht im Custom-CSS, da diese CSS-Regel inline steht und bei diesem Theme eigentlich nicht inline zu finden ist. Falls du es nicht finden solltest, versuche es mal im Custom-CSS mit

    .site-branding {
      background-color: transparent !important;
    }
    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von bscu.
    Thread-Ersteller girolfe

    (@girolfe)

    Danke, bscu.

    CSS ist für mich gegenwärtig ein paar Klassen zu hoch. Da hilft kein drum rum reden.
    Besser die Idee vom Bild im oberen Bereich erst einmal auf Eis legen.
    Macht keinen Sinn mehr, weiter nachzufragen und immer deutlicher zu erkennen, dass mein Wissen dafür gegenwärtig nicht ausreicht.

    Danke nochmal und jetzt was anderem zuwenden!
    Andreas

    Hallo,
    die Einstellungen für das Header-Bild findest du unter Design > Customizer > Header-Medien.

    CSS-Regeln können unter Design > Customizer > Zusätzliches CSS eingefügt werden.
    Dort solltest du die von @bscu genannte Regel ganz am Ende einfügen:

    .site-branding {
      background-color: transparent !important;
    }

    Am besten testest du das erst mal ohne !important.

    Zusätzlich könnte die folgende Regel hilfreich sein, damit die Höhe des Bildes verringert wird:

    @media screen and (min-width: 48em) {
       .twentyseventeen-front-page.has-header-image .custom-header-media{
        height: 50vh;
       }
    }

    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von Hans-Gerd Gerhards. Grund: Tippfehler

    Besser die Idee vom Bild im oberen Bereich erst einmal auf Eis legen.

    Aufgeben ist keine Option 😉

    Thread-Ersteller girolfe

    (@girolfe)

    Hallo bscu und Hans-Gerd,

    ich probiere es aus.
    Würde ja tatsächlich gerne mein Ziel erreichen und was dazulernen ist auch immer schön…!

    Thread-Ersteller girolfe

    (@girolfe)

    .site-branding {
    background-color: transparent;
    }

    -> das war schon sehr hilfreich, Danke!

    Ja, die Bildhöhe bzw. den Bereich, in dem das Bild angezeigt wird, in der Höhe verringern, das wäre noch prima.
    Wenn ich innerhalb von:

    @media screen and (min-width: 48em) {
       .twentyseventeen-front-page.has-header-image .custom-header-media{
        height: 50vh;
       }
    }

    mit dem Wert 50 bei „height“ experimentiere, ihn auf 40, 20 oder 10 setze, wird zwar im Customer das Bild entsprechend verkleinert dargestellt, aber nach „Veröffentlichung“ bleibt das Bild immer in derselben Größe.
    Ist es notwendig, dass das Bild selbst schon die gewünschten Maße hat?

    Andreas

    PS:
    Im Customer/ Header-Medien steht:
    „Dein Theme empfiehlt eine Größe von 2000 × 1200 Pixel.“
    Muss/ kann ich daran etwas ändern?

    PPS:
    Ist es wichtig zu erwähnen, dass ich das plugin „Options for Twenty Seventeen“ installiert habe?

    • Diese Antwort wurde geändert vor 3 Wochen von girolfe.
    • Diese Antwort wurde geändert vor 3 Wochen von girolfe.
    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    bei mir funktioniert das. Sonst teste das doch mal bitte ohne die Media Query:

    .twentyseventeen-front-page.has-header-image .custom-header-media{
        height: 50vh;
    }

    An dieser Stelle muss ich aber noch darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu, auch wenn wir je nach Zeit mal entsprechende Tipps geben.
    Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier.

    Viele Grüße
    Hans-Gerd

    Thread-Ersteller girolfe

    (@girolfe)

    Danke, Hans-Gerd,

    .twentyseventeen-front-page.has-header-image .custom-header-media{
    height: 50vh;
    }

    -> auch dadurch wird der dargestellte Bildbereich in der Höhe nicht verringert.

    Ja, dass hier CSS-Tipps nur am Rande gegeben werden, das wurde mir schon bei anderen Fragen gesagt.
    Wo ich nicht weiß, woher die Zeit nehmen für all‘ das, was ich gerne könnte bzw. wüsste, hatte ich – auch, um hier die Regeln nicht zu verletzen – ursprünglich geschrieben, dass ich die Angelegenheit erst mal auf Eis legen will.
    Ich weiß gegenwärtig nicht, woher die Kapazitäten herholen, um mich in CSS reinzuknieen.

    Gerne lese ich hier weitere Hinweise, die der entsprechende Autor bittebitte nur dann schreiben möge, wenn er es gerne tut – ansonsten würde das nach hinten losgehen und ich mich in Zukunft weniger trauen, etwas zu fragen.

    Andreas

    PS
    Würde mein Hinweis, dass ich das plugin „Options for Twenty Seventeen“ nutze, zu anderen Tipps geführt haben?`

    • Diese Antwort wurde geändert vor 3 Wochen von girolfe.
    Thread-Ersteller girolfe

    (@girolfe)

    Habe gerade festgestellt, dass
    .twentyseventeen-front-page.has-header-image .custom-header-media{
    height: 50vh;
    }
    doch zum gewünschten Ergebnis führt: Auf jeder Seite bis auf die erste, die Hauptseite.

    Kann ich da noch was dran ändern?

    Andreas

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,

    … ansonsten würde das nach hinten losgehen und ich mich in Zukunft weniger trauen, etwas zu fragen.

    hier Fragen zu stellen ist vollkommen in Ordnung. 😊
    Allerdings sind wir nur eine Handvoll Freiwillige, die hier helfen. Daher müssen wir uns auf das „Kerngeschäft“ (Anwendungsprobleme bei WordPress) konzentrieren.

    Würde mein Hinweis, dass ich das plugin „Options for Twenty Seventeen“ nutze, zu anderen Tipps geführt haben?

    das funktioniert bei dem Plugin nur in der kostenpflichtigen Premium-Version, die in dieser Hinsicht vom Ergebnis her auch nicht mehr macht als die genannte CSS-Regel.

    doch zum gewünschten Ergebnis führt: Auf jeder Seite bis auf die erste, die Hauptseite.

    Das ist das Standardverhalten bei dem Theme.

    Wenn ich die genannte CSS-Regel im Customizer verwende, dann ergibt sich das folgende Bild – hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
    CSS

    Teste das doch mal in einem privaten Fenster (Firefox) und/oder im Inkognitomodus (Chrome). Die Option findest du oben rechts bei den drei senkrechten Punkten in Chrome.
    Vielleicht ist das ein Problem mit dem Cache des Browsers. Ggfs. auch mal den Browsercache löschen.

    Viele Grüße
    Hans-Gerd

    Moderator Hans-Gerd Gerhards

    (@hage)

    Schau auch mal bitte, ob du nicht ein Cache-Plugin installiert hast. Das würde ich sonst erst mal deaktivieren.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.

    Nachtrag: Du hast wohl LiteSpeed Cache installiert und aktiviert. Bei der Entwicklung einer Website sollte auf keinen Fall ein Cache-Plugin aktiviert sein.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 23)