per JavaScript das CSS definieren

ssyfrig · Post by **ssyfrig** » Wed 1. Dec 2004, 18:13

Hat das jemand schon realisiert oder kann mir helfen?

Ich möchte, dass der user das css auswählen kann und somit die Farben der Seite verändern.
Diese Auswahl sollte per cookie gespeichert werden, dass beim nächsten Besuch das gewünschte CSS angewendet wird.

Das Header Bild sollte auch angepasst werden. Ist das möglich? das ich unter Seitenlayout > Kopfzeile
einfach die CSS Klasse angebe welche ja dann verändert werden kann.

Hoffe das ist verständlich.

Gruss Sven

brans · Post by **brans** » Wed 1. Dec 2004, 18:41

http://www.csszengarden.com

diese Seite ist zu 100% so gestaltet, wie du das hier beschreibst... schau dir den Source an und du solltest schlauer sein.

ssyfrig · Post by **ssyfrig** » Wed 1. Dec 2004, 18:45

nicht ganz. Meine Einstellung wird nicht gespeichert.

Gruss Sven

brans · Post by **brans** » Wed 1. Dec 2004, 20:19

Ok das stimmt... aber mit den beiden folgenden Tuts sollte es wohl keine grösse Schwierigkeit mehr darstellen, oder ?

Cookies speichern und auslesen per Java Script:
http://www.drweb.de/javascript/cookies.shtml

Per Java Script den kompletten Style einer Page ändern:
evtl solltest du auch nach dem zugrundeliegenden Stylesheet-Switcher suchen, falls dir der bodyswitcher zu umfangreich ist.
http://www.alistapart.com/articles/bodyswitchers/

Hoffe diesmal konnte ich dir wirklich weiterhelfen

ssyfrig · Post by **ssyfrig** » Wed 1. Dec 2004, 20:42

cool, danke Dir. Sieht nach viel arbeit aus

Gruss Sven

brans · Post by **brans** » Wed 1. Dec 2004, 21:19

Ich finde eben nicht... das sollten normal nicht wesentlich mehr als 15 Minuten Arbeit sein diese Tuts zu verstehen und in deine Seite einzugliedern, vorausgesetzt natürlich, dass du die Stylesheets bereits fertig hast

.

Naja keine Ursache. Wenn du fertig bist, könntest du deine Seite ja vielleicht hier als Beispiel posten.

ssyfrig · Post by **ssyfrig** » Wed 1. Dec 2004, 22:42

To include the javascript file, you add a script element to the head of your document, making sure that it is put below all the style sheet link elements you have. The HTML would look like this:

<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>

wie kann ich das steuern? Wenn ich es unter Vorlagen>html head: hinterlege kommt es so raus ...

Code: Select all

<title>x x x test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../styleswitcher.js"></script>
<script src="phpwcms_template/inc_js/frontend.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="phpwcms_template/inc_css/frontend.css">
</head>

Danke & Gruss Sven

ssyfrig · Post by **ssyfrig** » Wed 1. Dec 2004, 22:48

auch ein guter link: http://www.stichpunkt.de/css/switch.html

ich habe es zum test extern geschaft jedoch (noch) nicht im phpwcms.

Gruss Sven

brans · Post by **brans** » Thu 2. Dec 2004, 09:40

index.php Linie 77-82 müssten meiner Meinung nach dann so:

Code: Select all

echo "<html>\n<head>\n<title>".$content["pagetitle"]."</title>\n";
echo '<meta http-equiv="Content-Type" content="text/html; charset=';
echo PHPWCMS_CHARSET."\">\n<script src=\"";
echo $phpwcms["templates"].'inc_js/frontend.js" type="text/javascript"></script>'."\n";
echo '<link rel="stylesheet" type="text/css" href="'.$phpwcms["templates"]."inc_css/".$block["css"]."\">\n";
echo $block["htmlhead"]."</head>\n\n<body".$content["body"].">\n";

aussehen, damit es funktioniert

(ich habe einfach die Originalposition des $block["htmlhead"] verändert, ohne weiter zu analysieren, ob das wirklich die richtige Variable ist, war meiner Meinung nach aber die einzige, die es sein könnte)

brans · Post by **brans** » Sun 5. Dec 2004, 16:27

hast du unterdessen mal was hinbekommen?

ssyfrig · Post by **ssyfrig** » Sun 5. Dec 2004, 17:06

Der Weg zum Erfolg

Schritt 1

Download der Datei styleswitcher.js vom http://www.alistapart.com/articles/alternate/

oder copy paste von hier:

Code: Select all

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Schritt 2

Anpassen der Datei index.php Linie 77-82

Code: Select all

echo "<html>\n<head>\n<title>".$content["pagetitle"]."</title>\n"; 
echo '<meta http-equiv="Content-Type" content="text/html; charset='; 
echo PHPWCMS_CHARSET."\">\n<script src=\""; 
echo $phpwcms["templates"].'inc_js/frontend.js" type="text/javascript"></script>'."\n"; 
echo '<link rel="stylesheet" type="text/css" href="'.$phpwcms["templates"]."inc_css/".$block["css"]."\">\n"; 
echo $block["htmlhead"]."</head>\n\n<body".$content["body"].">\n";

Schritt 3

Im backend unter admin > Vorlagen im html head hinzufügen

Code: Select all

<link rel="alternate stylesheet" type="text/css" href="../cssswitch/frontend2.css" title="wacky"/>
<script src="cssswitch/styleswitcher.js" type="text/javascript"></script>

Schritt 4
Im Artikeln oder Vorlage den Link hinterlegen ...

Code: Select all

<a href="#" 
onclick="setActiveStyleSheet('default'); 
return false;">change style to default</a>

<a href="#" 
onclick="setActiveStyleSheet('wacky'); 
return false;">change style to wacky</a>

fertig ...

Diese Funktion ist nicht von mir. Alle Infos und Rechte sind unter http://www.alistapart.com abrufbar.

Besten Dank an "brans" für seine Hilfe.

Beste Grüsse
Sven

##Edit am 23.01.2005 ##**************************
Hatte ein Schreibfehler im Link. Änderte paul zu wacky
************************************************

TAOG · Post by **TAOG** » Sun 5. Dec 2004, 18:41

man kann doch in der vorlage selber ein JS einbinden lassen. wieso wird in phpwcms rumgewurschtekt? geht das mit dem JS onload nciht?

brans · Post by **brans** » Sun 5. Dec 2004, 18:43

nein, weil die JS-Einbindung von WCMS vor den stylesheets erfolgt, für diesen StyleSheetSwitcher die JS aber nach allen anderen Daten eingebunden werden müssen.

TAOG · Post by **TAOG** » Mon 6. Dec 2004, 09:53

ok, gut zu wissen