This will enable your members to choose between 4 Helios colors.
The code contains the header and footer images and will swap them along with the stylesheets.
If you are currently using them, remove them from your header and footer.
You will need to add the 4 helios stylesheets to your forum in Manage Styles.
Do NOT use the ones in the Stylesheet Index. They do not contain the necessary edits.
(or View Recent Posts there) No need to sign in.
After you install them select helios blue as the default style with the style picker.
This is the code.
Directions for where to edit it are after the code.
: Make sure to read the directions and make the edits to the code.
<!-- Helios Stylesheet Color Swapper -->
<table cellpadding="0" cellspacing="0" align="center">
<td align=center>
<style type="text/css">
fieldset { border: none !important; }
</style>
<form action="#" id="styleswitcher" class="styleswitcher"><small>
<input type="radio" name="style" value="red" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> <img src="http://i102.photobucket.com/albums/m105/mysmileyplace/helios/redblock.png"> Helios Red
<input type="radio" name="style" value="green" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> <img src="http://i102.photobucket.com/albums/m105/mysmileyplace/helios/greenblock.png"> Helios Green
<input type="radio" name="style" value="blue" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> <img src="http://i102.photobucket.com/albums/m105/mysmileyplace/helios/blueblock.png"> Helios Blue
<input type="radio" name="style" value="purple" onclick='changeStyle(this.value); parent.frames["top"].changeStyle(this.value)'> <img src="http://i102.photobucket.com/albums/m105/mysmileyplace/helios/purpleblock.png"> Helios Purple
</fieldset>
</form>
</small>
</td>
<tr>
<td class=header height="56px" width="861px" align=center>
</td>
</tr>
</table>
<!-- The Stylesheet Links -->
<link rel="stylesheet" type="text/css" href="http://www.smfforfree.com/styles/YOUR FORUM NAME/heliosblue.css?fin11" title="blue">
<link rel="alternate stylesheet" type="text/css" href="http://www.smfforfree.com/styles/YOUR FORUM NAME/heliosred.css?fin11" title="red">
<link rel="alternate stylesheet" type="text/css" href="http://www.smfforfree.com/styles/YOUR FORUM NAME/heliosgreen.css?fin11" title="green">
<link rel="alternate stylesheet" type="text/css" href="http://www.smfforfree.com/styles/YOUR FORUM NAME/heliospurple.css?fin11" title="purple">
<!-- 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>
The areas you are going to edit are in caps so you can easily see where they are.
.
with the following from your forum url: smfforfree2, smfforfree3, smfforfree4, mysmf, freesmfhosting etc.
