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 ➜ Beispiel anzeigen

Ich habe die Stellen markiert (9, 35, 85 und 142) 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

Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Dateibrowser
Ein einfacher Dateibrowser, ideal um PHP-Scripte auf einem lokalen Webserver zu testen, die PHP-Scripte müssen dann nicht mehr umständlich über die Adresszeile des Browsers aufgerufen werden.
Mit JSON Daten zwischen JavaScript und PHP austauschen
JSON, ist ein kompaktes Datenformat in einer einfach lesbaren Textform zum Zweck des Datenaustauschs zwischen Anwendungen.