Zwei .css in einem Design - mit einem Klick wechseln

4L4L

4L4L

Well-known member
ID: 199220
L
24 April 2006
1.921
101
Hallo,

hoffe der Titel beschreibt das Problem ein bisschen.
Foglende Sache:
Ich habe für ein Design 2 Stylesheets, die jeweils die Farbe des Designs ändern.
Ich will, dass der Besucher mit einem Klick das Design ändern kann und danach immernoch auf der selben Seite ist.

Denke mit Variabeln in PHP ist es machbar. Hinzu kommt aber, dass ich die Links mit mod_rewrite Suma freundlichen machen will.
Jemand eine Idee/Scriptcode wie ich das machen kann?
Wäre sehr dankbar. Hab bei Google nichts sinnvolles gefunden.

Vielen Dank im Voraus.

Grüße
 
Die Info, welches Stylesheet gewählt wurde, kannst du doch in einer Session abspeichern, sodass das in keinem Link auftaucht.
 
theHacker schrieb:
Die Info, welches Stylesheet gewählt wurde, kannst du doch in einer Session abspeichern, sodass das in keinem Link auftaucht.
Zum Vergrößern anklicken....

Hmm, stimmt wäre ne Möglichkeit, aber dann müsst ich das Script ganz schön abändern. Trotzdem danke!
Gibts nicht ne einfachere Möglichkeit?


Lg
 
Oder du bietest diesen "Service" nur für User, die dir auch vertrauen und Cookies zulassen. Dann hast du auch den Vorteil, falls Leute länger auf der Seite sind, ohne eine Aktion, dass dann immer noch das zu vor ausgewählte Design gewählt ist. Allerdings müssen die User dafür Cookies zulassen.

Diese beiden Methoden könnte man auch kombinieren und checken, falls der Cookie nicht gesetzt werden kann bzw falls er nicht gesetzt ist, dann eben das Design in der Session zu speichern. So eine Session hält aber (glaube je nach Servereinstellung) nur 5-20 Minuten.

p.s.: viel abzuändern ist da nicht. Du musst nur ganz an den Anfang noch einen Code hinzufügen, die eine Variable definiert, die du dann in der aufgerufenen Datei an stelle des css-Dateinamen hinschreibst. Ist (in meinen Augen) ein Aufwand von vielleicht 15 Minuten
 
sTyL3R schrieb:
Hmm, stimmt wäre ne Möglichkeit, aber dann müsst ich das Script ganz schön abändern. Trotzdem danke!
Gibts nicht ne einfachere Möglichkeit?
Zum Vergrößern anklicken....
Spontan hab ich jetzt 3-4 Zeilen Code im Kopf. Einfacher gehts sicherlich nicht mehr :hö:
PHP: 
if(!isset($_SESSION['css']))
  $_SESSION['css'] = 1;

$smarty->assign('cssfile', $_SESSION['css'] == 1 ? 'layout1.css' : 'layout2.css');
Ersetzte $_SESSION durch $_COOKIE und du hast QuArK007's Variante.

Und was hättest du jetzt alles abgeändert? :ugly:

@QuArK007:
PHP's Sessions werden je nach Einstellung eh über Keks gesteuert, also is der Unterschied nicht besonders groß.
 
Du kannst auch mittels Javascript die entsprechenden CSS-Dateien austauschen oder einfach das Element manipulieren.
 
scriper schrieb:
Du kannst auch mittels Javascript die entsprechenden CSS-Dateien austauschen oder einfach das Element manipulieren.
Zum Vergrößern anklicken....

Nochmal vielen Dank an die anderen Vorschläge. Bin jetzt selber unentschlossen wie ich es mache. Werd mir nachher nochmal das Script angucken ob es so einfach zu machen ist.

@scripter: hast du zufällig ein Link oder den Code wie man das mit JS machen kann? Und wie kann man das Element manipulieren?
Bin in PHP und JS nicht unbedingt der Könner :roll:

Lg
 
scriper schrieb:
Du kannst auch mittels Javascript die entsprechenden CSS-Dateien austauschen oder einfach das Element manipulieren.
Zum Vergrößern anklicken....
Das sieht dann aber hässlich aus, wenn das Design "flackert". Ich finde, sowas sollte man auf Server-Seite machen und dem User gar nicht mitkriegen lassen, wie es läuft.
 
Werde dann glaub ich die Variante mit der Session nehmen. Scheint mir am saubersten und einfahcsten zu sein.

Vielen Dank nochmal.

Grüße
 
sTyL3R schrieb:
Hmm, stimmt wäre ne Möglichkeit, aber dann müsst ich das Script ganz schön abändern. Trotzdem danke!
Gibts nicht ne einfachere Möglichkeit?


Lg
Zum Vergrößern anklicken....
moment mal, wenn jede URL angepasst werden muss, da eine Angabe über das Template reinkommt, ist das doch deutlich mehr Arbeit als nen Cookie setzen und ne if für die Ausgabe des Stylesheets zu machen.


