Add a portal block which allows your members to choose stylesheets.
Tested for several months, in IE, Firefox, SeaMonkey, Konquerer, and Opera.Live DemoNote: Although it is not on the portal on the site it - it is how it would look if you did put it in a
Portal Block.
There are several steps. Make sure you follow each one of them carefully.
(Suggestion: Print this page)
Step 1: The StylesheetsDecide 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 IndexHoliday StylesheetsStep 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.
<!-- Stylesheet Swapper For Portal Block -->
<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:
<link rel="alternate stylesheet" type="text/css" href="http://www.smfforfree3.com/styles/sibylstestsite/carbonfiber.css?fin11" title="TITLE">
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
<!-- Script for Stylesheet Swapper DO NOT EDIT -->
<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.
<body onload="switchit()">
Step 5: Set up the Portal BlockMake 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.<style type="text/css">
fieldset { border: none !important; }
</style>
<table align=center width="210px" cellspacing="5">
<td align=left valign="top">
<form action="#" id="styleswitcher" class="styleswitcher"><small>
<input type="radio" name="style" value="TITLE NAME" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> NAME THEY SEE IN THE LIST
<br>
<input type="radio" name="style" value="TITLE NAME" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> NAME THEY SEE IN THE LIST
</fieldset>
</form>
</td>
</table>
Add/edit more of these for each additional stylesheet:
<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
Signup For Free Forum
