MyBB Community Forums

I've never actually done this before... I'm trying to add an Style Changer for my upcoming theme, tho the Style Changer aint working..

Here's the tutorial everybody uses:
http://www.dynamicdrive.com/dynamicindex...itcher.htm

Well everything else is working, but the Style Changer wont change css..

I have 2 css files which has the 2 different colors (Orange & Green). it doesn't do anything when you click the link which makes the CSS things change.

Here's one of my css file:

.post_buttons a {
        background: #D24726;
        padding: 5px 10px;
        font-size: 12px;
color: white;
}

.post_buttons a:hover {
        background: #000;
        color: white;
}

a.large_button {
        background: #D24726;
        padding: 10px 15px;
        font-size: 12px;
color: white;
}

a.large_button:hover {
        background: #000;
        color: white;
        text-decoration: none;
}

.thead {
	background: #D24726;
	color: #ffffff;
font-size: 18px;
font-weight: normal;
-o-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
-webkit-transition:all .25s ease-in-out;
}

.thead:hover {
background: #DC572E;
text-decoration: none;
}

.tfoot {
	background: #D24726;
	color: #ffffff;
font-weight: normal;
}

.navigation {
background: #D24726;
list-style: none; 
overflow: hidden; 
margin: auto auto;
padding: 0px;
width: 1040px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.menu ul a:hover, .menu ul a:active {
color: #e8e8e8;
text-decoration: none;
background: #D24726;
border: 2px solid #e8e8e8;
}

.shadetabs{
    margin-left: -32px;
    margin-top: -12px;
    margin-bottom: 0;
    padding-right: 6px;
    display: block;
    list-style-type: none;
    text-align: right;    
    font-size: 11px;
}

.shadetabs ul {
margin: 0;
padding: 8px;
}

.shadetabs li {
display: inline;
padding: 8px;
margin: 0;
}

.shadetabs li a {
float: right;
font-family: "arial";
font-size: 13px;
font-weight: bold;
color: #ddd;
text-decoration: none;
background: #D24726;
display: block;
z-index: 1;
padding: 8px 12px;
 -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
}

.shadetabs li a:hover {
background: #DC572E;
color: #fff;
text-decoration: none;
}

.shadetabs li a.selected, .shadetabs li a.selected:hover {
background: #F09609;
color: #fff;
}


.tabcontent {
background: {$mybb->settings['ProfileTabs_background']};
display: none;
padding: 8px;
margin-top: 7px;
}

.box-thing {
background: #f7f7f7;
border:none;
padding: 8px;
}

@
media print {
.tabcontent {
display:block !important;
}

+ I have everything correct on the headerinclude:

<link rel="alternate stylesheet" type="text/css" media="screen" title="Orange" href="images/metro/style/2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Green" href="images/metro/style/3.css" />
<script src="images/metro/style/styleswitch.js" type="text/javascript">

/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

And then on index the color changer:

<a href="javascript:MetroStyle('none', 60);" checked="checked">Teal</a>
<a href="javascript:MetroStyle('Orange', 60);">Orange</a>
<a href="javascript:MetroStyle('Green', 60);">Green</a>

the JS file:

//Style Sheet Switcher version 1.1 Oct 10th, 2006
//Author: Dynamic Drive: http://www.dynamicdrive.com
//Usage terms: http://www.dynamicdrive.com/notice.htm

var manual_or_random="manual" //"manual" or "random"
var randomsetting="3 days" //"eachtime", "sessiononly", or "x days (replace x with desired integer)". Only applicable if mode is random.

//////No need to edit beyond here//////////////

function getCookie(Name) { 
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}

function setCookie(name, value, days) {
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

function deleteCookie(name){
setCookie(name, "moot")
}


function setStylesheet(title, randomize){ //Main stylesheet switcher function. Second parameter if defined causes a random alternate stylesheet (including none) to be enabled
var i, cacheobj, altsheets=[""]
for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
if(cacheobj.getAttribute("rel").toLowerCase()=="alternate stylesheet" && cacheobj.getAttribute("title")) { //if this is an alternate stylesheet with title
cacheobj.disabled = true
altsheets.push(cacheobj) //store reference to alt stylesheets inside array
if(cacheobj.getAttribute("title") == title) //enable alternate stylesheet with title that matches parameter
cacheobj.disabled = false //enable chosen style sheet
}
}
if (typeof randomize!="undefined"){ //if second paramter is defined, randomly enable an alt style sheet (includes non)
var randomnumber=Math.floor(Math.random()*altsheets.length)
altsheets[randomnumber].disabled=false
}
return (typeof randomize!="undefined" && altsheets[randomnumber]!="")? altsheets[randomnumber].getAttribute("title") : "" //if in "random" mode, return "title" of randomly enabled alt stylesheet
}

function MetroStyle(styletitle, days){ //Interface function to switch style sheets plus save "title" attr of selected stylesheet to cookie
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (var i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it's a radio button
element[i].checked=true
break
}
}
}
}

if (manual_or_random=="manual"){ //IF MANUAL MODE
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet from cookie if there is one stored
setStylesheet(selectedtitle)
}
else if (manual_or_random=="random"){ //IF AUTO RANDOM MODE
if (randomsetting=="eachtime")
setStylesheet("", "random")
else if (randomsetting=="sessiononly"){ //if "sessiononly" setting
if (getCookie("mysheet_s")==null) //if "mysheet_s" session cookie is empty
document.cookie="mysheet_s="+setStylesheet("", "random")+"; path=/" //activate random alt stylesheet while remembering its "title" value
else
setStylesheet(getCookie("mysheet_s")) //just activate random alt stylesheet stored in cookie
}
else if (randomsetting.search(/^[1-9]+ days/i)!=-1){ //if "x days" setting
if (getCookie("mysheet_r")==null || parseInt(getCookie("mysheet_r_days"))!=parseInt(randomsetting)){ //if "mysheet_r" cookie is empty or admin has changed number of days to persist in "x days" variable
setCookie("mysheet_r", setStylesheet("", "random"), parseInt(randomsetting)) //activate random alt stylesheet while remembering its "title" value
setCookie("mysheet_r_days", randomsetting, parseInt(randomsetting)) //Also remember the number of days to persist per the "x days" variable
}
else
setStylesheet(getCookie("mysheet_r")) //just activate random alt stylesheet stored in cookie
} 
}