Designauswahl - Das Design über einem Link verändern

👁️‍ Live-Demo anzeigen - Designauswahl - Das Design über einem Link verändern (Öffnet in einem neuen Tab)
Live-Demo - Designauswahl - Das Design über einem Link verändern

Die Trennung von Inhalt und Formatierung macht es möglich, das Aussehen einer Webseite vollständig zu verändern ohne den Quelltext der Datei selbst zu modifizieren. Eine Möglichkeit ist CSS in Verbindung mit PHP und Session-Cookies.
Mit den hier vorgestellten Lösungen, ermöglichen Sie es Ihren Besuchern, ohne großen Aufwand das Design der Webseite selbst zu bestimmen.

An einem einfachen Beispiel zeige ich eine flexible Möglichkeit, mit der die Besucher das Design ändern können. Das ausgewählte Design bleibt dann während des Besuches auf diesen Seiten aktiv.

Das geänderte Design wird mit Session-Cookies auf dem PC des Besuchers gespeichert. Das Session-Cookie wird beim schließen des Browser-Fensters wieder gelöscht.

designauswahl.zip

Viel Spaß damit!

Farben tauschen

Das ganze geht auch einfacher und nicht so kompliziert smile, alle Funktionen sind in einer einzigen Datei zusammen gefasst.

👁️‍ Live-Demo anzeigen - Farben tauschen (Öffnet in einem neuen Tab)
Live-Demo - Farben tauschen

Ich habe die Stellen markiert (9, 36, 86 und 147) um zu zeigen wo was geändert werden muss wenn man weitere Optionen (Farben) hinzufügen möchte.

Quelltext:  farben_tauschen.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?php
/**
 * Farben tauschen
 */

session_start();

// Farben
$farben[1] = [1 => "#FFF7F2", "#FFD2BB", "#FFA473", "#FF7226", "#D94B00"];
$farben[2] = [1 => "#F4FCFF", "#A6E2FF", "#1CB5FF", "#06AEFF", "#0095DD"];
$farben[3] = [1 => "#FFF4FA", "#FFC8E2", "#FF5BA9", "#FF1182", "#D50065"];
$farben[4] = [1 => "#F7FFF7", "#A6FFA6", "#00F000", "#00D900", "#00B700"];

// Farben-Nr (Default)
$farbennr = 1;

if (isset($_GET["farbennr"])) {
 if (is_numeric($_GET["farbennr"]) &&
     $_GET["farbennr"] <= count($farben)) {
  $_SESSION["farbennr"] = $_GET["farbennr"];
 }
 exit;
}

if (isset($_SESSION["farbennr"])) {
 $farbennr = $_SESSION["farbennr"];
}
?><!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Farben tauschen</title>

<style>
:root {
 --color1: <?=$farben[$farbennr][1];?>;
 --color2: <?=$farben[$farbennr][2];?>;
 --color3: <?=$farben[$farbennr][3];?>;
 --color4: <?=$farben[$farbennr][4];?>;
 --color5: <?=$farben[$farbennr][5];?>;
}

body {
 font-family: Verdana, Arial, Sans-Serif;
 background-color: var(--color1);
}

h1 {
 font-weight: Normal;
 color: var(--color4);
 background-color: var(--color2);
 padding: 5px 5px 5px 15px;
}

h2 {
 font-weight: Normal;
 color: var(--color3);
}

mark {
 border: Solid 1px var(--color2);
 color: var(--color2);
 font-weight: Bold;
 background: Transparent;
 border: 0;
}

big {
 font-size: 2rem;
}

article > p {
 color: var(--color5);
}

span[data-farbennr] {
 display: Inline-Block;
 width: 50px;
 height: 50px;
 margin: 5px;
 box-shadow: 0px 0px 4px 3px var(--color2);
 border-radius: 4px;
 cursor: Pointer;
}

span[data-farbennr="1"] {
 background-color: #FFD2BB;
}

span[data-farbennr="2"] {
 background-color: #A6E2FF;
}

span[data-farbennr="3"] {
 background-color: #FFC8E2;
}

span[data-farbennr="4"] {
 background-color: #A6FFA6;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
 let anzahl = document.querySelectorAll('[data-farbennr]').length;
 for (var i = 1; i <= anzahl; i++) {
   document.querySelector('[data-farbennr="' + i + '"]').addEventListener("click", tauschen);
 }
});

function tauschen() {
 const XHR = new XMLHttpRequest();
 let farbennr = event.target.dataset.farbennr;
 XHR.open("GET", document.URL + "?farbennr=" + farbennr , true);
 XHR.send(null);
 XHR.onreadystatechange = function() {
 if (XHR.readyState >= 4 &&
      XHR.status == 200) {
   window.location.href = document.URL;
  }
 }
}
</script>

 </head>
<body>

<article>

<h1>Weit hinten, hinter den Wortbergen &hellip;</h1>

<p><big>W</big>eit hinten, hinter den <mark>Wortbergen</mark>, fern der Länder Vokalien und <mark>Konsonantien</mark> 
leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. 
Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>

<p><big>E</big>s ist ein <mark>paradiesmatisches Land</mark>, in dem einem <mark>gebratene Satzteile</mark> 
in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu 
<ins>unorthographisches</ins> Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war 
<mark>Lorem Ipsum</mark> ...</p>

</article>
<aside>

<h2>Farben tauschen</h2>

<div>
<span data-farbennr="1"></span>
<span data-farbennr="2"></span>
<span data-farbennr="3"></span>
<span data-farbennr="4"></span>
</div>

</aside>

</body>
</html>

Tipps

Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Spalten einer Tabelle dynamisch ändern
Manchmal möchte man die Spalten einer Tabelle dynamisch ändern so das diese individuell angezeigt werden können, wie das geht wird hier an einem Beispiel demonstriert.
Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.