Support » Themes » UniBlock

  • Hallo,
    Ich teste das UniBlock (free) Theme.
    Für die Seiten Sections, Sample Page und Kontakt nutze ich ein Template mit einem sticky-header.

    Frage: Wenn ich die Farbe des site-header (wenn ich >50px scrolle) ändern will, muss ich welche Selektoren ansprechen?

    Ich hab mal einen Test mit js gemacht, aber die Klasse die ich da einfügen wollte, hat es mir nicht angezeigt. (Bin leider kein Entwickler!)

    Habt ihr eine Idee wie ich damit weiterkomme?

    Vielen Dank
    Peter

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

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • threadi

    (@threadi)

    Dieses Theme ist ein modernes FSE-Theme. Du musst dazu eigentlich keinen Quellcode schreiben um etwas anzupassen. Die Hintergrundfarbe vom Header solltest Du über den Editor anpassen können. Die Theme-Entwickler stellen dazu auch eine Dokumentation bereit: https://www.wpzoom.com/docs/how-to-customize-the-header-in-wordpress-full-site-editor/

    Thread-Starter Peter Spiess

    (@mod4ps)

    Hallo Threadi
    Ich habe offenbar mein Anliegen zu wenig klar geschildert. Sorry!
    Ich möchte das die Hintergrundfarbe (im Header) wechselt, wenn ich 100px runter scrolle.

    Das ist meine Test URL:
    https://project-space.modular4web.ch/uniblock/kontakt/

    Das ist mein mini js Script dazu:

    var header-bg = document.getElementByID('header-bg');
    
    var oldColor = header-bg;
    
    document.body.addEventListener('scroll', () => {
    
    let yPosition = document.body.scrollTop;
    
    if (yPosition > 100) {
    
    header-bg = "teal";
    
    }
    
    else {
    
    header-bg = oldColor;
    
    }
    
    })

    Die BackgroundFarbe ist mit einem GruppenBlock im HeaderBlock definiert. Diesem GruppenBlock habe ich die ID „header-bg“ gegeben.

    Die Idee wäre, dass wenn ich 100px runter scrolle, die Header Farbe von Schwarz (GruppenBlock Voreinstellung) zu „teal“ Petrol wechselt.

    Leider funktioniert das Ganze nicht! Was übersehe ich?

    Herzlichen Dank für deine Hilfe
    Peter

    threadi

    (@threadi)

    Wirf einen Blick in die JavaScript-Konsole. Dort ist ein Fehler in Bezug auf deinen JavaScript-Code zu sehen. So wäre er zumindest syntaktisch richtig:

    var headerbg = document.getElementByID('header-bg');
    
    var oldColor = headerbg;
    
    document.body.addEventListener('scroll', () => {
    
    let yPosition = document.body.scrollTop;
    
    if (yPosition > 100) {
    
    headerbg = "teal";
    
    }
    
    else {
    
    headerbg = oldColor;
    
    }
    
    })
    Thread-Starter Peter Spiess

    (@mod4ps)

    Hallo Threadi
    Super, vielen Dank für den Tipp mit der Konsole. Da war ja nicht nur ein Syntax-, sondern auch ein Scriptfehler.

    Das passt besser, jetzt funkts!

    let header = document.getElementById('header-inner');
                document.addEventListener('scroll', function() {
                    
                    // Get the scroll position
                    let scrollPos = window.pageYOffset;
                    
                    if ( scrollPos > 100 ) {
                        header.style.backgroundColor = "rgba(245, 40, 145, 0.8)";
                    } else {
                        header.style.backgroundColor = "rgba(15, 15, 30, 0.8)";
                    }
                });

    Bestens, nochmals vielen Dank für deine Hilfe.
    Peter

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)