View Full Version: Styleswitchers

Dragonair's Den > Technical Assistance > Styleswitchers



Title: Styleswitchers
Description: By yours truly, Dark Phoenix.


Crimsonfur - February 18, 2006 06:21 AM (GMT)
Hiya there! You may all know me as DD's moderator (I am retiring from mod rank, so yeah), known as Dark Phoenix, MSerebii, or Serebii. We're not going to discuss that here now. We're going to talk about styleswitchers, extremely cool thingys that swap styles.

If you've ever been to The Cave of Dragonflies site and forum, you will see a drop-down menu to swap styles. Many will wonder, how do I do that? You see, making styleswitchers are pretty simple. Before going ahead to read, you should know some...:

* HTML
* How to make skins, but this is sort of optional.
* And patience.

If you know all of those listed or at least 2 of 'em, then keep reading. If not, then this will be certainly not for you.

Ready? Good. Time for step 1 for forums. Beware that I only know how to do this for Invisionfree forums. I've no idea what effect this will cause to a different forum host. (I also got permission from Joan to create this topic, so MWUAHAHA.)

FORUMS LESSON

1. You'll need a host. Freewebs is perfect for choice. So, create your account and go to your file manager. Create a file called style.css. Of course, you should take 'style' and rename it to something you want your style named. Make it short and sweet though, not for the whole name. Copy and paste a CSS in the file. Make two of 'em. Different CSS, of course.

2. Now that you've your file set up, get your forum. (Invisionfree hosted!) Go to your admin CP, then to Board Wrappers. Slap this code inside the Javascript Box:
QUOTE

<script type="text/javascript">
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>

<link rel="alternate stylesheet" href="http://www.hostnamehere.com/usernamewhatever/style.css" title="title">
<link rel="alternate stylesheet" href="http://www.hostnamehere.com/usernamewhatever/style.css" title="title">

Long code, isn't it? Anyway, find the red colored text. Edit the 'style' to the exact same file name of the file you'd just created in your File Manager. For the hostnamehere and usernamewhatever, change it to the URL that would've linked to your web account. Like this as an example: http://www.freewebs.com/theddcomics/mainsite.shtml.
Don't use the period at the end, by the way. Also, change the one title after the equal sign to a short and sweet title of the style.

3. Yay, now you got the main code of the styleswitcher code in. Here's another code to slap in the Header & Body section box. I prefer placing the code between the <% BOARD HEADER %> and the <% NAVIGATION %>.
QUOTE

<div align="center">
<p>Pick your style:</p>
<form name="switcher" action="URI">
<select name="styleswitch">
<option value=title>Style Title</option>
<option value="title">Style Title</option>
</select><br>
<input type="button" onClick="setActiveStyleSheet(document.switcher.styleswitch.options[document.switcher.styleswitch.selectedIndex].value); return false;" value="Switch">
</form></div>

See the red text? Those are the only things you should edit unless you're very experienced at this. Now. Change the titles to the one short and sweet title you'd done in your Javascript section. They've to be EXACTLY the same, no quotation marks. And, Style Title is obviously the title of your style. You could make it as long as you want, I guess. Just not too long.

4. Hoorah! It should work and the skin should change. But one main problem is this: the banner won't change as well. No problem. Go to the CSS files and add in this little code in, preferably at the bottom of the CSS:
QUOTE

#banner { height:150px; width:500px; background-image:url(http://); }

Change the height and width to the exact pixels of your banner. Change http:// to your banner image URL. Do this the same thing to the other CSS.

Next, we go to the Admin CP once more and to Images. Go to the area where you usually put your banner URL in. Replace the old one with this URL; don't ask me where I got the weird URL from (it works, though):
CODE
<center><img id="banner" src="http://67.18.37.15/1231/55/upload/p7470195.gif"></center>

Submit changes. Check your styles. Did it work? If it did work perfectly, congratulations for you! There is one problem though: Google ad colors don't change if you swapped styles. Don't know why, but this is only a minor problem. If this didn't work, feel free to PM me.
---
WEBSITE LESSONS

1. Websites are much easier to do. For this example, I will use Freewebs as usual. Now, go to the file manager and create a file style.css. Again, change 'style' to the short and sweet style name you want.

2. Now, in your CSS file, include something like um, this:
QUOTE
#banner { height:500px; width:150px; background-image:url (http://)

Like last time, change the red text. You know what to do. Then, save. Do this for two CSS files.

3. In your other file, put this in:
QUOTE
<div class="banner">blah blah codes here</div>

Change the red codes for your own codes.

4. Now that you've the style set up, we need a sort of link or drop-down menu that allows users to switch styles. But, first we'll put this code above the <head> section of your file:
QUOTE
<script type="text/javascript">

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>

<link rel="stylesheet" type="text/css" href="mainstyle.css" />
<link href="otherstyle.css" rel="stylesheet" type="text/css" title="title">
<link href="mainstyle.css" rel="alternate stylesheet" type="text/css" title="title">

Now, edit the two mainstyles to the title of one of your CSS files. Then edit otherstyle to a different CSS file. Change the titles for your short and sweet title. DUH.

5. Next, we will get the drop-down menu. Here's the code:
QUOTE
<div align="center">
<p>Pick your style:</p>
<form name="switcher" action="URI">
<select name="styleswitch">
<option value=title>Style Title</option>
<option value="title">Style Title</option>
</select><br>
<input type="button" onClick="setActiveStyleSheet(document.switcher.styleswitch.options[document.switcher.styleswitch.selectedIndex].value); return false;" value="Switch">
</form></div>

Like before, change the red to the same CSS files you created, blah blah blah...

6. Now try it out. Did it work? If it did, congratz! ^_^ And, uh, that's it, except one itty bitty mentionings.

For the knowing-how-to-make skins, I would prefer that because you don't have to give copyright to anyone who made it. For the skins other people made, you have to credit them all in the Board Wrappers, so it might be um, cloggish. XD

Anyway, this is the end of the tutorial. Maybe I should create an HTML tutorial in the future... Ah well. ^^




Hosted for free by InvisionFree