Switch CSS Skins On The Fly - Forums

Switch CSS Skins On The Fly

Options

micron

Jan 12 2004, 07:45 PM

Post #1

cb's #1 fan! =)

Group: Advisor
Posts: 2,342
Joined: Nov 2003
Member No: 1

Presenting a Xangans.com Original™ - On the fly CSS skin switcher. Only works with PURE CSS SKINS when untweaked, so that means no HTML edit! You will need a webhost to host your css includes, if you do not have one, you can use THIS TOOL. Scroll down for a random CSS skin + on the fly switcher hybird. For cookies version go HERE.

COPY AND PASTE (REQUIRED 1 OF 1)
Anywhere. Read the comments for instructions.

CODEBOX: -> right click -> copy/paste

<br /><br /><script type='text/javascript'><br />// on the fly css skin switcher by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />// spacer between skin listing (html a-okay)<br />spacer = ' - ';<br /><br />// your initial css skin<br />document.write('<link rel="stylesheet" href="'+ skin[0] +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br /> document.getElementById('skin').href = skin[index];<br /> return false;<br />}<br /><br />var text = '';<br />for (var i=0; i<name.length; i++) {<br /> text += '<a href="#" onclick="return changeSkin('+ i +');">'+ name[i] +'</a>'+ ((i+1 != name.length) ? spacer : "");<br />}<br /><br />document.write('<style>.skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<div align="'+ align +'" class="skin">'+ text +'</div>');<br /></script><br /><br />

DROP-DOWN VERSION:

CODEBOX: -> right click -> copy/paste

<br /><script type='text/javascript'><br />// on the fly css skin switcher dropdown menu version by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />// your initial css skin<br />document.write('<link rel="stylesheet" href="'+ skin[0] +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br />document.getElementById('skin').href = skin[index.options[index.selectedIndex].value];<br />return false;<br />}<br /><br />var text = '<select onChange="return changeSkin(this);">';<br />for (var i=0; i<name.length; i++) {<br />text += '<option value="'+ i +'">'+ name[i] +'</option>';<br />}<br />text += '</select>';<br /><br />document.write('<style>select, .skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<form><div align="'+ align +'" class="skin">choose skin: '+ text +'</div></form>');<br /></script><br />

Here's a random css skin + on the fly switcher hybird.

CODEBOX: -> right click -> copy/paste

<br /><script type='text/javascript'><br />// random skin + on the fly skin switcher by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />// spacer between skin listing (html a-okay)<br />spacer = ' - ';<br /><br />var j = Math.floor(Math.random() * skin.length);<br />document.write('<link rel="stylesheet" href="'+ skin[j] +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br />document.getElementById('skin').href = skin[index];<br />return false;<br />}<br /><br />var text = '';<br />for (var i=0; i<name.length; i++) {<br />text += '<a href="#" onclick="return changeSkin('+ i +');">'+ name[i] +'</a>'+ ((i+1 != name.length) ? spacer : "");<br />}<br /><br />document.write('<style>.skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<div align="'+ align +'" class="skin">'+ text +'</div>');<br /></script><br />

And the hybird drop down version.

CODEBOX: -> right click -> copy/paste

<br /><script type='text/javascript'><br />// random skin + on the fly skin switcher dropdown menu version by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />var j = Math.floor(Math.random() * skin.length);<br />document.write('<link rel="stylesheet" href="'+ skin[j] +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br />document.getElementById('skin').href = skin[index.options[index.selectedIndex].value];<br />return false;<br />}<br /><br />var text = '<select onChange="return changeSkin(this);">';<br />for (var i=0; i<name.length; i++) {<br />text += '<option value="'+ i +'" '+ ((i==j) ? "selected" : "") +'>'+ name[i] +'</option>';<br />}<br />text += '</select>';<br /><br />document.write('<style>select, .skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<form><div align="'+ align +'" class="skin">choose skin: '+ text +'</div></form>');<br /></script><br />

Here's the cookie versions, which saves the users last skin preference. I encrypted the cookie functions using our source encoder so that it will also work on xangas (document.cookie is disabled).
Here is the non-dropdown version:

CODEBOX: -> right click -> copy/paste

