Designauswahl - Das Design über einem Link verändern

👁️‍ Live-Demo - Designauswahl - Das Design über einem Link verändern
(Demo ö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.

Herunterladen 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 - Farben tauschen
(Demo ö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.phpKopierenAusblendenZeilen

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] = [=> "#FFF7F2""#FFD2BB""#FFA473""#FF7226""#D94B00"];
$farben[2] = [=> "#F4FCFF""#A6E2FF""#1CB5FF""#06AEFF""#0095DD"];
$farben[3] = [=> "#FFF4FA""#FFC8E2""#FF5BA9""#FF1182""#D50065"];
$farben[4] = [=> "#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 JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.
Responsives Design
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
SQLite-Datei mit PHP und PDO erstellen
Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.