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 schreiben und lesen
Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.
Einfache Kalender mit PHP erstellen
PHP-Kalender können nützlich sein. Sie können so einfach sein wie das Datum anzeigen oder so komplex wie das Einrichten eines Online-Buchungssystems. Diese beiden PHP-Scripte zeigen wie Sie einfache Kalender erstellen. Wenn Sie wissen, wie das geht, können Sie dieselben Konzepte auf komplexe Kalender anwenden, die Sie möglicherweise benötigen.
Floodsperre
Um das Flooden (= Zumüllen mit großen Mengen meist sinnlosen Inhalts) von Foren und Gästebüchern etc. zu erschweren oder um zu verhindern das nach dem absenden des Formulars und drücken der F5-Taste (Seite neu laden) die Daten nochmals eingetragen werden, kann die hier vorgestellte Floodsperre einen Schutz bieten.
Favicon erstellen - Ihr Logo in den Lesezeichen (Favoriten)
Das Favoriten Icon wird bei einem Bookmark in die Favoritenliste aufgenommen. Dort erscheint zukünftig die „gebookmarkte” Webseite mit einem eigenen Symbol.

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