<br /><script type='text/javascript'><br />// simple javascript encoder by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var s1 = unescape('%3Dtdsjqu%21uzqf%3E%28ufyu0kbwbtdsjqu%28%3F%0E%0Bwbs%21upebz%21%3E%21ofx%21Ebuf%29*%3C%0E%0Bwbs%21fyqjsft%21%3E%21ofx%21Ebuf%29upebz/hfuUjnf%29*%21%2C%21476%21+%2135%21+%2171%21+%2171%21+%212111*%3C%0E%0B%0E%0Bgvodujpo%21tfuDppljf%29obnf-%21wbmvf*%21%7C%0E%0Bepdvnfou/dppljf%3Eobnf%21%2C%21%28%3E%28%21%2C%21ftdbqf%29wbmvf*%21%2C%21%28%3C%21fyqjsft%3E%28%21%2C%21fyqjsft/upHNUTusjoh%29*%3C%0E%0B%7E%0E%0B%0E%0Bgvodujpo%21hfuDppljf%29obnf*%21%7C%0E%0Bwbs%21sf%21%3E%21ofx%21SfhFyq%29obnf%21%2C%21%23%3E%29%5C_%3C%5E%2C*%23*%3C%0E%0Bwbs%21wbmvf%21%3E%21sf/fyfd%29epdvnfou/dppljf*%3C%0E%0Bsfuvso%21%29wbmvf%21%22%3E%21ovmm*%21@%21voftdbqf%29wbmvf%5C2%5E*%21%3B%21ovmm%3C%0E%0B%7E%0E%0B%3D0tdsjqu%3F');var s2='';for(var i=0;i<s1.length;i++){s2+=String.fromCharCode(s1.charCodeAt(i)-1);}document.write(s2);<br /></script><br /><br /><script type='text/javascript'><br />// on the fly skin switcher by micron (cookies)<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />// spacer between skin listing (html a-okay)<br />spacer = ' - ';<br /><br />document.write('<link rel="stylesheet" href="'+ (getCookie('css') ? getCookie('css') : skin[0]) +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br />document.getElementById('skin').href = skin[index];<br />setCookie('css', skin[index]);<br />return false;<br />}<br /><br />var text = '';<br />for (var i=0; i<name.length; i++) {<br />text += '<a href="#" onclick="return changeSkin('+ i +');">'+ name[i] +'</a>'+ ((i+1 != name.length) ? spacer : "");<br />}<br /><br />document.write('<style>.skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<div align="'+ align +'" class="skin">'+ text +'</div>');<br /></script><br />

And here is the dropdown version:

CODEBOX: -> right click -> copy/paste

<br /><script type='text/javascript'><br />// simple javascript encoder by micron<br />// for more xanga scripts and help go to createblog.com<br /><br />var s1 = unescape('%3Dtdsjqu%21uzqf%3E%28ufyu0kbwbtdsjqu%28%3F%0E%0Bwbs%21upebz%21%3E%21ofx%21Ebuf%29*%3C%0E%0Bwbs%21fyqjsft%21%3E%21ofx%21Ebuf%29upebz/hfuUjnf%29*%21%2C%21476%21+%2135%21+%2171%21+%2171%21+%212111*%3C%0E%0B%0E%0Bgvodujpo%21tfuDppljf%29obnf-%21wbmvf*%21%7C%0E%0Bepdvnfou/dppljf%3Eobnf%21%2C%21%28%3E%28%21%2C%21ftdbqf%29wbmvf*%21%2C%21%28%3C%21fyqjsft%3E%28%21%2C%21fyqjsft/upHNUTusjoh%29*%3C%0E%0B%7E%0E%0B%0E%0Bgvodujpo%21hfuDppljf%29obnf*%21%7C%0E%0Bwbs%21sf%21%3E%21ofx%21SfhFyq%29obnf%21%2C%21%23%3E%29%5C_%3C%5E%2C*%23*%3C%0E%0Bwbs%21wbmvf%21%3E%21sf/fyfd%29epdvnfou/dppljf*%3C%0E%0Bsfuvso%21%29wbmvf%21%22%3E%21ovmm*%21@%21voftdbqf%29wbmvf%5C2%5E*%21%3B%21ovmm%3C%0E%0B%7E%0E%0B%3D0tdsjqu%3F');var s2='';for(var i=0;i<s1.length;i++){s2+=String.fromCharCode(s1.charCodeAt(i)-1);}document.write(s2);<br /></script><br /><br /><script type='text/javascript'><br />// on the fly skin switcher dropdown menu version by micron (cookies)<br />// for more xanga scripts and help go to createblog.com<br /><br />var skin = new Array();<br />var name = new Array();<br /><br />// url to your css skins<br />skin[0] = 'http://url/to/skin1.css';<br />skin[1] = 'http://url/to/skin2.css';<br />skin[2] = 'http://url/to/skin3.css';<br /><br />// name of your css skins<br />name[0] = 'skin1';<br />name[1] = 'skin2';<br />name[2] = 'skin3';<br /><br />// aligment for skin listing<br />align = 'center';<br /><br />document.write('<link rel="stylesheet" href="'+ (getCookie('css') ? getCookie('css') : skin[0]) +'" type="text/css" id="skin">');<br /><br />function changeSkin(index) {<br />document.getElementById('skin').href = skin[index.options[index.selectedIndex].value];<br />setCookie('css', skin[index.options[index.selectedIndex].value]);<br />return false;<br />}<br /><br />var text = '<select onChange="return changeSkin(this);">';<br />for (var i=0; i<name.length; i++) {<br />text += '<option value="'+ i +'" '+ ((getCookie('css')==skin[i]) ? "selected" : "") +'>'+ name[i] +'</option>';<br />}<br />text += '</select>';<br /><br />document.write('<style>select, .skin { font-size: 10px !important; font-family: verdana, sans-serif !important; }</style>');<br />document.write('<form><div align="'+ align +'" class="skin">choose skin: '+ text +'</div></form>');<br /></script><br />

This post has been edited by Kathleen: Jul 29 2004, 03:43 PM

[Up]

[Quote]

« Next Oldest · Xanga Resolved Topics · Next Newest »

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members: