CSS "variabel" laden

bigfraggle

Neuer Benutzer
Mitglied seit
15.01.2010
Beiträge
4
Reaktionspunkte
0
Hallo zusammen.

Habe mir über folgendes schon öfters Gedanken gemacht, aber noch keine ganz saubere Lösung hinbekommen:

Ich möchte für eine Seite zwei Designs machen. Eines soll eher hell, das andere eher dunkel sein. Nun müssten auf der Page Buttons zu finden sein, mit denen man das Design wechseln kann. Button 1: hell.css wird geladen, Button 2: dunkel.css wird geladen.

So ähnlich wie hier: http://g4tv.com (rechts etwas unscheinbar über dem Navigantionspunkt Community)

Wie bekommt man sowas hin? Und vor allem: Wie sieht es hier mit Cookies aus, damit die Auswahl bestehen bleibt?

Gruß
bigfraggle
 

MisterSmith

Bekanntes Gesicht
Mitglied seit
09.06.2009
Beiträge
4.585
Reaktionspunkte
189
AW: CSS

Habe eigentlich nichts mit Javascript oder HTML am Hut aber vielleicht hilft dir das hier weiter:
<ul id="theme-toggle">
<li>
<button class="dark" title="Dark Theme">Dark</button>
</li>
<li>
<button class="light" title="Light Theme">Light</button>
</li></ul></div>
Meine Vermutung ist, das es mit diesem Clientscriptoptimizer und mit dieser URL bewerkstelligt wird:
g4tv.com/ClientScriptOptimizer.ashx
Benutzung dieser URL auf eigene Gefahr, denn ich spekuliere diese URL wird möglicherweise erst beim aufrufen dieser G4tv-Seite generiert, kann aber auch komplett Falsch liegen, wie gesagt von Webprogrammierung hab ich eigentlich keinen Plan. ;)
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.320
Reaktionspunkte
8.543
AW: CSS

Ich würde das mit einem Cookie und einer Serverscriptsprache bewerkstelligen.

Die Serverscriptsprache (zB PHP) schreibt dann je nach gesetztem Wert im Cookie

<link rel="stylesheet" type="text/css" href="light.css">

oder

<link rel="stylesheet" type="text/css" href="dark.css">

an die entsprechende Stelle im Seiten Header.
 
TE
B

bigfraggle

Neuer Benutzer
Mitglied seit
15.01.2010
Beiträge
4
Reaktionspunkte
0
AW: CSS

Danke soweit, habe jetzt dieses hier gefunden und getestet. Scheint zu funktionieren...

Folgender Code sollte ganz am Anfang (vor der Doctype Angabe) der HTML-Datei angebracht werden:

Code:
<?php
  if(isset($_GET['style'])) {
  setcookie("stylecookie", $_GET['style'], time()+3600, "/");
  }
  elseif(!isset($_GET['style'])) {
  if(isset($_COOKIE['stylecookie'])) {
  $style = $_COOKIE['stylecookie'];
  }
  else {
  $style = 'style1';
  }
  }
  ?>

Weiter unten im Kopfbereich kommt die zweite Angabe:

Code:
<link rel="stylesheet" type="text/css" href="css/<?php echo $style?>.css">

Und auf die Seite wo die verschiedenen Styles ausgelöst werden, kommen folgende Angaben:

Code:
<a href="<?php echo $_SERVER['PHP_SELF']?>?style=style1">Design 1</a>
  <a href="<?php echo $_SERVER['PHP_SELF']?>?style=style2">Design 2</a>

Kann man sowas ruhig nutzen? Oder gibt es da wegen dem $_GET Sicherheitsrisiken?
 

Onlinestate

Bekanntes Gesicht
Mitglied seit
31.08.2002
Beiträge
3.042
Reaktionspunkte
102
AW: CSS

Naja für solche Einstellungssachen ist Get doch okay. Ist mir doch bumse, wenn jemand weiß welche Farbeinstellung ich verwende. Oder will damit jemand auf meine Lieblingsbiermarke schließen?
Von der Länge her gibts auch keine Probleme und jemand, der Cookies unterbindet kann immer noch sein Lieblings-Design haben, weil er die Info in die Adressleiste tippen kann. Sollte dann aber auch bei Links mitgegeben werden (aber ich glaub das geht automatisch).
 
Oben Unten