CSS-Switcher?

Hallo Ill,

ich glaube, ich habe was du suchst - ist aber kein Plugin, sondern Code, den du einfügen mußt.

Diese Dateien mußt du hochladen:
rot.css
gruen.cee

Ich gehe davon aus, das rot.css dein Standard ist und gruen.css die Variante

Dies fügst du in die header.php ein, und war ganz oben, noch über dem Doctype!

<?php
if(isset($_GET['style']))
{
setcookie("stylekeks", $_GET['style'], time()+3600, "/");
$style = $_GET['style'];
}
else
{
if(isset($_COOKIE['stylekeks']))
{
$style = $_COOKIE['stylekeks'];
}
else
{
$style = 'rot';
}
}
?>

In der haeder.php kommentierst du diese Zeile wie folgt aus:

<!--<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />-->

...und trägst das hier ein:

<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/[dein_theme]/<?php echo $style?>.css" media="screen"/>


<link rel="alternate stylesheet" type="text/css" href="http://[deine blog-url]/wp-content/themes/[dein_theme]/rot.css" title="Standard" media="screen"/>
<link rel="alternate stylesheet" type="text/css" href="http://[deine blog-url]/wp-content/themes/[dein_theme]/gruen.css" title="Variante" media="screen"/>

Damit man die Styles auswählen kann trägst du in die Sidebar noch irgendwo ein:

<h2>Style</h2>
<ul>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=rot">Standard</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=gruen">Variante</a></li>
</ul>

Es werden über das php-Script die css-Dateien ausgetauscht. Per Cookie wird "gemerkt", welches Style ausgewählt wurde. Beim nächsten Besuch des Blogs findet der Benutzer das Style vor, das er bei seinem letzten Besuch gesetzt hatte.
Wenn jemand Cookie ausgeschaltet hat, wird die Einstellung logischerweise nicht gemerkt.

Das Ganze kannst du dir ansehen in meinem BLOGhäuschen. Zum Testen auf die Schnelle habe ich nur mal für den mittleren Teil die Hintergrundfarbe geändert.

Zitat von copernica

Damit man die Styles auswählen kann trägst du in die Sidebar noch irgendwo ein:

HTML

<h2>Style</h2>
<ul>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=rot">Standard</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=gruen">Variante</a></li>
</ul>

Wie muss ich diesen Teil modifizieren, damit ich den Style auf jeder beliebigen Seite ändern kann ohne auf den Index umgeleitet zu werden?

Schieb :D - hat keiner eine Idee?

Ich würd das eher mit JavaScript lösen, schon allein weil man sich das Neuladen der Seite spart.

1. Angehängte Datei downloaden, Endung in .js ändern und im Head von deinem Theme einbinden
2. Die Stylesheets mit den Farbänderungen wie folgt einbinden (Beispiel für Rot):

<link rel="alternate stylesheet" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/rot.css" title="red" />

3. Links fürs Switchen nach folgendem Format einfügen:

<a href="javascript:void(null);" title="Rote Farbe" onclick="setActiveStyleSheet('red');return false;">

Und das wars auch schon. Das Neuladen ist nicht mehr nötig und der Link funktioniert von jeder Unterseite aus. Es lässt sich ja schon erkennen dass title aus dem link-Tag und der Parameter beim Link gleich sein müssen.

Gruß Jeriko

Danke, viel besser und vor allem schneller! Wer es testen will:
http://www.greensmilies.com/2006/12/03/hin…milies-aendern/

hiho,

*thread hervorhol*

ich habe eine style.css datei geschrieben die ich mit meinem wordpress 2.2.1
benutze in meinem theme-ordner. soweit so gut. ... ich beschreibe das theme
jetzt mal schnell: es ist meinetwegen alles dunkel und nur ausgelesene
bereiche (striche und border und so sachen) sind hell als 'absatz' dienlich.

nun möchte ich folgende neuerungen einbauen:

da ich viel mit den farben herumexperimentiert habe, weiss ich das der dunkle
ton mit insgesamt 4 hellen tönen gut zusammen passt und ansprechend
aussieht. somit möchte ich in der sidebar ein dropdown-menu einbauen
wo ich oder jeder besucher in jener dropdown-leiste aussuchen kann welche
der hellen farben nun aktiv sein soll.

das ganze geht über mehrere css dateien ... also style1.css, style2.css, etc.

nun mein problem:

hier im thread werden zwei varianten beschrieben wie man sowas machen
kann und beide hab ich nun nicht so ganz begriffen. bei dem einen muss
man manuell den pfad eintragen und somit ist es nicht universell. bei dem
anderen habe ich nicht verstanden wo denn die javascript datei hin soll und
ganz zu schweigen davon das da cookies und weiss der 'henker' was noch so
alles in der javascript datei drin steckt.

also aus diesem grunde frage ich jetzt ganz nett in die runde ob jemand
mir grob weiterhelfen kann um mein vorhaben zu realisieren ?

---

ich möchte jedoch folgende rahmenbedingungen festlegen: es gibt meinen
style-verzeichnis und darin liegen die php dateien etc. die ich geschrieben
habe und darin liegt momentan auch die style.css ... dort in jenes verzeichnis
sollen auch die anderen stylesheets rein. andere zusätzliche
style-verzeichnisse sind nicht gewünscht und nicht akzeptabel.

wenn sich noch wer die mühe macht und mir grob einen lösungsansatz
umschreibt für die dropdown-leiste dann wäre ich auch sehr zufrieden.

vielen dank im voraus.

greets

illmind

halbe lösung zum problem. scheiterung am cookie

hiho,

ich hab jetzt rumexperimentiert und und eine lösung gefunden den style per
dropdown menu auswechselt. ich poste hier die codesegmente der dateien
zum testen und nachvollziehen:

header.php ( im eigenen theme verzeichnis ):

<script language="javascript" src="wp-content/themes/test/styleswitch.js"></script>
<link rel="alternate stylesheet" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/one.css" title="one" />
<link rel="alternate stylesheet" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/two.css" title="two" />
<link rel="alternate stylesheet" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/three.css" title="three" />

styleswitch.js ( im eigenen theme verzeichnis ):

function surfto()
{
if (document.auswahlbox.links.selectedIndex=="1")
{
setActiveStyleSheet('one');
}
if (document.auswahlbox.links.selectedIndex=="2")
{
 setActiveStyleSheet('two');
}
if (document.auswahlbox.links.selectedIndex=="3")
{
setActiveStyleSheet('three');
}
}

sidebar.php ( im eigenen theme verzeichnis ):

<form name="auswahlbox">
<select name="links" onChange="surfto()">
<option>[ STYLE AUSWAHL ]
<option value="1">one
<option value="2">two
<option value="3">three
</select></form>

nun ich kann auf jeder seite direkt den style wechseln und das klappt
wirklich wunderbar. problem ist nur, das sobald eine neue seite
aufgerufen wird (zum beispiel eine seite mit kommentar einträgen), dann
wechselt der style leider zurück auf den standard zurück.

ich vermute ein cookie problem. ideen ?

greets

illmind

Ich suche so etwas ähnliches, die Auswahl soll aber ausschließlich im Backend stattfinden und in der Datenbank gespeichert werden.

Gibt es so etwas?

Hi, wenn ich die Methode von illmind anwende, dann funktioniert es nicht und Firebug spuckt den Fehler aus: surfto is not defined.

Woran kann das liegen? :(