theHacker schrieb:
Das sieht dann aber hässlich aus, wenn das Design "flackert". Ich finde, sowas sollte man auf Server-Seite machen und dem User gar nicht mitkriegen lassen, wie es läuft.
Zum Vergrößern anklicken....
Wenn man per JS regelt, dass alle Grafiken vorgeladen sind bevor das neue Stylesheet aktiviert wird sieht man kein Flackern.


evident schrieb:
Würde dir empfehlen, dass ganze mit JS / Ajax zu machen...

Beispiel siehste ja hier:

https://www.kulturbanause.de/

da kann man das Design auch sofort ändern und bleibt auf der Seite...

-Flori-
Zum Vergrößern anklicken....

Mit Ajax hat das mal gar nichts zu tun! Nicht immer gleich Ajax rufen, warum wird nur immer Ajax geschriehen von denen, die am wenigsten verstehen wie etwas funktioniert? :think:
Das wird mit JavaScript und Cookies umgesetzt genau so wie ich es mir denke, nur mit dem Fehler das es keinen Fallback hat, wenn Js deaktiviert ist, so weit wird meist nicht gedacht.
 
ice-breaker schrieb:
Wenn man per JS regelt, dass alle Grafiken vorgeladen sind bevor das neue Stylesheet aktiviert wird sieht man kein Flackern.
Zum Vergrößern anklicken....
Dann komm ich mit: Was is wenn der Browser nicht alles im Cache halten will/kann? - ok, jetzt wirds abenteuerlich :mrgreen:, aber sollte verdeutlichen, dass der JS-Weg in meinen Augen etwas leicht überdimensioniert für einstellig Anzahl PHP-Code.
ice-breaker schrieb:
Nicht immer gleich Ajax rufen, warum wird nur immer Ajax geschriehen von denen, die am wenigsten verstehen wie etwas funktioniert? :think:
Zum Vergrößern anklicken....
"AJAX" is das Zauberwort für alles, was komisch und neu is.
Will man das Feature selber beschreiben, wirft man den Allrounder "Web 2.0" in den Raum. Für die Beschreibung der technischen Realisierung is "AJAX" der passende Begriff zum Wild-in-den-Raum-schmeißen :ugly:
 
ice-breaker schrieb:
Mit Ajax hat das mal gar nichts zu tun! Nicht immer gleich Ajax rufen, warum wird nur immer Ajax geschriehen von denen, die am wenigsten verstehen wie etwas funktioniert? :think:
Zum Vergrößern anklicken....

Ist mir schon bewusst, dass es eher reines JS ist...
ging mir ja auch nur eher darum, dass es um den Effekt geht, andere Inhalte (Bilder, Stylesheets, ...) zu laden, ohne die komplette Seite neu laden zu müssen... und für Text funktioniert sowas bekanntlich ja ganz gut per HTTP-Request mit Ajax.

Also leg hier bitte nicht gleich jedes Wort auf die Goldwaage!

-Flori-
 
Also alle Bilder auf der Seite belaufen sich auf ca 200kb. Denke da wirds so oder so nicht zu einem flackern kommen, außer es kommen noch Leute mit nem 56k Modem.

Also so wie auf oben verlinkten Seite Kulturbanause will ich es haben :)
Hat da zufällig wer einen Code oder einen Link mit Anleitung wie es geht?
Edit: Gut google liefert einige Ergebnisse mal gucken ob ich was finde...

Wäre über Hilfe dankbar.

Grüße
 
jop, hatte den Link auch gefunden. Hab mir für die JS Methode entschieden und funktioniert auch einwandfrei.

Danke an alle für die Hilfe.

Grüße
 
evident schrieb:
Würde dir empfehlen, dass ganze mit JS / Ajax zu machen...
Zum Vergrößern anklicken....

Würde ich insgesamt auch eher von abraten.

Viele Leute sind immer noch misstrauisch gegenüber JS und haben es nicht aktiviert. Ausserdem, im Zuge von "barrierearm", was bietest du denn den Leuten eben an, die kein Javascript benutzen?

Lösungen wirst du bestimmt auch finden, wenn du dich mal auf https://www.csszengarden.com/ umschaust.

Die Lösung mit PHP finde ich am saubersten, alles was Serverseitig abläuft hat Vorteile, weil du nicht darauf achten musst, was clientseitig zur Verfügung steht ;)

Viele Grüße
Schmitzo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

T
Display Design
Antworten
0
Aufrufe
1K
tbraun1997
T
Chrisano
Neuigkeiten rund um Klick-Else.de
Antworten
8
Aufrufe
4K
Zocky
Z
Powerflower
    • Like
Klick-kitty, Lose-box, Klickfliessband
Antworten
9
Aufrufe
3K
rainpaid
rainpaid
P
Klick auf Fernsehprogramm im Widget führt zu einem Seitenaufruf von Klamm
Antworten
1
Aufrufe
4K
klamm
klamm
Zurück
Oben