HP-Design per Klick ändern.

Blue-Tiger

hmm.... also das ganze geht im Grunde auch ohne PHP....

im Prinzip reicht einfaches CSS und Javascript. Bei meiner HP (siehe Link) sieht das Ganze z. B. so aus:

im HTML-Header der Datei: die Links zu den jeweiligen CSS-Files:

<head>
	<link rel="stylesheet" href="./include/styles//basics.css" type="text/css" />
	<link rel="stylesheet" href="./include/styles//yeblo_white/style.css" title="yeblo_white" type="text/css" />
	<link rel="alternate stylesheet"  title="blueDark" href="./include/styles//blueDark/style.css" />
	<link rel="alternate stylesheet"  title="blueWhite" href="./include/styles//blueWhite/style.css" />
	<link rel="alternate stylesheet"  title="jeans" href="./include/styles//jeans/style.css" />
	<link rel="alternate stylesheet"  title="orangeDark" href="./include/styles//orangeDark/style.css" />

	<link rel="alternate stylesheet"  title="plainOld" href="./include/styles//plainOld/style.css" />
	<link rel="alternate stylesheet"  title="yeblo" href="./include/styles//yeblo/style.css" />
	<link rel="alternate stylesheet"  title="yeblo_white" href="./include/styles//yeblo_white/style.css" />

zu beachten: der erste Eintrag, der kein "title"-Attribut hat, ist immer aktiv. Welcher der anderen Stile zum Einsatz kommt, wird in einem Cookie gespeichert. Beim Laden der Seite wird ein kleines Javascript ausgefuehrt, das dieses Cookie ausliest und dann den aktiven Stil setzt.

Die benoetigten JavaScript-Funktionen dafuer kannst du dir hier ansehen:
bluetiger.power-plant.org/include/scripts.js

Zum Anwaehlen reicht es dann, die dafuer vorgesehene Javascript-Methode aufzurufen. Der dafuer erforderliche HTML-Code ist folgender:

<script type="text/javascript">
<!--
	document.write('<div class="stylechooser">\n');
	document.write('feel free to choose an alternative layout:<br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'yeblo_white\'); return false;"> yeblo_white</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'blueDark\'); return false;">blueDark</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'blueWhite\'); return false;">blueWhite</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'jeans\'); return false;">jeans</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'orangeDark\'); return false;">orangeDark</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'plainOld\'); return false;">plainOld</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'yeblo\'); return false;">yeblo</a> <br />\n');
	document.write('<a href="#" onclick="changeStyleSheet(\'yeblo_white\'); return false;">yeblo_white</a> <br />\n');
	document.write('</div>\n');
//-->
</script>

Ich generiere die Links also zur Laufzeit mit JS. Das hat den Vorteil dass Leute, die JavaScript eh deaktiviert haben, das Ganze gar nicht erst zu Gesicht bekommen.

Einen Link zu meiner HP, wo du dir das alles anschauen kannst, findest du auf meiner Homepage. Mein Webserver hat momentan allerdings anscheinend Probleme. Ich hoff die Seite ist wieder erreichtbar, sobald du das hier liest

Wenn nicht, dann hilft dir vielleicht folgender Link weiter:
http://www.alistapart.com/articles/alternate/

Note: der Nachteil "meiner" Methode ist allerdings, dass das ganze nicht funktioniert, wenn der User Javascript deaktiviert hat. Dann wird einfach das Default-Stylesheet angezeigt, bzw. bei manchen Browsern kann der User dann immerhin noch ueber Menueeintraege das gewuenschte Layout machen (z. B. beim Firefox oder bei Opera)

Aziz

Im Prinzip ist die Idee mit dem JavaScript und dem Cookie keine üble Idee. Das trägt zur Benutzerfreundlichkeit der Seite bei, und wenn ein User JavaScript nicht aktiviert hat, dann ist das vollkommen verschmerzbar. Wie ich bei deiner Methode jedoch feststellen muss, hast du ziemlich viele CSS-Dokumente zu verwalten. Musst du da nicht einen riesen Aufwand treiben um eventuelle Veränderungen zu synchronisieren? Oder hast du etwa irgendwelche versteckte Mittel, die dir diese Aufgabe abnehmen und von denen ich nichts weiß?

Ich denke, dass hier PHP für diese Aufgabe hervorragend geeignet ist. Man kann praktisch überall seine PHP-Variablen im CSS-Dokument verstreuen, und diese mit einer einzigen Codezeile adaptieren. Wenn man will, so kann man auch browserabhängigen CSS-Code einblenden, wie z.B. den Box-Model-Hack für IE < 6 User oder was auch immer. Natürlich ist es wiederum eine andere Frage den Browser des Users genau zu bestimmen. Sowas könnte man aber im User Profil abspeichern, falls man eine Community hat. Oder sogar in einem Cookie, wenn wir schon so fröhlich sind

Blue-Tiger

nein, das taeuscht. Ich hab so viele CSS-Dokumente, weil ich so viele verschiedene Layouts habe

Die "Grundstruktur" der Seite (Anordnung der Elemente, Aufteilung in Frames, etc.) liegt in "basics.css", die immer geladen wird. Die restlichen Files sind die verschiedenen Layouts (Farben, Hintergrundbild, etc.).

