Zwei Farb-Versionen auf einer Webseite

1. offizieller Beitrag

    Hi Mario,

    ich habe die Idee, meine Page so aufzuteilen, dass der Besucher zwischen zwei Hintergrundfarben wählen kann. Dazu will ich alle Seiten kopieren und in eine Unterseite DARK einfügen. Diese Unterseite soll mit allen weiteren Seiten so aussehen:


    CSS:

    <style>

    body {

    background-color: hsl(201 50% 15%);

    }

    p {

    color: #bbb;

    }

    </style>


    Problem 1: Das Logo/der Website-Name, das Feld Suchbegriff, der Eintrag "Sie befinden sich hier" und das Feld Menü können per Layout-Designer nur übergreifend geändert werden, also nicht separat für die Unterseite DARK.


    Problem 2: Für DARK müsste ich die Überschriftenfarbe h3 neu definieren, und ich weiß nicht, wie... Das geht ja auch nur global.


    Sind meine Vorstellungen lösbar? Ich möchte übrigens nicht auf den automatischen Dark-Modus zugreifen, da der ja erst vom User eingestellt werden muss, sondern ich will tatsächlich zwei verschiedene Versionen anbieten, ohne zwei verschiedene Pages hochladen zu müssen!


    Ach ja: Eine Beispielseite hier. Dort wie auch auf allen anderen Seiten des künftigen Unterordners DARK soll der HG dunkel werden und alles andere trotzdem lesbar.


    Herzliche Grüße


    Norbert

    Hallo,


    ich bin zwar nicht Mario, aber ist hoffentlich auch ok wenn ich als Erster antworte ;)


    1. Den Punkt, der gegen den automatischen Dark-Mode spricht, habe ich noch nicht ganz verstanden, der Nutzer müsste doch bei deiner Umsetzung auch selbst die andere Variante auswählen?

    2. Wäre es nicht einfacher, dass über JavaScript zu lösen? Also einen Button z.B. auf allen Seiten oder nur der Startseite zum Umschalten? Hätte den Vorteil, dass die Inhalte nicht an zwei Orten verwaltet werden müssen... Falls da Interesse besteht wäre ich bei Gelegenheit bereit, da mal was kleines zu schreiben

    Klar bist du nicht Mario, aber ich danke dir für deine Einschaltung hier, Phil! :)


    Das mit dem automatischen Darkmodus verstehe ich sowieso überhaupt gar nicht: Ich denke, dass der User, falls er ihn aktiviert hat (sind ganz normale Hänsels und Gretels dazu fähig oder wissen etwas davon?), dann doch nur die dunkle Seite des Universum sehen kann? Oder kann er tatsächlich wählen (per Button oder so), ober Darkvader oder eher ein Lichtseraphim sein möchte?


    Deshalb kam mir diese Idee, dem einfachen Besucher zwei Varianten per Button auf der Heimseite anzubieten: Willst du ins Dunkle gehen oder lieber ins Licht? Wähle hin und her und suche dir aus, was dir besser passt.

    Und diese Möglichkeit sollte nach Möglichkeit auf der selben Page bestehen, allerdings in einer völlig identischen Unterseite, die dann halt farblich von der Ursprungsseite abweicht.


    Ich hoffe, ich habe mich klar ausgedrückt? Wichtig sind dabei die beiden Probleme, die ich eingangs erwähnt habe. Das Script funktioniert zwar für diese Unterseiten, aber dummerweise sind die dunklen Schriften aus der Originalseite dann auch auf der dunklen Unterseite dunkel und somit im Nirwana... *schluchz*


    Viele Grüße!

    Norbert

    Hallo Norbert,


    Zitat

    Ich denke, dass der User, falls er ihn aktiviert hat (sind ganz normale Hänsels und Gretels dazu fähig oder wissen etwas davon?), dann doch nur die dunkle Seite des Universum sehen kann? Oder kann er tatsächlich wählen (per Button oder so), ober Darkvader oder eher ein Lichtseraphim sein möchte?

    Ich denke, dass Nutzer, die den Darkmode eingeschaltet haben, diesen dann auch auf allen Webseiten und Programmen nutzen wollen. Von daher macht meiner Meinung nach der automatische Dunkelmodus schon Sinn.


    Die (denke ich) einfachste Möglichkeit wäre folgende: du aktivierst den automatischen Dunkelmodus, damit Nutzer, die auf ihrem Gerät den Dark-Mode angeschaltet haben, automatisch eine dunkle Version bekommen. Zusätzlich könnte man einen Button einfügen, der auf jeder Seite angezeigt wird und damit allen anderen Nutzer die manuelle Aktivierung des Dark-Modes von ZP erlauben.


    Würde das in etwa deinen Vorstellungen entsprechen?

    VG

    Hallole Phil,


    jaaa, das ist eine hervorragende Idee!!! Und das wird wirklich funktionieren? So ein Button müsste eigentlich nur auf der Home-Page aktiviert werden müssen: Entweder der Besucher guckt sich alles dunkel an, oder er bleibt bei fast weiß. Alles oder nix.


    Was wäre mit denen, die den automatischen Darkmodus aktiviert haben: Könnte man die auch dazu verführen, sich die die Page auch mal nur zum Spaß "in echt" anzusehen? Ich weiß, jetzt werde ich fast unverschämt, aber ich freu' mich so über deinen ersten Vorschlag, dass ich zu träumen anfange... ;)


    Wollen wir - das heißt du - mal deinen ersten Vorschlag ausprobieren? Da bin ich soooo gespannt drauf... :)


    VG Norbert

    Hallo Norbert,


    für den ersten Vorschlag (Dark-Mode automatisch nach Geräteeinstellung + manueller Button) müsstest du folgendes machen:


    1. Den automatischen Dunkelmodus in ZP aktivieren

    2. Auf der Startseite an einer passenden Stelle das Widget "HTML-Quelltext" einsetzen und dort folgendes einfügen (am einfachsten oben rechts über das Icon kopieren und dann ins Widget einfügen):

    Ich konnte den Code bis jetzt noch nicht testen, sollte aber funktionieren. Den Text im Button kannst du natürlich beliebig anpassen.

    Funktioniert super! :)


    Um meiner Vorstellung noch näher zu kommen wäre es genial, wenn man den Mode wieder ausschalten könnte.

    Also: Egal, ob ein User den Dark Mode im System eingeschaltet hat oder nicht: Jeder User sollte die Möglichkeit haben, zwischen beiden Modi zu wechseln, je nach Lust und Laune. Das wäre mein Zielwunsch! ;)


    Natürlich müsste ich dann irgendwo darauf hinweisen, dass sich diese Einstellungen auf das gesamte System auswirken: Damit der User nicht in Panik gerät, weil er sich plötzlich in einem anderen Universum befindet, und das auch wieder rückgängig machen kann. Das ist wohl nicht leicht zu handeln...


    Viele Grüße!

    Norbert

    Hallo Norbert,


    sorry dass ich erst jetzt antworte, hatte die letzte Woche viel um die Ohren.


    Hier eine angepasste Version, den bisherigen Code bitte folgendermaßen ersetzen:


    Folgender Code muss auf die Startseite bzw. die Seite mit dem Button für den Darkmode in ein Quelltext-Widget:



    Und dieser Code muss in Erweitert > Attribute > mobile_script:


    VG

    Zitat

    Natürlich müsste ich dann irgendwo darauf hinweisen, dass sich diese Einstellungen auf das gesamte System auswirken

    Noch ein Hinweis dazu: Diese Einstellung wirkt sich NICHT auf das gesamte System, sondern lediglich nur auf deine Webseite aus.

    Kein Problem, wenn das etwas länger dauerte... ;) Ich dachte nur, du hast es vielleicht vergessen...


    Das ist echt super, Phil! Ich habe das auf die Home-Page eingebunden, und nur dort wirkt es. Wenn ich das für die gesamte Webseite aktivieren will, muss ich dann die Codes auf jede einzelne Seite einbinden? Oder geht das auch global, was sicher sinnvoller ist?


    Viele Grüße!


    Norbert

    Ich bemerke gerade, dass ich den Code doch auf jede einzelne Seite einbauen muss, da externe Links sehr oft auf einzelne Seiten verweisen... ;)

    Das ist aber nicht tragisch, da es nur und 30 Seiten sind, und dieser tolle Code ist es mir wert! :)


    Dennoch wäre es nett, wenn deine Codes gleich von Anfang an global wirken könnten.

    Zitat von Alter Kerl

    Ich bemerke gerade, dass ich den Code doch auf jede einzelne Seite einbauen muss, da externe Links sehr oft auf einzelne Seiten verweisen... ;)

    Das ist aber nicht tragisch, da es nur und 30 Seiten sind, und dieser tolle Code ist es mir wert! :)


    Dennoch wäre es nett, wenn deine Codes gleich von Anfang an global wirken könnten.

    Hast du den zweiten Code wie beschrieben in Zeta bei Erweitert > Attribute > mobile_script eingefügt? Dann sollte es eigentlich global sein...

    Zitat von Alter Kerl

    Ja klar habe ich das gemacht, bin doch ein folgsamer Schüler... ;)


    Guckst du hier , aktiviere Dark und wechsle dann im Menü auf irgendeine Unterseite; dort ist es hell. Jedenfalls dann, wenn die Page schon vorher hell war.

    Ok, habe das Problem gefunden: der Code für alle Seiten wird komischerweise nur auf der Startseite ausgegeben. Kannst du bitte mal schauen, ob im Projektordner das Attribut mobile_script leer ist? Falls ja, bitte mal eine Unterseite überprüfen.

    Zitat von Alter Kerl

    Der Projektordner enthält insgesamt drei Skripts im Bereich mobile-script. Bildauszug anbei.

    Danke für's Nachschauen, das erklärt natürlich das momentane Verhalten. Du musst den Code von mir wieder aus Erweitert > Attribute > mobile_script löschen und stattdessen im Projektordner bei mobile_script nach den Skripts, die bereits dort drin stehen, einfügen.


    VG

    Auf diesen Seiten ist der Code nicht im Quelltext, ist dort das Attribute vielleicht auf Seiteneben anders belegt?