scriptygoddessSome time ago, Promoguy asked me to come up with a script that would let him change stylesheets with a simple click of a button…
If you don't already have these functions in your <head> tags… add them:
(I think these are the same functions MT uses on the individual entries page for the remember me thingy)
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function getCookie(name) {
var prefix = name + "=";
var nullstring = "";
var cookieStartIndex = document.cookie.indexOf(prefix);
if (cookieStartIndex == -1)
return nullstring;
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length;
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
Add this where you'll have your user select their style:
<script language="javascript">
var sURL = unescape(window.location.pathname);
function refresh()
{
window.location.href = sURL;
}
var rightnow = new Date();
fixDate(rightnow);
now.setTime(rightnow.getTime() + 365 * 24 * 60 * 60 * 1000)
</script>
<input type="button" onClick="setCookie('skinthesite', sanserif, rightnow,'/','www.yoursite.com' ,");refresh();" value="san-serif">
<input type="button" onClick="setCookie('skinthesite', serif, rightnow,'/','www.yoursite.com',");refresh();" value="serif">
</script>
(in this case, the two different style sheets feature two different font types – one serif for the site, the other sanserif – obviously you'll have to change the code above to fit your needs, and of course replace "www.yoursite.com" with your actual domain)
Now, at the top of your page, where you normally put that line about which style sheet to use… put this instead… (And as I've just discovered in trying to implement this here, make sure you put this line AFTER where you've declared the getCookie, setCookie functions above)
<script language="javascript">
var whichskin = getCookie("skinthesite");
if (whichskin == "serif") {
document.write('<link rel="stylesheet" href="/serif.css" type="text/css">')
} else if (whichskin == "sanserif") {
document.write('<link rel="stylesheet" href="/sanserif.css" type="text/css">')
} else {
document.write('<link rel="stylesheet" href="/serif.css" type="text/css">')
}
</script>
(this of course assumes you have your stylesheets named "serif.css" or "sanserif.css"… again, this is just the general gist of how you do it… you'll have to customize it to make it work for you)
Test it here: (this is only set to work with the "butterfly" skin of this site – just for simplicity sake)
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
