Stylesheet Swapper for Portal

Add a portal block which allows your members to choose stylesheets.

Tested for several months, in IE, Firefox, SeaMonkey, Konquerer, and Opera.

There are several steps. Make sure you follow each one of them carefully.
(Suggestion: Print this page)

Step 1: The Stylesheets

Decide which stylesheet you are going to use as your forums default style.
Add it to your forum in Manage Styles and set it as default. (choose it with the style picker)

Find other styles you want to use.
Add each of them in Manage Styles.
When adding them name them the names you want your members to see in a list when they choose them.
(will help you to remember them when setting this up if you write the names down)

There are dozens of stylesheets, and the directions to add them to your forum here:
Stylesheet Index
Holiday Stylesheets

Step 2: The Stylesheet Code
(You are going to edit this)

The FIRST link in the code (link rel="stylesheet") = The stylesheet you chose to be the default style for your forum.
The SECOND link (link rel="alternate stylesheet") = Additional stylesheet.

Code:

<link rel="stylesheet" type="text/css" href="http://www.smfforfree3.com/styles/sibylstestsite/enhanced.css?fin11" title="TITLE">

<link rel="alternate stylesheet" type="text/css" href="http://www.smfforfree3.com/styles/sibylstestsite/carbonfiber.css?fin11" title="TITLE">

Add more of these for each alternate stylesheet:

Code:

How to edit the code:

1. YELLOW: Replace smfforfree3.com with YOUR forums info.
(for instance smfforfree.com, smfforfree2.com, smfforfree3.com, smfforfree4.com, mysmf.com, freesmfhosting.com)
Make certain you have this correct or it will NOT work.

2. GREEN: Replace sibylstestsite with the name of your forum.

3. BLUE: Replace enhanced with the name of your stylesheet.

4. PINK: Replace TITLE with the word you want your members to see as the choice in the portal menu (lower case - no spaces)

Do this for all of the stylesheets you are going to use.

After making the edits put the code at the top of your HEADER.

You are going to need all of the title names when you edit the code for the portal block.
Either write them down or keep another window open in your browser.
It is important that the names match in both places.

Step 3: The Script (swaps stylesheet, sets cookie, radio selection)

Put this right underneath the stylesheet code in your HEADER.
IMPORTANT: Do NOT change anything in the script

Code:

<script type='text/javascript'>
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}

function switchit() {
if (readCookie('style')) { title=readCookie('style'); changeStyle(title); var radios = document.getElementById ('styleswitcher');
if (radios) {
var inputs = radios.getElementsByTagName ('input');
if (inputs) {
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type == 'radio' && inputs[i].name == 'style')
inputs[i].checked = inputs[i].value == (title)
}
}
} } }

// function topchangeStyle(title) {
// var lnks = document.getElementsByTagName('link');
// for (var i = lnks.length - 1; i >= 0; i--) {
// if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
// lnks[i].disabled = true;
// if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
// }}}

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);
</script>

Step 4: Footer Code makes radio buttons persist (FF,SM,Opera,Konquerer)

Place this code in your Footer.

Code:

Step 5: Set up the Portal Block

Make an html block ... name it whatever you wish.
Edit the html block.

The code below will go in the block.
Ive separated it with spaces to help you to understand it.

There is a section for each stylesheet.

For EACH stylesheet do the following:
Remember to put in a choice for your default style too.

1. change TITLE NAME to the exact same TITLE name you used in the header (important)
(reminder: lowercase - no spaces)

2. change NAME THEY SEE IN THE LIST to the word they will see in the list of choices.
(you can name it as you wish)

Note: I have the width of the table set to 210 as it works well on my forum that way.
You can change that to accomodate your own portal.

Code:

Add/edit more of these for each additional stylesheet:

Code:

<input type="radio" name="style" value="TITLE NAME" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> NAME THEY SEE IN THE LIST

thanks to:
http://www.washington.edu/webinfo/snippets/javascript/formvals.html for info on how to automagically select radio buttons
http://javascript.about.com/library/blswitch.htm for how to on using js to switch stylesheets
http://www.quirksmode.org/js/cookies.html for cookie information