Toggle Content Switch - Hintergrund Farbe ändern

    Hallo Leute, ich stehe vor folgendem Problem.


    Ich habe auf meiner Wordpress Seite per Elementor einen Toggle Content Switch hinzugefügt.


    Nun ist es so dass:

    1. Content - beinhaltet ein Bild mit einem grauen Hintergrund. (Foto Grau)

    2. Content - beinhaltet ein Bild mit einem gelben Hintergrund. (Foto Gelb)


    Der Toggle Switch Button befindet sich oberhalb der Bilder die per Switcher eingefügt werden. (siehe beiliegende Fotos.)


    Ist es möglich per CSS dem Toggle Switcher zuzuweisen, dass bei

    Content 1 der Toggle Button -> grauen Hintergrund hat?

    Content 2 der Toggle Button -> gelben Hintergrund hat?


    Ich habe es geschafft dem Content 1 die richtige Farbe zuzuweisen.

    Allerdings wenn ich das im Eingabe-Fenster von Content 2 genauso handhabe (... <body style=...>) funktioniert das leider nicht und beim Switch zu Aktiv ändert sich die Farbe nicht mehr.

    -> Erklärung hierzu siehe Foto "Eingabe Toggle Switcher"


    (Die Zusätzliche Eingabe bei dem Fenster auf dem Foto:

    [elementor-template id="612"] und [elementor-template id="599"] = sind die wechselnden Seiten / Bilder)


    Desweiteren steht mir noch folgendes Fenster zur CSS Eingabe zur Verfügung. (siehe beigefügtes CSS Eingabe Foto) - denke über dieses müsste es gehen oder?


    Hat da zufällig jemand eine Idee? Geht sowas oder ist das nicht möglich und man muss vielleicht doch bei einer Farbe bleiben?


    Nochmal einfach per Foto erklärt: -> so wie auf dem Foto "Ziel" sollte es auch bei der gelben Section/Seite sein.

    daher, Gelber Content hat den Toggle Switcher Button auch im Gelben Hintergrund.


    Vielen Lieben Dank und Liebe Grüße.

    Bleibt Gesund [Blockierte Grafik: https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f44d.png]

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Wenn ich das richtig verstanden habe - ja sollte machbar sein!
    Ich habe aufgrund fehlender Angaben deinerseits auf einer Elementor-Demoseite das mal versucht - und passt ;-)

    Die dort erforderliche Anpassung:

    CSS
    .elementor-28133 .elementor-element.elementor-element-f1f44da .uael-rbs-switch:checked + .uael-rbs-slider {
    background-color: #f2c57b !important;
}

    Wie das bei dir mit den classes ist kann niemand sagen - siehe hier besonders (II). Auch du warst mit deiner Registrierung mit den Forenregeln einverstanden - dann auch umsetzen!

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Hallo Sepp, vielen lieben dank dir schonmal und sorry dass ich mich nicht genau eingelesen habe.

    Hier das Plugin welches ich für den Toggle Switch verwende. (Anhang)
    OceanWP
    + link zur Seite:
    OceanWP
    https://www.royal-marketing.at/branding/

    Bezüglich deines Codes, müsste der unter "Custom CSS" hinzugefügt werden? Und wie müsste ich den Code individuell abändern sodass das bei mir funktioniert?

    Vielen Lieben dank dir :)

    Da würde ich 2 Dinge anpassen ;-)

    Code
    /*switch farbe anpassen*/
.switch .slider {
    background-color: #F2C479;
}


/*switch abstand unten*/
.toggle-btn-sec {
    padding-bottom: 10px;
}

    Du kannst auch nur die Farbe anpassen.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Oh ok danke. - ist es auch möglich dass sich der komplette Sliding "Hintergrund" in die selbe Farbe ändern wie der Hintergrund von dem aktiv Bild/Window? Quasi so:

    Slider Hintergrund bei Gelbem Bild von Grau zu Gelb.
    -> siehe Anhang.

    Lg


    * ohne dass sich der Slider Hintergrund von "Slide Inaktiv" von Grau zu Gelb ändert.
    - daher bei Grauem Bild (Inaktiv) grauer Hintergrund beim Slider /Button
    und gelber Hintergrund bei gelbem Bild (aktiv) bei Slider / Button

    Was gibt der Elementor dazu her?

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Das ist etwas Tricky gewesen, zumindest ich kanns nicht anders! Was du davon verwenden willst, ist dir überlassen.
    Kurze Beschreibung: Der Schalter ist am Hintergrund, dadurch immer die selbe Farbe #8b9597!
    Also Schalter runter schieben und Lücke auflösen. Da der Schalter aber nach Beitrag #4 die selbe Farbe hat als der Hintergrund ist nur der weiße Kreis zu sehen. Dadurch den Code von oben weg und ggf durch den neuen ersetzen!


    Eventuell ist der Strom Hinweis neu zu positionieren?¿

    Das wars!

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    Zitat von stefane9

    Ich finde ein Danke ist eigentlich zu wenig.


    Diesen Gedanken hatte ich auch ;):rolleyes:

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden