Verschiedene CSS Files anbieten

  • Seite 1 von 5
07.08.2007 19:01 (zuletzt bearbeitet: 07.08.2007 19:02)
#1 Verschiedene CSS Files anbieten
Mi
User
Wiedermal eine etwas schwierig zu erklärende Frage von mir^^

Verschiedene Designs auf einer Seite anzubieten ist ja mit JavaScript möglich. Es besteht eine Auswahl zwischen zwei verschiedenen CSS Files. Eines davon muss dann auf einem externen Webspace liegen, das andere habe ich unter Admin --> Layout --> Farben & Schrift --> CSS direkt haken.

Das ist das JavaScript:
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<title>JavaScript</title>
<link id="style" type="text/css" rel="stylesheet"
href="style-1.css">
<script type="text/javascript">
function change_style(n) {
if(n == 1) {
document.getElementById('style').href = "style-1.css";
document.getElementById('heading').innerHTML = "Style 1";
return;
}
if(n == 2) {
document.getElementById('style').href = "style-2.css";
document.getElementById('heading').innerHTML = "Style 2";
return;
}
}
</script>
</head>
<body>
<h1 id="heading">Style 1</h1>
<p>Wählen Sie:
<a href="javascript:change_style(1)">Style 1</a><br>
<a href="javascript:change_style(2)">Style 2</a>
</p>
</body>
</html>

Entnommen aus http://www.professionelle-websites.de/k07l13.htm


Nun müsste man ja für jede Seite immer wieder neu auswählen. Wäre es da nicht möglich, mittels Cookie dies zu unterbinden? Also praktisch dass man nur einmal auswählen muss und es bleibt dann für den gesamten Forenaufenthalt.
Wenn ja - wie?

 Antworten

 Beitrag melden
07.08.2007 19:04
#2 RE: Verschiedene CSS Files anbieten
avatar
User


Ja, das ist möglich. Siehe hier: http://www.html-world.de/artikel/art_j15.php
Das sollte helfen.
Grüße


 Antworten

 Beitrag melden
08.08.2007 00:51
#3 RE: Verschiedene CSS Files anbieten
Mi
User

Danke für den Link.
Es funktioniert leider wieder nicht so, wie es soll^^ Ich muss sagen, dass ich mich mit JavaScript nicht wirklich gut auskenne..
Ich habe jetzt schon verschiedenes versucht, aber immer wieder springt das Layout um.

Wie würde der Code denn mit dem Cookie Code zusammen aussehen? Oder muss der gar nicht in diesen Code (Ich meine jetzt das JavaScript) eingebaut werden?


 Antworten

 Beitrag melden
08.08.2007 10:15 (zuletzt bearbeitet: 08.08.2007 10:16)
#4 RE: Verschiedene CSS Files anbieten
avatar
User
War doch etwas komplizierter als gedacht...
Das Script kommt in das obere Leiste Template zwischen <head> </head>. Es liest bei jedem Aufruf der Seite das gespeicherte Cookie 'style' und setzt den Style dann entsprechend. Du kannst weitere Styles hinzufügen indem du in die Variable styles weitere Felder hinzufügst (rot markiert). Das grün markierte legt das Verfallsdatum des Cookies fest, im Moment 1 Jahr.

<script language="Javascript">
var a = new Date();
a = new Date(a.getTime() +1000*60*60*24*365);
var styles = new Array();
styles[0] = 'style.css';
styles[1] = 'http://..... style2.css';


if(document.cookie) {
var c = document.cookie;
var foundstyle = false;
/* Cookievariablen ermitteln */
while(true) {
var i1 = c.indexOf('=');
var i2 = c.indexOf(';');
/* Falls Semikolon am Ende fehlt */
if(i2 < 0)
i2 = c.length;
var cookiename = c.substring(0, i1);
var cookiewert = c.substring(i1+1, i2);
/* Leerzeichen vor Name entfernen */
var i3 = cookiename.lastIndexOf(' ');
if(i3 > -1)
cookiename = cookiename.substring(i3 + 1);
/* Style festlegen */
if(cookiename == 'style') {
try {
var n = parseInt(cookiewert);
document.write('<link id="style" type="text/css" rel="stylesheet" href="' + styles[n-1] + '">');
foundstyle = true;
}
catch(err) {}
break;
}
/* Nächstes Cookie oder aufhören */
if(c.length > i2)
c = c.substring(i2+1);
else
break;
}
/* Standardstyle im Falle von Fehler oder keinem gewählten Style */
if(!foundstyle)
document.write('<link id="style" type="text/css" rel="stylesheet" href="style.css">');
}

function change_style(n) {
document.getElementById('style').href = styles[n-1];
document.getElementById('heading').innerHTML = 'Style ' + n;
/* Cookie setzen */
document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';
return;
}
</script>
<noscript>
<!-- Standardstyle falls Scripts nicht aktiviert sind -->
<link id="style" type="text/css" rel="stylesheet" href="style.css">
</noscript>


Dort wo die Styles ausgewählt werden sollen kommt dein restlicher Code hin:

<h1 id="heading">Style 1</h1>
<p>Wählen Sie:
<a href="javascript:change_style(1)">Style 1</a><br>
<a href="javascript:change_style(2)">Style 2</a></p>


Grüße

 Antworten

 Beitrag melden
08.08.2007 23:53
#5 RE: Verschiedene CSS Files anbieten
Mi
User

Leider funktioniert es immer noch nicht ganz so, wie es soll. Ich bin mir jetzt nur nicht sicher, ob es an meinem Browser liegt oder ob es allgemein nicht funktioniert. In meinem Testforum bin ich zu diesem Ergebnis gekommen. Style2 springt aber immer wieder um auf Style1..


 Antworten

 Beitrag melden
09.08.2007 01:38
avatar  Dome
#6 RE: Verschiedene CSS Files anbieten
Do
User

Ich Habe es wie Sabine99 gemacht und es tut wunderbar.


 Antworten

 Beitrag melden
09.08.2007 02:07
avatar  Vitalis
#7 RE: Verschiedene CSS Files anbieten
avatar
Profi

Der Vorschlag von Sabine ist leider nur für eine Seite anwendbar, da sich bei der nächsten Seite, welche aufgerufen wird, die Arry von vorne beginnend ablaufen wird, sodass diese Funktion leider nur bedingt funktioniert.

Eine Lösung wäre es, dass es in die Cookies der Clienten geschrieben wird, dann könnte es gehen. Das beste wäre aber weiterhin, dass es eine Auswahlmöglichkeit bei den Usern gibt, wodurch dann diese Auswahl in der Datenbank festgehalten wird.
Genauer erläutert: Admin - Punkt 3


 Antworten

 Beitrag melden
09.08.2007 09:51
#8 RE: Verschiedene CSS Files anbieten
avatar
User


In Antwort auf:
Der Vorschlag von Sabine ist leider nur für eine Seite anwendbar, da sich bei der nächsten Seite, welche aufgerufen wird, die Arry von vorne beginnend ablaufen wird, sodass diese Funktion leider nur bedingt funktioniert.


Sofern das Script in das Template Obere Leiste geschrieben wird, wird auf jeder Seite das Cookie ausgelesen und der Style entsprechend gesetzt!

In Antwort auf:
Eine Lösung wäre es, dass es in die Cookies der Clienten geschrieben wird, dann könnte es gehen.


Genau das wird ja gemacht.

function change_style(n) {
document.getElementById('style').href = styles[n-1];
document.getElementById('heading').innerHTML = 'Style ' + n;
/* Cookie setzen */
document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';
return;
}


 Antworten

 Beitrag melden
09.08.2007 10:04
#9 RE: Verschiedene CSS Files anbieten
avatar
User


@Mithrandir
ich weiß warum es bei dir nicht funktioniert. Du hast das 'heading' Element weggelassen. Daher muss die Funktion change_style bei dir so aussehen:

function change_style(n) {
document.getElementById('style').href = styles[n-1];
/* Cookie setzen */
document.cookie = 'style=' + n + '; expires=' + a.toGMTString() + ';';
return;
}


Es gab einen Fehler an dieser Stelle, daher kam es nie zum Cookie-setzen.

Schau mal hier: http://testforum.f1tippclub.de, dort funktioniert es.


 Antworten

 Beitrag melden
09.08.2007 12:25
#10 RE: Verschiedene CSS Files anbieten
Mi
User

Jetzt funktioniert es einwandfrei. Vielen Dank euch allen.


 Antworten

 Beitrag melden
09.08.2007 13:54
avatar  Dome
#11 RE: Verschiedene CSS Files anbieten
Do
User

Hab nun doch ein Problem:

Die CSS wird nicht richtig übernommen. Manche Stellen im Forum werden anders eingefärbt, als sie eigentlich sein sollten -hab keine Ahnung warum.

In meinem "Testboard" sind die Farben perfekt, aber wenn ich die CSS ins andere Forum mit dem script lade ist das Layout anders. - Dabei ist der Code zu 100% der gleiche.

Kann mir jemand helfen?

In Antwort auf:
{{meta_refresh}}
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<META NAME="keywords" CONTENT="{{hpmtext}}">
<META NAME="description" CONTENT="{{hpmtitle}}">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<link rel="stylesheet" type="text/css" href="{{link_css}}">
<link rel="alternate" type="application/rss+xml" title="{{hpmtitle}}" href="feed/all.rss">
<TITLE>{{html_title}}</TITLE>

Diesen Teil hänge ich ja vor das ganze Script oder? Da wenn ich es hinten drang hänge das Forum "verschwunden" ist.


 Antworten

 Beitrag melden
09.08.2007 14:45
avatar  Bengt
#12 RE: Verschiedene CSS Files anbieten
avatar
User

bist du vielleciht im admin von css hacken auf fabren direkt ändern gegangen udn ahst mla as verändert? dann werden die farebn nämlich wieder aus der datenbank gelesen.



mit freundlichen Grüßen, Bengt


 Antworten

 Beitrag melden
09.08.2007 15:03
avatar  Dome
#13 RE: Verschiedene CSS Files anbieten
Do
User

Ich verseh dich nicht ganz. Ich habe die CSS gehackt und diese ist meine Standart-CSS und diese tut auch wunderbar.

Die anderen zwei CSS-Vorlagen hab ich auf einem Server die mit dem Script geladen werden. Die Farben werden auch zum Teil übernommen, aber eben nicht alles. So ist z.B. der Hintergrund bei aktive User in hell-blau, obwohl er schwarz sein sollte.

Im Testboard in dem die CSS als Standart aktiv ist sieht es hingegen aus wie gewünscht.


 Antworten

 Beitrag melden
10.08.2007 18:53
avatar  Dome
#14 RE: Verschiedene CSS Files anbieten
Do
User

Nun tut es wunderbar. Danke nochmal für das Script.


 Antworten

 Beitrag melden
16.11.2007 13:00 (zuletzt bearbeitet: 16.11.2007 13:01)
#15 RE: Verschiedene CSS Files anbieten
avatar
User

Hi Mithrandir,
kommt etwas spät, aber vielleicht findest Du hier noch einige Möglichkeiten:

Verschiedene Hintergrundwechsler für Forum und Homepage

Gruss
Wolf

Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!