D.h. will ich die Grundstruktur aendern, z. B. weil ich die Navigationsleiste jetzt rechts statt links vom Text haben will, dann aender ich die "basics.css". Will ich stattdessen im Layout "blueDark" die Schriftgroesse der h2-Ueberschriften aendern, dann editier ich "blueDark/styles.css". Ist also eigentlich nicht viel Synchronisationsaufwand.

Tanzfreak

Hallo,

Frames, etc.) liegt in "basics.css", die

Ich werde dich über's ICQ mal darauf ansprechen. Ich möchte gerne den Aufbau einer solchen Datei sehen. Evtl. kann ich mir den einen oder anderen Tipp holen.

MfG

SideWinder

Die Idee ist in der Tat nicht schlecht

MfG SideWinder

Shade Of Mine

ich liebe deswegen ja template engines. Denn CSS ist zwar nett, aber leider ist HTML zu beschränkt um wirklich schöne skins machen zu können Und wir wollen die lowend version fürs drucken ja nicht vergessen - sowas ist mit CSS nur schwer möglich.

Der Vorteil der JS methode ist natürlich dass kein ServerSide Scripting gebraucht wird, aber dank offline templates kann man das auch elegant umgehen

das umschalten der stylesheets kapiert leider kein User - obwohl es eine gute Idee ist, aber kaum ein user kennt diese möglichkeit

Blue-Tiger

Tanzfreak schrieb:

Hallo,

Frames, etc.) liegt in "basics.css", die

Ich werde dich über's ICQ mal darauf ansprechen. Ich möchte gerne den Aufbau einer solchen Datei sehen. Evtl. kann ich mir den einen oder anderen Tipp holen.

MfG

kannst du gerne tun

Im uebrigen ist meine Seite umgezogen und auf

http://bluetiger.bauchlandung.org/

zu erreichen.

scrub

ähm... der CSS- validationslink liefert momentan kein sehr zufriedenstellendes ergebnis

Um wie gewünscht zu funktionieren, ist ein korrekter Parsebaum erforderlich. Sie sollten deshalb gültiges HTML benutzen.

Blue-Tiger

scrub schrieb:

ähm... der CSS- validationslink liefert momentan kein sehr zufriedenstellendes ergebnis

thx fuer den Hinweis, hab's korrigiert

curry-king

Hallo,

ich habe jetzt die erste Variante von Shade versucht, und sie funktioniert auch .
Nun stellt sich mir aber ein Problem.
Wenn ich mit mode=red per GET übergebe, gilt das Design nur für die aktuelle
Seite. Klicke ich auf eine folgende, wird mode=red nicht mehr übergeben.
Wie kann ich es erreichen, das bei einmaliger Übergabe von mode=red per GET
sich das Design auf den folgenden Seiten nicht verändert? Muss ich für jeden
Link auf einer Seite prüfen, welcher mode gesetzt ist? Das geht doch sicher
eleganter, oder?

thx

sarfuan

Wenn du den Parameter nur einmal übergeben willst, hast du zwei Möglichkeiten:
- Cookie setzen und dort den Modus abspeichern (unzuverlässig)
- den Modus serverseitig speichern. Stichwort "Sessions"

Windoof

Wobei ich persönlich die Cookie-Variante bevorzuge,da Sessions nicht immer zuverlässig sind, selbst wenn sie angewandt werden können... Cookies hingegen sind zuverlässig, sofern sie der User unterstützt, etc... möge man nun die Denkweise von Blue-Tiger anwenden und versuchen für diejenigen, die Cookies deaktivieren, sowas auch nicht sichtbar zu machen...

vorerst mal eine Erläuterung, weshalb Sessions nicht zuverlässig sind:

Wenn ein User sich beim Server meldet, bekommt er eine Session-ID, diese wird auf dem Server auch hinterlegt, sodass man seine "Daten" abfragen kann... das ist, so gesehen, wunderschön und allses supertoll, aber... Sessions haben den Nachteil, dass sie eine bestimmte Gültigkeitsdauer haben, d.h. nach meist 5-10 min. ist die Session-ID ungültig und man wundert sich, warum die Seite auf einmal wieder so hell ist udn nicht so schön schwarz, wie gewünscht...

Deshalb empfehle ich eine Kombination aus Cookies und einer anderen Methode, die hier scheinbar niemand in Betracht zieht: Einfach mal einen Parameter bei jedem Link übergeben, in jeder Form mitsenden, etc. (Das kann man wunderbar mit PHP realisieren)... Und Cookies dazu, dass man auch beim nächsten Besuch der Seite wieder das gleiche Design hat... oder aber, wenn man keine Cookies akzeptiert, muss man halt das Design neu auswählen, aber diese Methode hat einen entscheidenden Vorteil gegenüber allen anderen: Sie ist Zeitunabhängig und zuverlässig...

So viel dazu

DocJunioR

curry-king schrieb:

ah, danke, hab mal wieder zu kompliziert gedacht.....
die sig war ursprünglich ein satz, den ich von unserem physiklehrer aufgeschnappt
hatte. hab ihn dann noch ein bissl modifiziert

Könnte es sein, dass der Lehrer Hallervorden heißt und nen Jodeldiplom hat?

curry-king

noe, er heisst zink und hat n e-technik-diplom... aber jodeln kann der bistimmt auch.
Da du ja so neugierig bist, kannst du ihm ja ne nachricht auf seiner seite hinterlassen, er antwortet bestimmt .
http://www.knzink.de