Headerhintergrund und Schriftfarbe nur auf Startseite anders?

Thema wurde von david_malecki, 20. Januar 2022 erstellt.

  1. david_malecki

    david_malecki Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2017
    Beiträge:
    46
    Danke erhalten:
    0
    Danke vergeben:
    16
    Nabend zusammen,
    ich habe eben schon mal danach gesucht, aber leider nichts gefunden.

    Hat irgendjemand es schon versucht oder den Bedarf gesehen den Hintergrund des Headers/Kategoriemenüs nur auf der Startseite andersfarbig zu gestalten, als auf allen anderen Seiten?
    Gerade, wenn ein Fullscreen Teaser Slider genutzt wird, finde ich es sehr angenehm, wenn beispielsweise der Header transparent ist, bei weißer Schrift für die Kategorien und dann auf den restlichen Seiten ein weißer Header (oder transparent bei exakt eingestellter Größe und weißem Shophintergrund) und dann schwarze Schrift für die Kategorien.

    Man kennt es ja von WP, Shopify und Co. Ich wundere mich, dass dies nicht vielleicht auf der Agenda steht. Ebenso zwei Logovarianten für hellen und dunklen Hintergrund.

    Hat dies jemand schon auf "leichtem" Wege gelöst?

    Ich würde mich sehr freuen, wenn jemand helfen könnte.
    Liebe Grüße
    David
     
  2. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.656
    Danke erhalten:
    1.261
    Danke vergeben:
    300
    @david_malecki Dafür gibt es im Malibu Theme die Layout Variante "Hero". Wenn du diese aktivierst, ist der Teaser hinter dem Header. Wenn du dann im Header die HIntergrundfarbe auf "transparent" und die Kategorieleiste Hintergrundfarbe ebenfalls auf "transparent" umgestellts, dann sollte das schon so einigermaßen funktionieren.
     

    Anhänge:

  3. david_malecki

    david_malecki Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2017
    Beiträge:
    46
    Danke erhalten:
    0
    Danke vergeben:
    16
    Hallo Till,
    vielen Dank.
    Das weiß ich jedoch schon alles. Das Problem liegt doch vielmehr darin, dass die Schriftfarbe dann sowohl auf der Startseite, als auch auf allen anderen Seiten gleich ist.
    Hat mal also Shop/Produktbedingt dunkle Teaser Slide und wählt eine weiße Schriftfarbe, sieht man auf den Folgeseite gar nichts mehr, weil der Header transparent und die Shophintergrundfarbe ebenfalls weiß ist. Man wäre dann quasi dazu gezwungen den Shophintergrund Dunkel zu halten oder helle Teaser-Slider Bilder zu nutzen.

    Gibt es hier einen Workaround, um die Schrift des Headers nur auf der Startseite z.B. Weiß zu halten und auf den restlichen Seiten z.B. Schwarz?

    Gruß,
    David
     
  4. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.009
    Danke erhalten:
    319
    Danke vergeben:
    185
    Jede (oder fast jede) Seite hat ihre eigene Klasse und somit kannst du die Startseite mit page-index ansprechen...
    So der Einstieg in deine Lösung... Mit etwas CSS ist das kein Problem.
     
  5. david_malecki

    david_malecki Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2017
    Beiträge:
    46
    Danke erhalten:
    0
    Danke vergeben:
    16
    #5 david_malecki, 21. Januar 2022
    Zuletzt bearbeitet: 21. Januar 2022
    Vielen Dank. Frago. Habe es zumindest für die Kategorieschriftart hinbekommen.
    Hast du einen Tipp für mich, wie ich an die Klassen für die kleinen Icons oben rechts (Lupe, Weltkugel, Männchen, Herz und Warenkorb) komme? Mit Element untersuchen, bekomme ich es nicht hin. Den muss ich dann aber auch auch, nur auf der Startseite, eine andere Farbe geben.
    Besten Dank!
    Gruß,
    David
     
  6. david_malecki

    david_malecki Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2017
    Beiträge:
    46
    Danke erhalten:
    0
    Danke vergeben:
    16
    PS:
    Damit funktioniert es leider nicht. Im Element Untersuchen Feld jedoch schon:
    .navbar-secondary .navbar-nav > li > a svg path
    {
    fill: #333333;
    }
    .navbar-secondary .navbar-nav > li > a svg polygon
    {
    fill: #333333;
    }