Page 1 of 1
per JavaScript das CSS definieren
Posted: Wed 1. Dec 2004, 18:13
by ssyfrig
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
Posted: Wed 1. Dec 2004, 18:41
by brans
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.
Posted: Wed 1. Dec 2004, 18:45
by ssyfrig
nicht ganz. Meine Einstellung wird nicht gespeichert.
Gruss Sven
Posted: Wed 1. Dec 2004, 20:19
by brans
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
Posted: Wed 1. Dec 2004, 20:42
by ssyfrig
cool, danke Dir. Sieht nach viel arbeit aus
Gruss Sven
Posted: Wed 1. Dec 2004, 21:19
by brans
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.
Posted: Wed 1. Dec 2004, 22:42
by ssyfrig
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
Posted: Wed 1. Dec 2004, 22:48
by ssyfrig
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
Posted: Thu 2. Dec 2004, 09:40
by brans
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)
Posted: Sun 5. Dec 2004, 16:27
by brans
hast du unterdessen mal was hinbekommen?
Posted: Sun 5. Dec 2004, 17:06
by ssyfrig
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);
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";
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>
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
************************************************
Posted: Sun 5. Dec 2004, 18:41
by TAOG
man kann doch in der vorlage selber ein JS einbinden lassen. wieso wird in phpwcms rumgewurschtekt? geht das mit dem JS onload nciht?
Posted: Sun 5. Dec 2004, 18:43
by brans
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.
Posted: Mon 6. Dec 2004, 09:53
by TAOG
ok, gut zu wissen
