ColorMatch Remix
Ein praktisches Werkzeug für die Farbauswahl bei Webseiten. Der ColorMatch Remixer. An einem Beispiel kann eine Farbauswahl sofort begutachtet werden. Gewählte Farbkombinationen können bequem abgespeichert werden.
(via: netbib)
Tutorial: PHP-Styleswitcher
Vornweg: Der PHP-Styleswitcher basiert auf dem Code von How do you make a website skinnable?. Ich hab’ dabei nur einige kleine Änderungen durchgeführt, damit das Script bei mir lauffähig wird.
Der Styleswitcher funktioniert per PHP und speichert beim User ein Cookie mit einer Lebensdauer von einem Jahr. Aktiviertes Javascript beim Besucher ist nicht nötig. Ich setze voraus, dass PHP auf dem Server installiert ist und ausserdem, dass man mindestens zwei verschiedene CSS-Styles hat, zwischen den man wechseln möchte. Mit diesem Switcher kann man jedoch auch ohne einen Wechsel der CSS-Dateien das Layout wechseln; wie erklär’ ich aber erst am Ende.
Als erstes läd man sich die Datei herunter und entpackt diese. Diese beinhaltet eine cookie.php und eine header.php. Dazu später mehr.
1. headerfiles – header(stylenummer).php
Angenommen man möchte zwischen 3 Styles wählen können, dann muss man 3 Dateien anlegen: header1.php, header2.php und header3.php. In diesen headerfiles stehen nun die zu wählenden CSS-Dateien. Z.B. könnte in der header1.php folgendes stehen:
<link rel="stylesheet" type="text/css" href="/link/zu/blau.css" title="Blau" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/rot.css" title="Rot" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/gelb.css" title="Gelb" media="screen" />
Der Link zur CSS-Datei muss von der index.php aus gesehen werden und nicht von dem jeweiligen headerfile. Die Angaben der zwei anderen alternativen CSS-Dateien macht insofern Sinn, dass im Opera und im Mozilla/Firefox die Styles auch im Browser gewechselt werden können ohne eine Cookie zu speichern (somit allerdings auch nur für die Zeit der Sitzung). Die header2.php müsste demnach etwa so aussehen:
<link rel="stylesheet" type="text/css" href="/link/zu/rot.css" title="Rot" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/blau.css" title="Blau" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="/link/zu/gelb.css" title="Gelb" media="screen" />
2. header.php
Diese headerfiles (header1.php, header2.php usw.) speichert man am besten zusammen mit der heruntergeladenen header.php in einem Verzeichnis ab, muss man aber nicht.
<?php
$stylefile = "/verzeichnis/mit/der/header";
$stylefile .= $style;
$stylefile .= ".php";
//hier wird eine header(stylenummer).php angegeben
//also zum Beispiel /verzeichnis/mit/der/header1.php
//das Verzeichnis ist relativ zur header.php
include $stylefile;
//und hier wird dann die jeweilige headerNr.php
//automatisch eingefügt
?>
Die header.php ist dafür da, die verschiedenen headerfiles an die Seite zu übermitteln. Ein headerfile hiesse z.B. header1.php für den Style Nr.1 und header2.php für den Style Nr.2. Am besten man legt die header.php mit den headerfiles, also header(stylnummer).php, in ein und dasselbe Verzeichnis. Dann würde die erste Zeile oben nur lauten:
$stylefile = "header";
3. cookie.php
Die cookie.php speichert man am besten im Hauptverzeichnis der Webseite, also dort, wo die index.php liegt.
Der Inhalt:
<?php
$total_styles = 3;
//die Anzahl der vorhandenen Styles
$default_style = 1;
//der Standartstyle, wenn die Seite zum ersten mal besucht wird
if (isset($_REQUEST['newstyle'])) {
$newstyle=(int)$_REQUEST['newstyle'];
if ( ($newstyle<1) OR ($newstyle>$total_styles) )
$newstyle=$default_style;
} elseif (isset($_REQUEST['style'])) {
$newstyle=(int)$style;
if ( ($style<1) OR ($style>$total_styles) )
$newstyle=$default_style;
} else $newstyle=$default_style;
//hier wird ein evtl. gesetztes Cookie
//ausgelesen und ueberprueft,
//ob einer und wenn, welcher Style gewaehlt wurde
$style=$newstyle;
setcookie ('style', "", time() - 3600);
setcookie('style',$newstyle,time()+(86400*365),'/');
setcookie('style', $newstyle,time()+(86400*365),'/','.www.deineseite.de');
$style=$newstyle;
//ein Cookie namens "style" mit einer Lebensdauer von
//einem Jahr und dem gewaehlten Style wird gesetzt
?>
In dieser Datei muss die Anzahl der vorhanden und zu wechselnden Styles, sowie der Standartstyle eingestellt werden. Der Standartstyle ist jener welcher, den der Besucher sieht, wenn er das erste mal die Seite besucht oder seine Cookies gelöscht hat. Ebenso sollte in der Datei auch die Domain (www.deineseite.de) eingetragen werden, von der das Cookie stammt.
4. index.php
Wie bindet man das alles nun in die Seite ein?
Ganz einfach:
als erstes noch vor der DOCTYPE-Angabe also in die allererste Zeile wird die cookie.php includiert mit:
<?php include('cookie.php'); ?>
Diese muss deswegen in die erste Zeile, weil das sonst mit den Cookies nicht klappt.
Die header.php muss aber auch noch irgendwo hin. Diese fügt man einfach da ein, wo sonst die Angabe für die CSS-Datei war (weil dort wird es ja auch wieder durch die header.php reingeschrieben):
<?php include('/link/zur/header.php'); ?>
Um zwischen den Styles nun zu switchen, fügt man solche Links auf der Seite ein:
<a href="index.php?newstyle=1">verdammt cooler Style</a><br />
<a href="index.php?newstyle=2">boa, noch geilerer Style</a><br />
<a href="index.php?newstyle=3">Isch krieg 'ne Krise, best style ever seen on this world</a>
Fertig.
5. Beispiel
Hier auf yablo.de sieht das ganze so aus.
Meine Datein in der Verzeichnisstruktur ist in etwa so angelegt:
/ein/paar/server/pfade/www.yablo.de/public_html/
Hier liegen die index.php und die cookie.php.
/ein/paar/server/pfade/www.yablo.de/public_html/headerfiles/
Hier liegen header.php, header1.php, header2.php und header3.php.
/ein/paar/server/pfade/www.yablo.de/public_html/css/parzifal/parzifal.css
/ein/paar/server/pfade/www.yablo.de/public_html/css/gruen/gruen.css
/ein/paar/server/pfade/www.yablo.de/public_html/css/einfach/einfach.css
Hier befinden die einzelnen CSS-Dateien.
Meine index.php oder das template:
<?php include('cookie.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<meta name="generator" content="XE/3 0.6" />
<title>YaBlo</title>
<meta http-equiv="Content-Type" content="text/html;
charset='iso-8859-1'" />
<meta name="title" content="YaBlo" />
<meta name="author" content="Trencavel" />
<meta name="publisher" content="Trencavel" />
<meta name="copyright" content="YaBlo" />
<meta name="revisit" content="after 3 days" />
<meta name="description" content="YaBlo" />
<meta name="abstract" content="Weblog von Trencavel" />
<meta name="page-topic" content="Weblog" />
<meta name="audience" content="all" />
<meta name="robots" content="index,follow" />
<?php include('./headerfiles/header.php'); ?>
<div id="header">
<!-- end of 'header' --></div>
...
Meine headerfiles liegen im Verzeichnis (von der index.php aus gesehen) /headerfiles.
Meine header.php zeigt nun auch, das meine headerfiles (z.B. header1.php) im gleichen Verzeichnis wie die header.php liegen:
<?php
$stylefile = "header";
$stylefile .= $style;
$stylefile .= ".php";
include $stylefile;
?>
Meine cookie.php sieht so aus:
<?
$total_styles = 3;
$default_style = 3;
if (isset($_REQUEST['newstyle'])) {
$newstyle=(int)$_REQUEST['newstyle'];
if ( ($newstyle<1) OR ($newstyle>$total_styles) )
$newstyle=$default_style;
} elseif (isset($_REQUEST['style'])) {
$newstyle=(int)$style;
if ( ($style<1) OR ($style>$total_styles) )
$newstyle=$default_style;
} else $newstyle=$default_style;
//hier wird ein evtl. gesetztes Cookie ausgelesen und ueberprueft,
//ob einer und wenn, welcher Style gewaehlt wurde
$style=$newstyle;
setcookie ('style', "", time() - 3600);
setcookie('style',$newstyle,time()+(86400*365),'/');
setcookie('style',$newstyle,time()+(86400*365),'/','.www.yablo.de');
$style=$newstyle;
?>
Meine header1.php:
<link rel="stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/parzifal/parzifal.css" title="Parzifal" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/gruen/gruen.css" title="Gruen" media="screen, projection" />
</head>
<body>
header2.php:
<link rel="stylesheet" type="text/css" href="./css/gruen/gruen.css" title="Gruen" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/parzifal/parzifal.css" title="Parzifal" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
</head>
<body>
und die header3.php:
<link rel="stylesheet" type="text/css" href="./css/parzifal/parzifal.css" title="Parzifal" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/gruen/gruen.css" title="Grün" media="screen, projection" />
<link rel="alternate stylesheet" type="text/css" href="./css/einfach/einfach.css" title="Einfach" media="screen, projection" />
</head>
<body>
Änderungen die evtl. angepasst werden müssen, hab ich fett geschrieben. Wie man sieht hab ich in den headerfiles nicht nur auf die CSS-Dateien verwiesen, sondern auch gleich den End-head- und den Anfang-body-Tag mit eingefügt und aus der index.php herausgenommen. Warum steht im nächsten Kapitel.
Da ich mir überlegt habe, dass es auf meiner Seite wohl nicht nur bei 3 Styles bleiben wird, hab ich mich für eine Auswahlliste entschieden. Die sieht so aus:
<form action="">
<select name="menu" size="1" onchange="javascript:parent.location=this.form.menu.options[this.form.menu.selectedIndex].value;">
<option>Style</option>
<option></option>
<option value="index.php?newstyle=3">Parzifal</option>
<option value="index.php?newstyle=2">Gruen</option>
<option value="index.php?newstyle=1">Einfach</option>
</select></form>
6. Komplette Layoutänderungen
Der Vorteil dieser Styleswitch-Variante: Man kann hier nun das komplette Layout oder sogar den Inhahlt der Seite wechseln. Das einzige was man machen muss: Alles, was bis jetzt unterhalb des
<?php include(header.php) ?>stand, löschen und in ein headerfile (header1.php) eintragen. Nun könnte ich eine anderes headerfile (header2.php) anlegen mit dem neuen Inhalt. Und schon kann man zwischen beiden Inhalten oder Layouts wechseln. Man könnte es aber auch nicht nur bei den headerfiles belassen, sondern auch noch footerfiles, navifiles, menufiles oder sturzbetrunkenfiles anlegen und nach oben beschriebener Weise einfügen. Je nach dem!
Viel Spass!
Ach ja, ich weiss nicht, ob und wieviel ich Support geben kann, da ich von dem Zeug so gut wie keine Ahnung habe.:-/
Neuer Styleswitcher
Da ja, wie schon erwähnt der der Javascript-Styleswitcher nicht so richtig funktionierte, hab ich mir gezwungenermassen ein paar PHP-Switcher angeschaut. Ein paar zusammengerührt und geschüttelt einen neuen daraus ge- und hier eingebaut. Es dürfte jetzt mit jedem Browser funktionieren, Cookies und Javascript (wegen der Auswahlliste) vorausgesetzt.
Da alle vorhandenen im Netz gefundenen Switcher entweder nicht oder nicht meinen Bedürfnissen entsprechend funktionieren (warum auch immer), allgemeine und spezielle Vorgehensweisen vermischen oder einfach nur scheisse dokumentiert sind (zumindest für so einen “Nur-mal-so-an-vorhandenen-Codes-Rummprogrammierprobierer” wie mich), werde ich demnächst wohl ein eigenes kleines Tutorial für den hier verwendeten Switcher schreiben.
Styleswitcher
Wie angekündigt, gibt es nun einen Styleswitcher
... aber …
so richtig funktioniert der wohl nicht. Normalerweise wird über den Switcher per Javascript der Style ausgewählt und ein dementsprechendes Cookie abgelegt, damit man den ausgewählten Style bei der nächsten Sitzung nicht neu wählen muss. Funktioniert tadellos beim Firefox (und ich vermute bei allen anderen geckobasierten auch). Nur klappt das beim IE und Opera wohl nicht und da ich von JS nun überhaupt keinen Schimmer hab, weiss ich auch nicht wieso.
Eine von mir vorher präferierte Variante per PHP und ‘nem Cookie hat leider gar nicht funktioniert. Da scheinen sich das Switcher-Script mit irgendeinem anderen Script vom XE/3 zu beissen.
Ergo: Ich lass den JS-Switcher vorerst drin und schau, ob ich (oder besser jemand, der Ahnung hat ;-)) das PHP-Teil zum Laufen bekommt.
P.S.: Hab auch gleich einen neuen kleinen ganz einfachen und hellen Style eingefügt – tageslichtkompatibel ;-)
Style: Parzifal
So, nach einigem Gebastel ist mein neuer Style nun online. Passt zwar thematisch nicht wirklich … aber egal. Es handelt sich um ein Parzifal-Thema (hier benutzt: Wolfram von Eschenbach: Parzival, Band 1, Cod. Pal. germ. 339 aus dem Besitz der Universitätsbibliothek Heidelberg).
Alle Nutzer von Opera und Mozilla (und dessen Abkömmlinge) können auch noch zum alten Style (grün) wechseln. Allerdings hab’ ich noch keine Cookies für die dauerhafte Auswahl – kommt aber noch.
Parzifalstyle powered by unbekannter spätmittelalterlicher Mönch,
gimp und einem Editor Deiner Wahl.
Wie gewünscht
Aber mit TB. Nur um die Funktion zu nutzen.:-D
Trackback-Test
Hm. Das nenn ich Selbstreferenz. XE/3 meldet mir zwar einen Fehler, aber der Trackback scheint funioniert zu haben, wie man sieht.