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

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.
Bilder mit Wasserzeichen markieren
JPEG-Bilder (oder andere Grafikformate) können mit einem transparenten Wasserzeichen markiert werden; Mit Hilfe eines kleinen PHP-Scripts.
.htaccess - Passwortschutz für Webseiten
Mit einer .htaccess Datei und einer .htpasswd Passwort-Datei lassen sich bestimmte Verzeichnisse und die darin enthaltenen Dateien vor unerlaubtem Zugriff schützen.