Hintergrund Bild sichtbar machen im Headerbereich

Thema wurde von semmelweis, 21. Juni 2022 erstellt.

  1. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Hallo,

    mir will es beim Malibu Theme nicht gelingen den Headerbereich durchsichtig zu bekommen so das man das Hintergrund Bild sehen kann.

    Jemand ein paar CSS Befehle für mich parat? :)
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Hast du für den Head-Bereich eins Bild hinterlegt, oder soll das vom Shop zu sehen sein?
    Welche Header-Variante nutzt Du?
     
  3. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Wir haben im Styleedit eines für die komplette Webseite hinterlegt und auf eingerahmter Shop gestellt. Als Header nutzen wir Header1.

    Wir möchten vom Header die Transparenz ändern so das das Hintergrundbild leicht zu sehen ist.
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Im Hintergrund oder im Container (also dem eingerahmten Bereich)?
     
  5. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Ich habe es im Hintergrund. Das Problem ist auch das der Header noch komplett über die ganze Seite geht (siehe Kreuz).
    Den kompletten anderen bereich konnte ich mit

    body #outer-wrapper {
    margin-left: 100px;
    margin-right: 100px;
    }
    verkleinern. Ich möchte aber nicht "eingerahmter Shop" einstellen da es dann irgendwie alles komisch aussieht. Oder muss ich mir ein anderes Theme kaufen was ein "boxed" Theme ist?
    https://gambio-themes.de/demos/hgtemplate115/
     

    Anhänge:

  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Das was Du da möchtest nennt sich "wrappen" und ist eine einfache Einstellung im Style Editor.
    Aber:
    das Malibu - Theme ist jetzt gerade eins, welches über die ganze Breite gehen soll. Das ist hier gewollt.

    Dein Code hilft auf dem PC, aber auf einem anderen Gerät, wird das unschön:
    upload_2022-6-22_21-40-18.png

    Hier stehen die Produktkacheln jetzt über.
    Das sit bei verschiedenen Bildschirmauflösungen so,


    Für die Transparenz im Header:
    Bereiche -> Header -> Dein aktueller Header -> Allgemein
    Da steht oben "Hintergrundfarbe", klicke hier in dem Feld neben dem Farbcode auf das kleine Farbfkästchen
    da öffnet sich si ein Fenster:
    upload_2022-6-22_21-50-14.png

    der Bereich, den ich hier gelb markiert habe, hat einen Schiebe-Regler (roter Kringel), mit dem man die Transparenz einstellen kann.
    Das geht auch im Malibu - Header 1

    Hintergrund weiß, halbtransparent und transparent:
    upload_2022-6-22_21-53-19.png upload_2022-6-22_21-54-45.png upload_2022-6-22_21-55-34.png

    man sieht das aber erst, wenn man auf "OK" klickt

    Das selbe geht auch mit der Sekundärnavigation ganz oben und in allen anderen Bereichen mit Farbe.

    Mal sehen, ob ich das Malibu ein bisschen für Dich hinbiegen kann:
    kommt ins eigene css (Dein Code von oben muss dann weg):

    Code:
    body #outer-wrapper {
        margin-left: auto;
        margin-right: auto;
    }
    @media (min-width: 1400px){
    body #outer-wrapper {
    max-width: 1370px;
    }
    }
    @media (min-width: 992px){
    body #outer-wrapper {
    max-width: 970px;
    }
    }
    @media (min-width: 768px){
    body #outer-wrapper {
    max-width: 750px;
    }
    #header {
    background-color: transparent;
    }
    #header .inside{
    background-color: #ffffff6e;
    }
    }

    Das sieht zumindest auf meinem PC jetzt so aus:
    upload_2022-6-22_22-26-32.png


    Ich habe mir das nur in der Console angesehen, also bitte in allen Auflösungen testen :)
     
  7. semmelweis

    semmelweis Erfahrener Benutzer

    Registriert seit:
    17. Juli 2020
    Beiträge:
    181
    Danke erhalten:
    13
    Danke vergeben:
    51
    Also der Code zerschießt bei mir alles :D Ich habe das Gefühl, dass dann ein Boxed Theme doch besser wäre oder was meinst du?
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Warum nimmst Du nciht das Honeagrid? oder schaust Dir mal die im Gambio-Store an. Vielleicht passt da eins besser zu Deinen Vorstellungen als das Malibu.