Questions About the Skin Selector

Hi

I have some questions about the skin selector code, as I have just tried it and it didn't work.

1. How do we find out the CSS of a skin without disabling the colours menu in admin panel?

2. Where exactly do we put the code with the link to the .js file? There are several places in the admin panel entitled "site description".

3. What does it look like when correctly installed?

4. Is there an easier way? The tutorial is confusing.

Thanks!

hello,
are you sure your talking about an editboard forum? if yes, what do you mean by "the skin selector code" ? can you be more explicit!!?

I'm referring to the code in the tricks and tips section, posted here by Dragon Man

Sorry about the double post, but it has been over 24 hours. I was wondering if anyone knew the answers to my questions? I would really like to know how to do this feature.

yes.

Code:

/*****************************
Do not remove this heading!
Change Skin Script
Copyright © 2007 Dragon Man
Modified by pauldemonteverde
pauldemonteverde[AT]yahoo.com
*****************************/
document.write('<style>body {margin-top:50px !important;}</style>');
document.write('<div
style="position: absolute; width: 304px; height: 38px; z-index: 1;
left: -60px; top: 15px" id="skinselector"><form><select
onchange="changeskin(this.options[this.selectedIndex].value);
window.location.reload();"><option> Change Skin
</option><option value="DEFAULT SKIN">  SKIN NAME HERE
</option><option value="FT SKIN"> SKIN NAME HERE
</option><option value="GG SKIN"> SKIN NAME HERE
skin</option></select></form></div>');
var scheme = getCookie('template1');
if (scheme == 'FT SKIN') {
document.write('
REL="stylesheet" TYPE="text/css"
HREF="UPLOAD CSS FILE AND PLACE URL HERE">');
} else if (scheme == 'GG SKIN') {
document.write('
REL="stylesheet" TYPE="text/css"
HREF="UPLOAD CSS FILE AND PLACE URL HERE">');
} else if (scheme == 'DEFAULT SKIN') {
document.write('
REL="stylesheet" TYPE="text/css"
HREF="UPLOAD CSS FILE">');
}

//No need to modify anything below this line
function changeskin(change) {
var scheme = change;
var name = 'template1';
var pathname = location.pathname;
var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
var ExpDate = new Date ();
ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
setCookie(name,scheme,ExpDate,myDomain);
}
function getCookie(name){
var cname = name + "=";
var dc = document·cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

function setCookie(name, value, expires, path, domain, secure) {
document·cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}

You can see the capital letters right? Well those are the thongs to replace.

When you get the CSS file, open up wordpad. then copy past the text of the CSS in the file. hit save as. make a name for it. after saving it, its end file type will be .wpd. change that to .css. Upload the CSS over at files-upload.com.
then copy paste the URL in the spot where it says "UPLOAD CSS FILE AND PLACE URL HERE". Do this with all the skins that oyu want. then save the whole file. hit save as. then name it any name you like. after saving it, rename the ending file type from .wpd, to .js. then upload it and put the URL in dragon man's HTML code. if this does not work, try removing all the ".html" tags in all the URLs. give it a few minutes and it should work.

There is a preview but I haven't got round to editing the tutorial, you post the shortened code here:


Admin Panel > General Admin > Configuration > Site description :)


You have to have css enabled to view your css I'm afraid ^^"